jQuery ajax load() java script not executing?

Question

I've read several posts about this issue but i can't solve it.

I am loading an html file into a div. The file i am loading contains a unordered list. This list should be expanded (a menu with submenu items) and closed. Therefore i need js. But unfortunately this script isn't loaded.

Can anyone help me?

Would be so great! Thanks a lot :)

Answer 1

You want to load via AJAX into a div on your page, lets call it;

1) <div id="loadStuffHere"></div> of (abc.html)

2) the stuff to populate loadStuffHere comes from xyz.html

So just do this;

$("loadStuffHere").load("xyz.html");

BUT WAIT!! You dont want to have to load everything from xyz.html you just want to load a portion of xyz.html say <div id="loadMeOnly"></div> of (xyz.html)

So just do this;

$("loadStuffHere").load("xyz.html #loadMeOnly");

BUT WAIT!! Lets say inside of <div id="loadMeOnly"></div> is an accordion so which means it has to be initialized which means u have to also include the javascripts... hmm, what to do...

You would think of doing this;

$("loadStuffHere").load("xyz.html #loadMeOnly");
$.getScript('js/xyz.js');

Well the above sucks because a) u would need to create an external js file and b) You are actually making 2 http calls, when u could do it with 1 http call if you did it by normal non-ajax way.

The best solution is to get 2 things with 1 call the (HTML and the js - 1 line, 1 http) here is how u do it;

$("loadStuffHere").load("xyz.html #loadMeOnly, script");

This loads the #loadMeOnly div AND all script tags

The trick here is commas. You could pick and choose to load whatever doms you want