JavaScript/JQuery Auto Refresh a specific Div

Question

At the moment my current page is a page that loads an XML file to a browser based on its contents for a basic service status page. I am trying to get the specific div to refresh automatically, but am failing - I am no expert in JS so any guidance would be greatly appreciated

        <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>");
      }

this is some javascript to display an XML document - I want this div to refresh on its own, I am currently using:

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

The issue I am having is that the page works initially, but after the 2000 milliseconds the whole div just disappears instead of being reloaded. Is this because the content is created in the Javascript or am I doing something silly?

I am new to JS/JQuery - I have the latest JQuery referenced. But am stumped as to why this deletes the div.

Let me know any ideas.

Answer 1

Simply remove the extra #refresh from your script next to Service.html - This is how it will look like. I tested it, it's working... That was the only problem.

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

Answer 2

fadeIn是一个函数，您忘了放（）了：

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

Answer 3

使用.fadeIn()代替.fadeIn

Answer 4

I don't know if this affects your div, but it could be the fadeIn function needs two brackets. like $('#refresh').load('Service.html #refresh').fadeIn(); .