How to dynamically include a html file containing javascript

Question

in my website i have a simple navigation bar where clicking on the different items causes the main content to change. Technically, all is done in a single file "main.html", which contains everything and i use the jquery function "load" to dynamically load other html files to place it inside the main.html. This works just fine as long as there is no javascript in these html files i embedded. But there is one file i want to embedd, which has also javascript code in it, which should get executed on $(document).ready. But this never happens - there is no error in the javascript, it just never gets executed. I suppose it's because i only change the DOM of the "main.html" and then there will be no "onReady" event fired. Can someone give me some idea of what would be the best way to get the desired behaviour? Placing the javascript in the "main.html" would cause things to work, but this is no option for me.

Thanks in advance!

update: problem solved Problem is solved. When i call the javascript outside the onReady() event (as Loic Coenen suggested), it works just as excpected. I also removed the tags wrapped around. Many thanks to all who helped me!

What kind of Javascript is it? Could you post the code your including (or at least the JavaScript section that isn't being executed)? Note that the $(document).ready event only fires when your main.html is initially ready, not when content is dynamically loaded. — asontu
– asontu, Commented Sep 1, 2013 at 9:54

Loic Coenen · Accepted Answer · 2013-09-01 10:10:18Z

1

You can trigger a custom event to notify your other.html script that the tree is loaded. I haven't tried it, but I would use something like that :

In main.html:

$('#div_to_load').load('other.html',{},function(){
    $('#div_to_load').trigger('loaded')
})

In other.html

$('#div_to_load').on('loaded', function(){
     // Code to execute  
})

I don't know if that could do the trick.

Edit : I asume that the javascript directly included in your other.html is executed anyway.

answered Sep 1, 2013 at 10:10

Loic Coenen

8933 gold badges10 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

fred madison Over a year ago

Your assumption was right. When i call the javascript outside the onReady() event, it works just as excpected. I also removed the <html></html> tags wrapped around. Many thanks to all who helped me!

Loic Coenen Over a year ago

Oh, and make sure the script to execute is placed at the end of your other.html file, to be certain that the elements exists in your DOM when you need it.

fred madison Over a year ago

Done :) Thanks for the advise, i indeed had the script on the top and was wondering why some things were still wired, but after chaning it all is working fine :)

WeTheBrains · Accepted Answer · 2013-09-01 09:56:20Z

you are in main.html that contains a head, body. the problem might be that when you load the page your other page also has a head, and body and so on, if you are loading onto a div, it should be only code, can be javascript aswell, but no head or body. but if you resist, here is your solution

$("#loadnewpagebttn").load(location.href+" foobar ",function(){
    $.getScript("js/yourscript.js"); 
});

you need to create a script file for that page and load it. inline scripts are some what of a bad habit anyways

full example:

jQuery.getScript( url, [ success(data, textStatus) ] )
url - A string containing the URL to which the request is sent.

success(data, textStatus) - A callback function that is executed if the request succeeds.

$.getScript('ajax/test.js', function() {
  alert('Load was performed.');
});

http://api.jquery.com/jQuery.getScript/

Collectives™ on Stack Overflow

How to dynamically include a html file containing javascript

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related