jQuery ajax load() java script not executing?

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

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

This solution works best. Using a callback function after the specific div or content container is loaded.

$('#CONTAINER').load('URL_TO_LOAD HTML_ELEMENT_TO_PLUCK_FROM_PAGE_AND_INSERT_INTO_CONTAINER', function () {
    $.getScript('PATH_TO_SCRIPT_THAT_YOU_REQUIRE_FOR_LOADED_CONTENT');
});

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:

<script type="text/javascript"> 
$.getScript("js/tutorial-1.js");
$.getScript("js/jquery.ahover.js");
</script>

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!

The script can't use document.ready, the document already ready. Just put the script between script tags.

wrong:

<script type="text/javascript">
   $(document).ready(function() { 
       alert($('div').html());
   });
</script>

correct:

<script type="text/javascript">
       alert($('div').html());
</script>

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.

You can load javascript file dynamically with help of jQuery.getScript and set a callback function. When the script has been loaded the callback function called. Here's an example of loading highlightjs library from cdnjs:

$.getScript("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js", function () {
    $('pre code').each(function(i, block) {
        // hljs now is available
        hljs.highlightBlock(block);
    });
});

You need to explicitly call ahover on the unordered list. See the documentaton.