Automatic Ajax call after page refresh_问答_开发者

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?

index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-language" content="zh-HK" />
    <script type="text/javascript" src="includes/js/paginator.js"></script>
    <script type="text/javascript" src="includes/js/scripts.js"></script>
    <link rel="stylesheet" href="includes/css/styles.css"></link>
    <title>Course Search</title>
</head>
<body>
    <form id="show_course">
        <table id="search">
            <tr>
                <th class="reset">
                    <label><a href="#" name="session" onclick="showCourse(this.value, 'destroy');document.getElementById('show_course').reset();"><img src="images/reset.gif" alt=""/></a></label>
                </th>
                <th class="subject">
                    <select name="subject" onchange="showCourse(this.value, 'Subject');disableEnableForm(document.getElementById('show_course'), false);">
                        <option selected="selected" value=""></option>
                        <option value="Math">Math</option>
                        <option value="Math%20-%20M2">Math - M2</option>
                        <option value="Maths%20%26%20Statistics (A)">Maths &amp; Statistics (A)</option>
                        <option value="Math Core">Math Core</option>
                    </select>
                </th>
                <th class="tutor">
                    <select name="tutor" onchange="showCourse(this.value, 'Tutor');disableEnableForm(document.getElementById('show_course'), false);">
                        <option selected="selected" value=""></option>
                        <option value="Math">Mat开发者_开发知识库h</option>
                    </select>
                </th>
                <th class="level">
                    <select name="level" onchange="showCourse(this.value, 'Level');disableEnableForm(document.getElementById('show_course'), false);">
                        <option selected="selected" value=""></option>
                        <option value="P1">P1 - Primary 1</option>
                    </select>
                </th>
                <th class="type">
                    <select name="type" onchange="showCourse(this.value, 'Type');disableEnableForm(document.getElementById('show_course'), false);">
                        <option selected="selected" value=""></option>
                        <option value="Regular">Regular</option>
                        <option value="Intensive">Intensive</option>
                    </select>
                </th>
                <th class="centre">
                    <select name="centre" onchange="showCourse(this.value, 'Centre');disableEnableForm(document.getElementById('show_course'), false);">
                        <option selected="selected" value=""></option>
                        <option value="1">紅磡 - Hung Hom</option>        
                    </select>
                </th>
            </tr>
        </table>
    </form>
    <div id="dynamic_display"></div>
</body>
</html>

scripts.js:

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 < 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 && 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 + "&search=" + search, true);
    xmlhttp.send();
}

Assuming only ONE of the selects will be changed at any given time, try this:

window.onload=function() {
  var selects = document.getElementsByTagname('select');
  for (var i=0;i<selects.length;i++) {
    if (selects[i].selectedIndex>0) { // something was selected
      selects[i].onchange();
      break;
    }
  }
}

I don't know how to keep data between page refreshes, but I think using event window.onload you can call any JavaScript function. Here is example link text

But keep in mind, that window.onload fires when whole page is loaded, so, if your page is large, consider window.onDomReady. Example