如何使用Ajax來填充外部加載的div（jQuery）

我正在爲頁面創建測試，並且有必要使用jQuery來更改頁面的控制版本上的元素，以獲得每種不同的體驗。如何使用Ajax來填充外部加載的div（jQuery）

我正在使用jquery從外部頁面加載一個元素並替換一個div。但是，在外部頁面上，它使用ajax調用api來填充div，所以我使用ajax調用複製了該函數。

我認爲它試圖在新div實際加載到頁面之前進行ajax調用。

我試着移動函數，在ajax調用中包裝加載函數，但它仍然不起作用。

我可能會錯過一些東西很明顯，但這裏是我的代碼部分：

$('.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();

我沒有得到任何錯誤，在控制檯中，當我粘貼上述waitForLoad功能到控制檯，它填充完好。顯然這是在頁面加載新的div後，所以我只需要知道如何使ajax調用等待負載。

我試過.ajaxComplete（），但它沒有幫助。 $（function（）{}）;也不起作用

來源

2017-09-20 Holly Michelle

有一個回調參數，其中您提供了一個函數以在數據加載後運行。

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

來源

2017-09-20 22:23:13 Barmar

這個工作！幾小時的谷歌搜索以某種方式沒有給我任何接近這個答案，但我知道這是明顯的東西！ –

@HollyMichelle假設任何異步操作都需要一個回調參數或返回一個promise（在jQuery中，他們通常都會這樣做）。這是以理智的方式處理異步的唯一方法。 – Barmar

那麼，什麼情況是，一旦waitForLoad被稱爲首次，它並沒有看到DIV加載，代碼轉到else塊，並用15毫秒的超時再次執行。最有可能的是，15ms對於div加載是不夠的。

您可以嘗試三件事情（從糟糕下令越好）：

嘗試增加超時一個更大的數字。從1000（1000ms - 1秒）開始，看看它是否有效，或者你需要增加它。這很可能你必須減少它
嘗試使用setInterval而不是setTimeout，這將重演自己。當然，一旦加載，您需要清除間隔，以便停止。此外，更好地使用更大的超時/間隔，例如50或100ms b/c，快速點火定時器可以大大減慢頁面的速度

例如，

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

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

waitForLoad();

同2，但經過load呼叫使用更慣用的回調函數。

// 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);

來源

2017-09-20 22:51:26

如何使用Ajax來填充外部加載的div（jQuery）

回答

相關問題