Jeffrey Tackett Jeffrey Tackett - 1 year ago 64
Perl Question

How to reset <div> back to pre-AJAX response state, after search field is cleared?

I have an HTML page that lists "all" data from a database. I have included a search field that allows the user to search for a specific "line", via a Perl/AJAX process. It works wonderfully. The user inputs information, and the div that holds the original list is overwritten with the results of the AJAX request. As long as they keep changing the information in the search field, the AJAX process continues to fire, and everything works well. The problem comes in when they try to return to the original "all" list by clearing everything from the search field, rather than simply reloading the page. This led me to wonder if it's possible to force a div to revert to it's original state (before it was overwritten by the AJAX response)?

I'll include some code snippets below, but I'm sure it's not anything particularly original.


function myTimer() {

var typingTimer;
var doneTypingInterval = 2000;

if ($('#devicename').val()) {
typingTimer = setTimeout(updateText, doneTypingInterval);


function updateText() {

var devname = $('#devicename').val();
$.get("http://domainname/cgi-bin/", "devicename="+devname,
function(response,status,http) {

}, "text");



<div id="resultsbox">
<table class="devicetable">
<td class="tablehead">Company Name</td>
<td class="tablehead">ID</td>
<td class="tablehead">Status</td>
<td class="tablehead">Ticket</td>
<td class="tablehead">Device/Ticket Notes</td>
<td class="tablehead">Open SR</td>
<tr> lots of stuff </tr>


sub generate_results {
#DBI stuff, result is formatted and loaded into $result
print $html->header('text/html;charset=UTF-8');
print $result;

Thank you for an information you can provide. I'm happy to read on the subject, just not finding anything pertaining to something like this. Everything I find seems to blank the div, reset a form, or write the next set of results. Nothing seems to want to go back to the original state. Before anyone wonders, the reason I don't simply provide a standard search results scenario, instead choosing to pare down from the entire list, is because the database information displays a status that may change from time to time, and the list in it's entirety is used as a type of operational awareness. That's why I want to go from full list to only results back to full list.

Answer Source

Store the div inner html somewhere safe and then restore it.

With plain javascript:

// store original html
var originalHtml = div.innerHTML;

// restore it
div.innerHTML = originalHtml;

or with jquery like you use it:

// store original html
var originalHtml = $('#resultsbox').html();

// restore it
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download