AJAX.NET Partial Refresh SOLUTION

Last post 07-25-2007, 5:17 PM by slegay. 12 replies.
Sort Posts: Previous Next
  •  07-08-2007, 5:19 AM 31382

    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&amp;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 31399 in reply to 31382

    Re: AJAX.NET Partial Refresh SOLUTION

    SOLUTION
     
    Place the following code in your Page.  (DEMO : http://cutesoft.paperheads.co.uk/)
     
    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 31447 in reply to 31399

    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 31458 in reply to 31447

    Re: AJAX.NET Partial Refresh SOLUTION

    Guys,
     
    Please download the control and try again.
     
    Keep me posted
     

    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-11-2007, 2:36 AM 31459 in reply to 31458

    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 31472 in reply to 31459

    Re: AJAX.NET Partial Refresh SOLUTION

    Ady,
     
    Please send this project to me at Adam@CuteSoft.net.  We will work on this tonight.
     
     

    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-11-2007, 9:20 PM 31489 in reply to 31472

    Re: AJAX.NET Partial Refresh SOLUTION

    Ady,
     
    Thanks for the sample project. We just uploaded a new build.
     
     
    Keep me posted.
     
     

    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-12-2007, 8:13 AM 31495 in reply to 31489

    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 31499 in reply to 31495

    Re: AJAX.NET Partial Refresh SOLUTION

    Ady:
    Hi Adam,
     
    Your a star, this works great. Thanks for the work you've put in on this.
     
    Many Thanks,
    Ady

    Ady,
     
    You are welcome.  Actually this issue is fixed by a genius developer of our team, Terry.
     
    Let me know if you have any suggestions to improve this product.
     
    Thanks.
     
     
     
     
     
     

    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-24-2007, 5:31 PM 31838 in reply to 31499

    Re: AJAX.NET Partial Refresh SOLUTION

    Thank you for fixing this.
  •  07-25-2007, 2:15 PM 31879 in reply to 31838

    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 31880 in reply to 31879

    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 31893 in reply to 31880

    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.
     
View as RSS news feed in XML