Loading html string into div with jquery

Question

I am trying to load a chunk of html into my div and I am running into some issues with the javascript inside the html string only loading up about 50% of the time.

I am aware that I can use jQuery's: $(div).html(htmlString); to load the html into the necessary div. The html causing the issue is done in a document ready block and I am curious if when using the .html(..) if the document ready code is executed because the page as a whole is ready while the loaded html inside of the (primarily the jquery-ui js) may not be??

<html>
   <head>
     <script src="..../jquery-ui.min.js"></script>
     <script type="text/javascript"> $(function() {  $("#tabs").tabs(); }); </script>
   </head>
   <body>
      <div>......</div>
   </body>
</html>

I have tried to apply a timeout in the added html to try and add time for the jquery-ui script to load:

$(function(){  setTimeout(function(){ $("#tabs").tabs(); }, 300); });

but this is still not 100% reliable since the time required to load the necessary javascript can vary. Is there a way to ensure the loaded html's document ready state has waited until the jquery ui script has loaded?

Where is the code for when the HTML is loaded? Worst case scenario, you can move the `script` into the body, right before the `
` closing tag. Also, if the elements are loaded into the DOM with `$(document).ready(function(){`, then the `$('#tabs').tabs();` would have to come `*after* the HTML injection* — Ohgodwhy, Jul 16 '12 at 15:52
@Ohgodwhy the html is loaded simply with $(div).html(contents); sorry for leaving that out. and I have also tried moving the — Matt, Jul 16 '12 at 16:08

Jamie Hutber · Answer 1 · 2012-07-16T16:16:27.797

2

you should always put your script and js files at the end of the body. The reason being anything put in the head has to be completed before the body is loaded, so it is generally a bad idea to put javascript in there. Better be safe and add this at the bottom.

Also delay won't improve your chances here.

<html>
  <head>
     <title>hey you</title>
  </head>
  <body>
    <div>......</div>
   <script src="..../jquery-ui.min.js"></script>
   <script type="text/javascript">
       $(function(){  
            $("#tabs").tabs(); 
       }); 
   </script>
  </body>
</html>

edited Jul 16 '12 at 16:16

answered Jul 16 '12 at 16:02

Jamie Hutber

26,790
46
179
291

No, this is wrong. All scripts should go in the head section. – Lee Taylor Jul 16 '12 at 16:05
1

using `$(document).ready(function() { });` negates the need to put the script at the end of the `body` tag - it can be within the `head` – Manse Jul 16 '12 at 16:05
1

updated, cheers manseUK. @LeeTaylor care to elaborate? As i'd disagree with you as well. – Jamie Hutber Jul 16 '12 at 16:17
1

@LeeTaylor this is incorrect. Scripts DO NOT need to go into the header. They are put into the header out of tradition. Javascript will be executed where ever it is found during parsing, whether it be in the head or not. If you look at the Twitter Bootstrap examples, you'll see they include their javascript at the end of the page. This negates the need for $().ready as once the parser gets to those scripts, the DOM is already ready. There are also performance gains to doing it this way. See this SO question: http://stackoverflow.com/questions/1213281/does-javascript-have-to-be-in-the-head-tags – Jason L. Jul 16 '12 at 16:40
Yes, this is just my old-schoolness coming through. I have read up on this and I realise that this isn't the case any more (the placement of scripts). However, use of onLoad() or $(document).ready should be used to guarantee that the DOM is ready to be manipulated. – Lee Taylor Jul 16 '12 at 16:43
@LeeTaylor It *is* guaranteed that the DOM is ready to be manipulated, it **was loaded before**. `onload` is waiting for the assets to be loaded, so it's something else. – Florian Margaine Jul 16 '12 at 17:53

score 0 · Accepted Answer · edited May 23 '17 at 12:20

Found out the issue, John Doe's post in this question helped to get to the answer - JavaScript Load Order.

jquery-ui.min.js was loading after the insite scripts no matter where they were at on the page (in the head or right before the </body> tag). What I ended up doing is applying a check for the jquery ui using $.ui and adding the async attribute to the script tag

<script async src=".../jquery-ui.min.js"></script>

Once the jquery ui was loaded, I was able to proceed with the $("#tabs).tabs(); call.

thanks for the comments and posts!

Loading html string into div with jquery

2 Answers2