JavaScript / JQuery Auto刷新特定的Div

时间:2013-05-23 13:58:32

标签: javascript jquery html refresh

目前,我的当前页面是一个页面,它根据基本服务状态页面的内容将XML文件加载到浏览器。我试图让特定的div自动刷新,但是失败了 - 我不是JS的专家所以任何指导都会非常感激

        <script type="text/javascript">               
      if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp = new XMLHttpRequest();
      }
      else {// code for IE6, IE5
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.open("GET", "\\tech-desk04\Service Site\servicereport.xml", false);
      xmlhttp.send();
      xmlDoc = xmlhttp.responseXML;

      if (xmlDoc) {
          var x = xmlDoc.getElementsByTagName("ISSUE");
          for (i = 0; i < x.length; i++) {
              document.write("<div class='box_lrg'><div class='box_top'></div><div class='box_middle'><table border='0'>");
              document.write("<tr><td class='title'><h2>");
              document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
              document.write("</h2></td><td class='issueid'><strong>IssueID: </strong><br />");
              document.write(x[i].getElementsByTagName("ISSUEID")[0].childNodes[0].nodeValue);
              document.write("</td><td class='status'><strong>Status: </strong><br />");
              document.write(x[i].getElementsByTagName("STATUSID")[0].childNodes[0].nodeValue);
              document.write("</td></tr>");
              document.write("<tr><td colspan=3 class='description'>");
              document.write(x[i].getElementsByTagName("TICKETDESCRIPTION")[0].childNodes[0].nodeValue);
              document.write("</td></tr>");
              document.write("<tr><td></td><td class='updated'><strong>Last Updated: </strong><br />");
              document.write(x[i].getElementsByTagName("UPDATEDON")[0].childNodes[0].nodeValue);
              document.write("</td><td class='author'><strong>Author: </strong><br />");
              document.write(x[i].getElementsByTagName("AUTHOR")[0].childNodes[0].nodeValue);
              document.write("</td></tr>");
              document.write("</table>");
              document.write("</div><div class='box_bottom''></div></div>");
          }
      }
      else {
          document.write("<h3><span class='blue'>There are no issues at the moment.</span></h3>");
      }

这是一些显示XML文档的javascript - 我希望这个div能够自行刷新,我目前正在使用:

                <script type="text/javascript">
      var auto_refresh = setInterval(
        function ()
            {
                $('#refresh').load('Service.html #refresh').fadeIn();
            }, 2000); // refresh every 2000 milliseconds
            </script>

我遇到的问题是页面最初工作,但在2000毫秒之后整个div就会消失而不是重新加载。这是因为内容是在Javascript中创建的还是我在做些傻事?

我是JS / JQuery的新手 - 我引用了最新的JQuery。但我很难过为什么会删除div。

让我知道任何想法。

4 个答案:

答案 0 :(得分:1)

只需从Service.html旁边的脚本中删除额外的#refresh即可 - 这就是它的样子。我测试了它,它正在工作......这是唯一的问题。

var auto_refresh = setInterval(
    function () {
        $('#refresh').load('Service.html').fadeIn();
        }, 2000
);

答案 1 :(得分:0)

fadeIn是一个函数,你忘了把():

$('#refresh').load('Service.html #refresh').fadeIn();

答案 2 :(得分:0)

使用.fadeIn()代替.fadeIn

答案 3 :(得分:0)

我不知道这是否会影响你的div,但可能是fadeIn函数需要两个括号。比如$('#refresh').load('Service.html #refresh').fadeIn();