1
動的にデータを作成するAjaxを使用するフォームのWebページがありますが、ユーザーがページをリフレッシュするとそのページは消えますが、ドロップダウン・メニューには選択されています。とにかく、動的に生成されたデータを保持するか、Ajax呼び出しを再送信するか？ページ・リフレッシュ後の自動Ajax呼び出し
の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 & 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">Math</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();
}