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

Answers


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


Need Your Help

R: matrix by vector multiplication

r matrix

I have following problem:

Clipboard in Google Chrome Frame

javascript google-chrome clipboard frame

I am deweloping page for IE with Google Chrome Frame. The are any way to copy text to clipboard(without Flash or SL) using this javascript engine or force IE to use orginal engine for some code blo...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.