|
|
AJAX.NET Partial Refresh SOLUTION
Last post 07-25-2007, 5:17 PM by slegay. 12 replies.
-
 07-08-2007, 5:19 AM |
|
|
AJAX.NET Partial Refresh SOLUTION
Hi Adam,
I think I have found an issue with the way CE registers it's scripts on an AJAX enabled page.
If you create a page, place CE in an update panel and set CE property visible=false. Now add a button which changes the visiblity of CE to true, and add it as a trigger the the update panel. You'll notice that CE fails to load correctly when the page is updated.
I have identified that the problem is that your scripts are loaded similar to the following:
<script src="http://cutesoft.net/CuteSoft_Client/CuteEditor/Load.ashx?type=scripts&file=IE_Loader"></script>
<img src="http://cutesoft.net/CuteSoft_Client/CuteEditor/images/1x1.gif?xxxxx" onload="CuteEditorInitialize(...)" />
The issue is that the script tag will not be loaded if it is contained in a partial page refresh. Your AJAX example works because CE is visible when the page first loads.
Microsoft provide a means to load scripts through the ScriptManager object. If you use the following code to register the script then the script will load correctly on a partial refresh.
ScriptManager.RegisterClientScriptInclude(Me, Me.GetType(), "LABEL", "JS PATH")
ScriptManager.RegisterClientScriptBlock(Me, Me.GetType(), "initialisation", "CuteEditorInitialize(...);", True)
You will also have to add the following call-back to the end of the JS file:
if (typeof(Sys) !== 'undefined') {
Sys.Application.notifyScriptLoaded();
}
I notice that in other topics in this forum your answer is usually to set the EnablePartialRendering property of ScriptManager to false, which kind of defeats the point of using AJAX. I thought I'd point out the root cause of these problems and a solution (just to be nice).
Thanks,
Ady
|
|
-
| 07-09-2007, 7:07 AM |
|
|
Re: AJAX.NET Partial Refresh SOLUTION
SOLUTION
Internet Explorer works perfectly, however FireFox and Opera have a slight issue (please see below). Safari also works well, provided you supply the correct CSS to the header on the page load.
This code forces the required JS files to be downloaded on the page's load, even if CE is not visible. Not ideal, it would be better to use ScriptManager as per my post above (so the JS is only downloaded if nessessary), but this works.
Private Sub MyBase_PreRender(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.PreRender
Dim sBrowserString As String
Select Case Page.Request.Browser.Browser
Case "IE", "Opera"
sBrowserString = Page.Request.Browser.Browser
Case "AppleMAC-Safari", "Safari"
sBrowserString = "Safari"
'Also need to add link to Safari CSS file
Case Else
sBrowserString = "Gecko"
End Select
Dim sScriptUrl As String = String.Format("~/CuteSoft_Client/CuteEditor/Load.ashx?type=scripts&file={0}_Loader", sBrowserString)
Page.ClientScript.RegisterClientScriptInclude(GetType(CuteEditor.Editor), "CuteSoft.AJAX", Page.ResolveUrl(sScriptUrl))
End Sub
Adam,
In FireFox and Opera I get the following JavaScript error when posting back using a LinkButton (or anything that uses __doPostBack) on the the post after CE has first been dispayed. This prevents the page from posting back.
editor.GetScriptProperty is not a function
I assume this is because you are holding a reference to each CE after it has been initialised, but at this point the object has been disposed. If you could alter your javascript to do a quick check to see if the editor exists we can solve this once and for all.
Thanks,
Ady
|
|
-
| 07-10-2007, 4:57 PM |
-
webreality
-
-
-
Joined on 11-24-2004
-
-
Posts 6
-
-
|
Re: AJAX.NET Partial Refresh SOLUTION
Ady,
Thanks very much for this - it has been quite a hurdle to creating usable AJAX admin apps for me.
Did you ever get an solution for the latter part of your second post?
Thanks in advance,
Tom
Head of Development
Webreality
|
|
-
| 07-11-2007, 2:07 AM |
-
| 07-11-2007, 2:36 AM |
|
|
Re: AJAX.NET Partial Refresh SOLUTION
Hi Adam,
It doesn't seem to have done the trick.
Please go here (In FireFox):
1. Click Show Editor
2. Click Hide Editor
3. Click Refresh Panel
If you look at the error consol in FF, you can see the JS error. I can email you the source of the project if you like.
Many Thanks,
Ady
|
|
-
| 07-11-2007, 1:01 PM |
-
| 07-11-2007, 9:20 PM |
-
| 07-12-2007, 8:13 AM |
|
|
Re: AJAX.NET Partial Refresh SOLUTION
Hi Adam,
Your a star, this works great. Thanks for the work you've put in on this.
I notice I no longer need the code above, does this mean you have implemented this in CE?. I still have to load the CSS manually for Safari, but I can live with that.
Many Thanks,
Ady
|
|
-
| 07-12-2007, 12:33 PM |
-
| 07-24-2007, 5:31 PM |
-
slegay
-
-
-
Joined on 06-19-2007
-
-
Posts 6
-
-
|
Re: AJAX.NET Partial Refresh SOLUTION
Thank you for fixing this.
|
|
-
| 07-25-2007, 2:15 PM |
-
slegay
-
-
-
Joined on 06-19-2007
-
-
Posts 6
-
-
|
Re: AJAX.NET Partial Refresh SOLUTION
Actually, now I can't catch CuteEditor_OnCommand anymore, and the editor only creates full postbacks, even when placed within an UpdatePanel. My guess is when the editor loads it scripts during an asynchronous callback, it overrides the CuteEditor_OnCommand function.
I even tried registering CuteEditor_OnCommand using ScriptManager.RegisterStartupScript, but that didn't fix it.
By the way, your javascript developers might want to read about a little thing called Object Oriented Programming. The current event handling mechanism is very, very weak and forces developers to do all event handling for all editors in that one function (CuteEditor_OnCommand). You might want to look at how Microsoft does it in the Atlas framework. Much, much better. Using prototype and object instances wouldn't hurt either.
|
|
-
| 07-25-2007, 3:00 PM |
-
Adam
-
-
-
Joined on 09-23-2003
-
Aurora, ON
-
Posts 18,678
-
-
|
Re: AJAX.NET Partial Refresh SOLUTION
 slegay:
Actually, now I can't catch CuteEditor_OnCommand anymore, and the editor only creates full postbacks, even when placed within an UpdatePanel. My guess is when the editor loads it scripts during an asynchronous callback, it overrides the CuteEditor_OnCommand function.
I even tried registering CuteEditor_OnCommand using ScriptManager.RegisterStartupScript, but that didn't fix it.
Please create a sample project showing the problem and send it to me.
slegay:
By the way, your javascript developers might want to read about a little thing called Object Oriented Programming. The current event handling mechanism is very, very weak and forces developers to do all event handling for all editors in that one function (CuteEditor_OnCommand). You might want to look at how Microsoft does it in the Atlas framework. Much, much better. Using prototype and object instances wouldn't hurt either.
Our JavaScript code is written using Object Oriented method. If we don't use this, it will be impossible to finish projects like Cute Editor and Cute Chat.
asp.net Chat http://cutesoft.net/ASP.NET+Chat/default.aspx
Web Messenger: http://cutesoft.net/Web-Messenger/default.aspx
asp.net wysiwyg editor: http://cutesoft.net/ASP.NET+WYSIWYG+Editor/default.aspx
asp wysiwyg html editor: http://cutesoft.net/ASP
asp.net Image Gallery: http://cutesoft.net/ASP.NET+Image+Gallery/default.aspx
Live Support: http://cutesoft.net/live-support/default.aspx
|
|
-
| 07-25-2007, 5:17 PM |
-
slegay
-
-
-
Joined on 06-19-2007
-
-
Posts 6
-
-
|
Re: AJAX.NET Partial Refresh SOLUTION
I don't have time to put together a sample project - the description I submitted should be enough.
The bug is exactly as described: when loading the editor using an updatepanel async postback, the user-defined "CuteEditor_OnCommand" gets overwritten by the CuteEditor javascript file ("CuteEditorImplementation.js"), which turns it into an empty function.
The workaround is to add this function:
function onHtmlEditorCommand(editor,command,ui,value)
{
//do some custom handling here
}
CuteEditor_OnCommand = onHtmlEditorCommand;
var checkHtmlEditorCommandHandlerInterval = setInterval("checkHtmlEditorCommandHandler()", 500);
function checkHtmlEditorCommandHandler()
{
if(CuteEditor_OnCommand && CuteEditor_OnCommand != onHtmlEditorCommand)
{
CuteEditor_OnCommand = onHtmlEditorCommand;
clearInterval(checkHtmlEditorCommandHandlerInterval);
}
}
Now everything works fine - but this is kind of a hack.
As to Object Oriented programming, overriding a global method to handle events is not object oriented. Event handling uses the concept of events and handlers. The MS Ajax implementation is very good and close to C# event handling - you should take a look at it. At least provding a "ClientSideOnCommand" and "ClientSideOnChange" public properties for each editor instance would be a good first step.
|
|
|
|
|