title: Automatic Ajax call after page refresh
body: <p>I have a web page with form that uses Ajax which dynamically creates data underneath but when the user refreshes the page it disappears but the dropdown menu still has its selection. Is there anyway to either keep the dynamically generated data or to resubmit the Ajax call?</p>
  
  <p>index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
      &lt;meta http-equiv="content-language" content="zh-HK" /&gt;
      &lt;script type="text/javascript" src="includes/js/paginator.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="includes/js/scripts.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="includes/css/styles.css"&gt;&lt;/link&gt;
      &lt;title&gt;Course Search&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="show_course"&gt;
          &lt;table id="search"&gt;
              &lt;tr&gt;
                  &lt;th class="reset"&gt;
                      &lt;label&gt;&lt;a href="#" name="session" onclick="showCourse(this.value, 'destroy');document.getElementById('show_course').reset();"&gt;&lt;img src="images/reset.gif" alt=""/&gt;&lt;/a&gt;&lt;/label&gt;
                  &lt;/th&gt;
                  &lt;th class="subject"&gt;
                      &lt;select name="subject" onchange="showCourse(this.value, 'Subject');disableEnableForm(document.getElementById('show_course'), false);"&gt;
                          &lt;option selected="selected" value=""&gt;&lt;/option&gt;
                          &lt;option value="Math"&gt;Math&lt;/option&gt;
                          &lt;option value="Math%20-%20M2"&gt;Math - M2&lt;/option&gt;
                          &lt;option value="Maths%20%26%20Statistics (A)"&gt;Maths &amp;amp; Statistics (A)&lt;/option&gt;
                          &lt;option value="Math Core"&gt;Math Core&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/th&gt;
                  &lt;th class="tutor"&gt;
                      &lt;select name="tutor" onchange="showCourse(this.value, 'Tutor');disableEnableForm(document.getElementById('show_course'), false);"&gt;
                          &lt;option selected="selected" value=""&gt;&lt;/option&gt;
                          &lt;option value="Math"&gt;Math&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/th&gt;
                  &lt;th class="level"&gt;
                      &lt;select name="level" onchange="showCourse(this.value, 'Level');disableEnableForm(document.getElementById('show_course'), false);"&gt;
                          &lt;option selected="selected" value=""&gt;&lt;/option&gt;
                          &lt;option value="P1"&gt;P1 - Primary 1&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/th&gt;
                  &lt;th class="type"&gt;
                      &lt;select name="type" onchange="showCourse(this.value, 'Type');disableEnableForm(document.getElementById('show_course'), false);"&gt;
                          &lt;option selected="selected" value=""&gt;&lt;/option&gt;
                          &lt;option value="Regular"&gt;Regular&lt;/option&gt;
                          &lt;option value="Intensive"&gt;Intensive&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/th&gt;
                  &lt;th class="centre"&gt;
                      &lt;select name="centre" onchange="showCourse(this.value, 'Centre');disableEnableForm(document.getElementById('show_course'), false);"&gt;
                          &lt;option selected="selected" value=""&gt;&lt;/option&gt;
                          &lt;option value="1"&gt;紅磡 - Hung Hom&lt;/option&gt;        
                      &lt;/select&gt;
                  &lt;/th&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/form&gt;
      &lt;div id="dynamic_display"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>scripts.js:</p>
  
  <pre><code>function openTimetable()
  {
      timetableWindow=window.open('timetable.php','timetable','status=no,left='+(screen.availWidth/2-200)+',top='+(screen.availHeight/2-200)+',height=400,width=400,scrollbars=yes');
      timetableWindow.focus()
  }
  
  function disableEnableForm(form, boolean)
  {
      var formElements = form.elements;
  
      for (i = 0; i &lt; form.length; i ++) {
          formElements[i].disabled = boolean;
      }
  }
  
  function showCourse(search, key)
  {
      if (search == "") {
          document.getElementById("dynamic_display").innerHTML = "";
          return;
      }
  
      if (window.XMLHttpRequest) {
          xmlhttp = new XMLHttpRequest();
      } else {
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
  
      xmlhttp.onreadystatechange = function()
      {
          if (xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200) {
              document.getElementById("dynamic_display").innerHTML = xmlhttp.responseText;
              pager = new Pager('results', 15);
              pager.init(); 
              pager.showPageNav('pager', 'pager_display'); 
              pager.showPage(1);
          }
      }
  
      xmlhttp.open("GET", "search.php?key=" + key + "&amp;search=" + search, true);
      xmlhttp.send();
  }
  </code></pre>