ajax調用後getElementById不工作

我正在開發一個使用javascript/ajax的Web應用程序。ajax調用後getElementById不工作

問題是，在我的應用程序（一種社交網絡）中，我需要閱讀有關用戶的信息（數據庫中的帖子）。爲此，我使用一個PHP專用服務來處理與數據庫的交互。該服務返回格式爲主頁面的HTML。

現在，我通過AJAX調用使用此服務來將HTML插入到我的頁面中。問題是，當我嘗試使用JavaScript從HTML注入獲取元素：

document.getElementById('commentsArea_xxx').innerHTML=xmlhttp.responseText;

getElementById回報null。

我認爲問題是，AJAX調用後瀏覽器不更新文檔，所以'commentsArea_xxx'不存在於文檔中！

我該如何解決這個問題？

這是我的代碼：

function moreComments(id){ 
     var footerIcon = document.getElementById('footer'); 
      footerIcon.innerHTML="<div style='text-align:center;'><img src='images/home_selected.png' onClick='loadHome()'/><img id='cameraButton' src='images/camera.png'/><img src='images/list.png' onClick='loadMyVideo()'/></div>"; 
      pageOld=pageCurrent; 
      pageCurrent=0; 
      document.getElementById("ajaxContent").innerHTML="<div id='wrapper' style='top:95px;'><div id='scroller'><ul id='thelist'><li style='text-align:center;'><img src='images/loading.gif' style='text-align:center;'></li></ul></div></div>"; 
      var xmlhttp; 
      if (window.XMLHttpRequest){ 
       xmlhttp=new XMLHttpRequest(); 
      } 
      else{ 
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
      } 
      xmlhttp.onreadystatechange=function(){ 
       if (xmlhttp.readyState==4 && xmlhttp.status==200){ 
        document.getElementById("commentsArea_"+id).innerHTML=xmlhttp.responseText; 
        loaded(); 
        me(); 
        setTimeout(function() {myScroll.refresh();}, 0); 
       } 
      } 
      xmlhttp.open("GET","home_more.php?id="+id,true); 
      xmlhttp.send(); 
    }

來源

2012-11-24 Alessio Melani

我認爲問題是，經過Ajax調用不更新文件等「commentsArea_xxx」不存在的文件！

沒錯。所有的Ajax調用都會將數據帶到您的代碼中，位於xmlhttp.responseText屬性中。您可以將其添加到文檔中。你可以通過設置現有元素的innerHTML，或通過document.createElement創建元素，並通過Element#appendChild/Element#insertBefore /等

查看各種DOM specs的詳細信息並將這些信息附加到文檔中。 HTML5規範在這方面也有some information。

FWIW，有實用功能和瀏覽器的差異平滑提供一個好的圖書館像jQuery，YUI，Closure，或any of several others一個很多。利用人們對這些庫的努力工作，您可以專注於爲特定增值編寫代碼。

來源

2012-11-24 09:00:11

這應做到：

$('body').ajaxComplete(function() { 
     document.getElementById('commentsArea_xxx').innerHTML=xmlhttp.responseText; 
});

這將每一個Ajax調用後執行。

更新： 如果您還沒有將元素添加到DOM，請通過@ T.J Crowder的答案。

來源

2012-11-24 09:39:01 Monodeep

感謝它的所有作品！ –

@AlessioMelani你應該接受一個答案，如果它對你有幫助。和平！！ – Monodeep

問題是因爲你的狀態：... ajax調用不會更新文檔...更確切地說，在通過AJAX檢索php文件的調用之後發生的javascript發生在DOM有機會刷新之前。但是，setTimeout（）的行爲很好，因爲它給了DOM一點時間來刷新，然後你可以將任何結尾的javascript代碼放入setTimeout函數中。至少它可以與IE 11，FF 28，Chrome 33和Opera 11一起工作。延遲九毫秒對我來說很有用。所以，我建議你把一個遵循的setTimeout（）函數中的AJAX調用任何JavaScript：

setTimeout(function(){ 
// Your Code here 
    var aVariable = document.getElementById("idRenderedFromAJAX"); 
}, 9);

的另一件事是讓xmlhttp.responseText其價值迴歸已經連接到DOM前一個javascript變量進行AJAX調用。然後，通過調用呈現的任何HTML都可以通過使用setTimeout函數中放置的代碼中的getElementById的刷新DOM來訪問。只是一個建議，因爲這個替代方案不需要jQuery，並且似乎並沒有在網絡上浮動。

來源

2014-05-12 00:36:27

ajax調用後getElementById不工作

回答

相關問題