CODEWITHSUNDEEP
javascriptphphtmlajax
christostsang
christostsang

Reputation: 1841

Load Javascript after AJAX-fetched HTML is fully loaded

I have a situation where the HTML part is loaded with AJAX into a DIV with ID="dynamic content" using main.js script. This script is situated inside the HEAD part of main.php and it goes like this:

$.ajax({
            url: 'content.php',
            success: function(output){

                $('#dynamic-content').html(output);
            }       
    });

The Javascript file responsible for controlling that content is situated in another JS file named secondary.js. This file is placed just before the closing of BODY again inside main.php.

main.php Document Structure:

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

  <body>
    ....
    <div id="dynamic-content"></div>
    ....
    ....
    <script type="text/javascript" src="js/secondary.js"></script> 
   </body>
</html>

Sometimes the content of content.php is too large, and secondary.js file loads before the content is fully loaded. Hence some elements are not targeted and i have problems.

Is there a way for me to delay for 1-2 seconds the execution of secondary.js, just to make sure that the content is fully loaded?

ps: all above files are hosted on the same server

Thanks in advance.

Upvotes: 0

Views: 3467

Answers (4)

Chirag Prajapati
Chirag Prajapati

Reputation: 529

You have to add script after ajax call.

   $.ajax({
            url: 'url of ajax',
            type: "POST",
            data: data,
            dataType: "html",
            success: function (data) {
                $('#instructions').html('<div>' + data + '</div>');
                $.getScript("js/html5lightbox/html5lightbox.js", function() {
                    $('body').find('.html5lightbox').html5lightbox();
                });
            }

        });

Upvotes: 0

jcuenod
jcuenod

Reputation: 58375

The best way to do this would actually be to hand a callback to the function that does your ajax call. I probably wouldn't put this in html but it demonstrates the method:

<html>
  <head>
    <script type="text/javascript" src="js/main.js"></script>
    <script lang="javascript>
      function doWhenLoaded(someCallback)
      {
        $.ajax({
          url: 'content.php',
          success: function(output){
            $('#dynamic-content').html(output);
            someCallback();
          }       
        });
      }

      $(document).ready(function(){
        doWhenLoaded(function(){
          $.getScript('js/secondary.js');
        });
      })

    </script>
  </head>
  ...
</html>

Instead of using $.getScript you could also load in secondary.js with main.js and wrap it in a function call (i.e. doStuff = function() { /* your code here */ }). Then you could call doWhenLoaded(doStuff) in $(document).ready.

Upvotes: 0

Philipp Nowinski
Philipp Nowinski

Reputation: 114

What you're trying to achieve is async behaviour. Whatever secondary.js does, put it inside a function and call it inside the ajax callback. If you do so, you won't even need two JavaScript files.

Don't try to manage this by timeouts or loading order. This will not be failsafe. You cannot know the exact time the browser needs to load your content. For example, what if you are on very slow internet connection? Don't try to predict those things, that's what the callback is for :-)

Your code could look sth like this:

function doSthWithLoadedContent() {
    // whatever secondary.js tries to do
}

$.ajax({
        url: 'content.php',
        success: function(output){
            $('#dynamic-content').html(output);
            doSthWithLoadedContent();
        }       
});

Upvotes: 1

Samuel Cook
Samuel Cook

Reputation: 16828

You could possibly load the script using $.getScript once the output has been applied to the html tag:

$.ajax({
    url: 'content.php',
    success: function(output){
        $('#dynamic-content').html(output);
        $.getScript('js/secondary.js');
    }       
});

https://api.jquery.com/jquery.getscript/

Upvotes: 0

Related Questions