Home/ Questions/Q 8253889
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T01:01:52+00:00

I am trying to load a chunk of html into my div and I

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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!

    • 0