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不工作

回答

相关问题