CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Holly Michelle
Holly Michelle

Reputation: 93

How to use Ajax to populate externally loaded div (jQuery)

I am creating tests for a page and HAVE to use jQuery to change elements on the control version of the page for each different experience.

I'm using jquery to load an element from an external page and replace a div. However, on the external page, it uses an ajax call to an api to populate the div, so I copied over the function with the ajax call.

I think it is attempting to make the ajax call before the new div is actually loaded on the page.

I've tried moving the function, wrapping the load function within the ajax call, but it still doesnt work.

I could be missing something obvious, but here's that part of my code:

$('.replace-div').load('external.html #replace-div');

function waitForLoad() {
    if ($('#replace-div')) {  
        var object;
        $.ajax({
          url: "https://api.com",
          async: false,
          success: function(result) {
            object = result;
            var variable1 = object["blah"][0].value,
            var variable2 = object["blah"][0].value,
            var variable3 = object["blah"][0].value,
            var variable4 = object["blah"][0].value,

            $('newElement').attr('href', variable1);
            $('newElement2').attr('src', variable2);
            $('newElement3').attr('href', variable3);
            $('newElement4').text("text" + variable4 + "more text");
          }
        }); 
    } else {
      setTimeout(waitForLoad, 15);
    }
}

waitForLoad();

I don't get any errors in the console, and when I paste the above waitForLoad function into the console, it populates totally fine. obviously this is after the page loads the new div, so i just need to know how to make the ajax call wait for the load.

I've tried .ajaxComplete(), but it doesnt help. $(function() {}); also does not work

Upvotes: 1

Views: 80

Answers (2)

Saša Tomislav Mataić
Saša Tomislav Mataić

Reputation: 1636

So, what happens is that, once waitForLoad is called for the first time, it doesn't see the div loaded, the code goes to the else block and executes again with a 15ms timeout. 15ms is not enough for the div to load, most likely.

You can try three things (ordered from worse to better):

  1. Try increasing the timeout to a bigger number. Start with 1000 (1000ms - 1 second) and see if it works or you need to increase it. It's more likely you'll have to decrease it

  2. Try using setInterval instead of setTimeout, which will repeat itself. Of course, once it loads, you'll need to clear the interval so it stops. Also, better use bigger timeouts/intervals, like 50 or 100ms b/c the fast firing timers can slow down a page a lot

E.g.

$('.replace-div').load('external.html #replace-div');

function waitForLoad() {
    if ($('#replace-div')) {  
        clearInterval(window.waiter);
        ...
    } else {
      window.timer = setInterval(waitForLoad, 50);
    }
}

waitForLoad();
  1. Same as 2, but using more idiomatic callback function after load call.

 // the window.waiter is the interval handle, and it will run every 100ms. It calls .load every time, and if the #replace-div is found, unsets the interval handle.

 window.waiter = setInterval(function() {
      $(".replace-div").load("external.html #replace-div", function() {
        if ($(".replace-div #replace-div").length) {
          // found the DIV
          // code...
          clearInterval(window.waiter); // bye interval handle, thanks
        }
      });
    }, 100);

Upvotes: 1

Barmar
Barmar

Reputation: 780688

.load() has a callback argument where you supply a function to run after the data is loaded.

$('replace-div').load('external.html #replace-div', function() {
    $.ajax(...);
});

Upvotes: 3

Related Questions