Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: Javascript after Ajax

  1. #1
    Ext User
    Join Date
    Jul 2007
    Posts
    91

    Default Javascript after Ajax

    As I'm designing out my site to use Ext something confused me a bit. For content loaded via Ajax (let's say a TabPanel), if that content itself wants to render Ext components, I can't use onDOMReady can I?

    What is considered the best approach to execute the JS needed to initialize a page that was loaded via Ajax?

    Thanks.

  2. #2
    Ext User Joe's Avatar
    Join Date
    Apr 2007
    Posts
    243

    Default Make sure you load scripts

    Make sure you are loading scripts in your Ajax call and you should be fine.

    The Ajax page loads into the same logical page/document as the original .. which has the Ext loaded and ready. Your ajax page is also ready .. so just use all the same variables just like it was part of the original.

    If you are having a particular issue, post details.
    Joseph Francis,
    CoreLan / Meeting Consultants

  3. #3
    Ext User
    Join Date
    Jul 2007
    Posts
    91

    Default

    I guess I should have been more specific, sorry.

    I'm specifically thinking that if the page loaded via ajax has:

    Ext.onReady(....)

    Will the function specified be executed after be loaded via Ajax into the primary pages document? Or do I need to call it directly (the body of the onReady that is).

    Thanks.

  4. #4
    Ext User deanna's Avatar
    Join Date
    Aug 2007
    Location
    Alabama
    Posts
    306

    Default

    onReady is called when the whole page first loads and is ready. Any ajax calls do not trigger that - that is what the success and failure functions are for in the ajax calls.

  5. #5
    Ext User Joe's Avatar
    Join Date
    Apr 2007
    Posts
    243

    Default So for clarity

    To be clear. Your main page loads via the onReady. Then you make your ajax call and pass a success function. The success function is called with the ajax page is loaded - that is where you put the code to run when the page loads. Your main page is the "controller" object in this case.

    If you still don't understand and need a sample - I'll post one.
    Joseph Francis,
    CoreLan / Meeting Consultants

  6. #6
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    "loading" content just drops any received text into innerHTML.

    Scripts you embed in that HTML are extracted using a RegExp, and then executed using eval after that innerHTML has been set.

  7. #7
    Sencha User hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,966

    Default

    Quote Originally Posted by fsa3 View Post
    I guess I should have been more specific, sorry.

    I'm specifically thinking that if the page loaded via ajax has:

    Ext.onReady(....)

    Will the function specified be executed after be loaded via Ajax into the primary pages document? Or do I need to call it directly (the body of the onReady that is).

    Thanks.
    @fsa3 -- Yes, recent versions of Ext will execute your code wrapped in an Ext.onReady block (even later, after the document is initially loaded).
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  8. #8
    Ext User
    Join Date
    Jul 2007
    Posts
    91

    Default

    Sorry for the long delay - so I can't seem to get this to work.

    In the HTML returned by the Ajax call I have a few script tags (generated by JSP code) like:
    HTML Code:
           <script>
            Ext.onReady(function(){
                alert('x');
                setSlider(<%=uid%>,<%=destID%>,<%=userrank%>);
            });
            </script>
    When the AJAX loads the page everything renders fine but I don't see the JS get called.

    In case it matter, in this case the AJAX call is being made by the autoLoad of a groupTabPanel item.

    Thanks.
    Last edited by mystix; 8 Jun 2009 at 5:37 PM. Reason: POST HTML IN [html][/html] TAGS.

  9. #9
    Sencha User hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,966

    Default

    If this is Ext 3, there is bug that prevents scripts from executing during Element updates.
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  10. #10
    Ext User
    Join Date
    Jul 2007
    Posts
    91

    Default

    Yep I'm on 3.1, any idea if its fixed in 3.2?

    Is there a way to track the bug item? Sorry somewhat new to this side of things.

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •