PDA

View Full Version : Javascript after Ajax



fsa3
29 May 2009, 7:20 PM
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.

Joe
29 May 2009, 8:33 PM
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.

fsa3
29 May 2009, 8:39 PM
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.

deanna
29 May 2009, 8:41 PM
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.

Joe
29 May 2009, 9:12 PM
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.

Animal
29 May 2009, 9:36 PM
"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.

hendricd
30 May 2009, 5:34 AM
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).

fsa3
8 Jun 2009, 5:27 PM
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:


<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.

hendricd
8 Jun 2009, 5:52 PM
If this is Ext 3, there is bug that prevents scripts from executing during Element updates.

fsa3
8 Jun 2009, 5:57 PM
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.

Animal
8 Jun 2009, 11:46 PM
Nobody is on 3.1

fsa3
9 Jun 2009, 4:11 AM
Sorry had the numbering wrong - I upgrading to 3.0-rc2 and the same issue seems to exist. What's the proper way to file a bug? Does anyone know a work around?

Animal
9 Jun 2009, 4:16 AM
It's fixed in SVN.

Only a few days till the release.

sunco
12 Oct 2009, 2:30 PM
I download Ext 3.0 since 2 weeks ago but the problem is still there

I can't execute JS code that comes in the Ajax loaded file