title: AJAX to dynamically reload webpage
body: <p>I have a <em>ajax query</em> which keeps reloading a div of the page <em>in every 6 seconds</em>.<br/>There is a <strong>action button</strong> in that reloading div which opens a <strong>modal</strong>.<br/><strong>The problem is</strong> whenever page reloads the modal also refreshes. And i have to send some information through that modal but i am not able to fill up the modal as the <em>page keeps refreshing every 6 seconds</em><br/>I couldn't find a solution for that. <br/>The files are as shown below. file1.php calls file2.php which has a table with dynamic values(i have made them static just for SO.)<br/><strong>P.S.:</strong> I am also looking to implement a notification system but can't figure out a way to do that. If anyone could help.<br/><strong>EDIT</strong><br/>I want the <em>div</em> to reload every 6 seconds but not the modal<br/><br/>
  <strong>file1.php</strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
  
  &lt;head&gt;
     &lt;title&gt;AJAX Example&lt;/title&gt;
     &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
     &lt;script type="text/javascript" src="reloader.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body onload="reloadData()"&gt;
  &lt;p&gt; HELLO There!&lt;/p&gt;
     &lt;div id="currentData" align="center"&gt;
        &lt;p&gt;Loading Data...&lt;/p&gt;
     &lt;/div&gt;
  &lt;/body&gt;
  &lt;script&gt;
  // Get the modal
  var modal = document.getElementById('myModal');
  
  // Get the button that opens the modal
  var btn = document.getElementById("myBtn");
  
  // Get the &lt;span&gt; element that closes the modal
  var span = document.getElementsByClassName("close")[0];
  
  // When the user clicks the button, open the modal 
  btn.onclick = function() {
      modal.style.display = "block";
  }
  
  // When the user clicks on &lt;span&gt; (x), close the modal
  span.onclick = function() {
      modal.style.display = "none";
  }
  
  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
      if (event.target == modal) {
          modal.style.display = "none";
      }
  }
  &lt;/script&gt;
  &lt;script&gt;
  var req;
  
  function reloadData()
  {
     var now = new Date();
     url = 'SO.php?' + now.getTime();
  
     try {
        req = new XMLHttpRequest();
     } catch (e) {
        try {
           req = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
           try {
              req = new ActiveXObject("Microsoft.XMLHTTP");
           } catch (oc) {
              alert("No AJAX Support");
              return;
           }
        }
     }
  
     req.onreadystatechange = processReqChange;
     req.open("GET", url, true);
     req.send(null);
  }
  
  function processReqChange()
  {
     // If req shows "complete"
     if (req.readyState == 4)
     {
        dataDiv = document.getElementById('currentData');
  
        // If "OK"
        if (req.status == 200)
        {
           // Set current data text
           dataDiv.innerHTML = req.responseText;
  
           // Start new timer (1 min)
           timeoutID = setTimeout('reloadData()', 6000);
        }
        else
        {
           // Flag error
           dataDiv.innerHTML = '&lt;p&gt;There was a problem retrieving data: ' + req.statusText + '&lt;/p&gt;';
        }
     }
  }
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>SO.php</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  table {
      width: 100%;
      border-collapse: collapse;
  }
  
  table, td, th {
      border: 1px solid black;
      padding: 5px;
  }
  
  th {text-align: left;}
  
  /* The Modal (background) */
  .modal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      padding-top: 100px; /* Location of the box */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content */
  .modal-content {
      background-color: #fefefe;
      margin: auto;
      padding: 20px;
      border: 1px solid #888;
      width: 80%;
  }
  
  /* The Close Button */
  .close {
      color: #aaaaaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;table&gt;
  &lt;tr&gt;
  &lt;th&gt;Firstname&lt;/th&gt;
  &lt;th&gt;Mobile&lt;/th&gt;
  &lt;th&gt;Email&lt;/th&gt;
  &lt;th&gt;Hometown&lt;/th&gt;
  &lt;th&gt;Action&lt;/th&gt;
  &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td&gt;Irshad&lt;/td&gt;
      &lt;td&gt;9876543210&lt;/td&gt;
      &lt;td&gt;abc@example.com&lt;/td&gt;
      &lt;td&gt;Earth&lt;/td&gt;
      &lt;td&gt;&lt;button id="myBtn" data-toggle="modal" data-target=".modal"&gt;Action&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;!-- The Modal --&gt;
  &lt;div id="myModal" class="modal"&gt;
  
    &lt;!-- Modal content --&gt;
    &lt;div class="modal-content"&gt;
      &lt;span class="close"&gt;×&lt;/span&gt;
      &lt;p&gt;Some text in the Modal..&lt;/p&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;script&gt;
  // Get the modal
  var modal = document.getElementById('myModal');
  
  // Get the button that opens the modal
  var btn = document.getElementById("myBtn");
  
  // Get the &lt;span&gt; element that closes the modal
  var span = document.getElementsByClassName("close")[0];
  
  // When the user clicks the button, open the modal 
  btn.onclick = function() {
      modal.style.display = "block";
  }
  
  // When the user clicks on &lt;span&gt; (x), close the modal
  span.onclick = function() {
      modal.style.display = "none";
  }
  
  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
      if (event.target == modal) {
          modal.style.display = "none";
      }
  }
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>