jQuery ajax load() java script not executing?!

Question

Hey guys,

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 need to explicitly call ahover on the unordered list. See the documentaton.

Answer 2

So lets make sure you have jquery loaded in the first place, be sure that the link to the library is in the head of your html, so something like this:

<script src="/javascripts/jquery-1.3.2.min.js" type="text/javascript"></script>

use firebug http://getfirebug.com/ to make sure it is loaded by checking the "net" tab.

Also be sure you are loading your javascript: (here I've called it "main")

<script src="/javascripts/main.js" type="text/javascript"></script>

Then in your js file do something like:

$.(document).load( function () { alert("loaded!") });

that should fire the alert once the page has "fully loaded" I prefer to use ready() which will fire once the dom is loaded.

If you have this all working and what you actually want to do is load and execute js from your js file try this:

.getScript()

this will load and execute the javascript you want.

Answer 3

Ahh, I see... If you just want to load some html use:

$("selector for div ").load("/path_to_html.html div#main");

Where div#main is the div I want to retrieve in your remote file, but remember this must be the same domain for it to work.

Answer 4

Juhu. I've solved it. Don't know wheather this is the most elegant way but it works :)

jpsilvashy your getscript(); has done it :) I've included these two lines in my content which should be loaded:

$.getScript("js/tutorial-1.js"); $.getScript("js/jquery.ahover.js");

that works.

For everyone who has the same problem there's a small hint. You should delete the body and head tags. If they are included it doesn't work.

But now there's still a question: Why do i need to include this in the loaded content? I think the javascript has to be loaded after the content was loaded into the dom.

But that only some assumption!

Thanks for your great help!

Answer 5

I have this problem to. I used an (ajax) javascript for tabs, an it loads the html, but the html i loaded needs java, and java script looks like it`s not loaded so my page dose not looks fine.

Where do i type the $.getScript ?? in the html wich the ajax will load, or the index?

Answer 6

If I understood what you asked correctly...

you want to load via ajax into a div on your page, lets call it;

1) div id="loadStuffHere" 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 of (xyz.html)

So just do this;

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

BUT WAIT!! Lets say inside of div id="loadMeOnly" 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.

So... 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, so u would have it all... happy happy :)

the trick here is commas... u could pick and choose to load whatever doms u want