Refresh table when keypressed

[Memborg]

Hej Everybody

I have tried do make an "instant search" in javascript, ie everytime one
hits a key the javascript sends the request to a database and returns
the result into a table.

The problem is occuring when the result i given. When one do a search
the given result is appended to the existing rowx in the table instead
of redrawing the table.

Example:

Element1
Element2
Element3
Element4
Element5

Search = 5

new result:

Element1
Element2
Element3
Element4
Element5
Element5

The wanted result is:

Element5

How do I make this happen?

JAVASCRIPT FUNCTIONS:

//This function is called everytime a key i press down in the input field
function search(){
var search = document.getElementById("search").value;
process(search);
}

// call server asynchronously
function process(in_value)
{

var server = "phoneXML.php?search="+in_value;

// only continue if xmlHttp isn't void
if (xmlHttp)
{
// try to connect to the server
try
{
// remove this line if you don't like the 'Receiving...' message
display("Receiving new message from server...")
// make asynchronous HTTP request to retrieve new message
xmlHttp.open("GET", server, true);
xmlHttp.onreadystatechange = handleRequestStateChange;
xmlHttp.send(null);
}
catch(e)
{
displayError(e.toString());
}
}
}

//Parsing the xml file and puts the final result in "finalArray"
function handleServerResponse()
{
var contactArray = null;
var idArray = null;
var emailArray = null;
var phoneArray = null;
var firmaArray = null;

finalArray = Array();
// read the message from the server
var xmlResponse = xmlHttp.responseXML;

// catching potential errors with IE and Opera
if (!xmlResponse || !xmlResponse.documentElement)
throw("Invalid XML structure:\n" + xmlHttp.responseText);

// catching potential errors with Firefox
var rootNodeName = xmlResponse.documentElement.nodeName;

if (rootNodeName == "parsererror") throw("Invalid XML structure");
// obtain the XML's document element
xmlRoot = xmlResponse.documentElement;

contactArray = xmlRoot.getElementsByTagName("strContact");
idArray = xmlRoot.getElementsByTagName("idIntraContact");
emailArray = xmlRoot.getElementsByTagName("strEmail");
phoneArray = xmlRoot.getElementsByTagName("strPhone");
firmaArray = xmlRoot.getElementsByTagName("strFirma");

// generate HTML output
// iterate through the arrays and create an HTML structure
for (var i=0; i<idArray.length; i++){

finalArray[idArray.item(i).firstChild.data] = new Array();
finalArray[idArray.item(i).firstChild.data]["strContact"] =
contactArray.item(i).firstChild.data;
//Er der noget i den??
if(xmlRoot.getElementsByTagName("strEmail").firstChild)
finalArray[idArray.item(i).firstChild.data]["strEmail"] =
emailArray.item(i).firstChild.data;
else
finalArray[idArray.item(i).firstChild.data]["strEmail"] = "";

//Er der noget i den??
if(xmlRoot.getElementsByTagName("strPhone").firstChild)
finalArray[idArray.item(i).firstChild.data]["strPhone"] =
phoneArray.item(i).firstChild.data;
else
finalArray[idArray.item(i).firstChild.data]["strPhone"] = "";


finalArray[idArray.item(i).firstChild.data]["strFirma"] =
firmaArray.item(i).firstChild.data;
}

display();//This is the one who draws
}

function display()
{
//Find the table we want to append to
var selector =
document.getElementById("selector").getElementsByTagName("tbody")[0];

for(var i in finalArray){//Run through "finalArray"

var strPhone = finalArray["strPhone"]

row = document.createElement("tr");//New row

cell1 = document.createElement("td");//New cell
cell1.setAttribute("id", "product");//Cell attributes
cell1.innerHTML = finalArray["strFirma"];//Cell data

cell2 = document.createElement("td");
cell2.setAttribute("id", "product");
cell2.innerHTML = "<a id='cats'
href='contacts.php?action=show&id="+ i +"'>"+
finalArray["strContact"] +"</a>";

cell3 = document.createElement("td");
cell3.setAttribute("id", "product");
cell3.innerHTML = strPhone;

cell4 = document.createElement("td");
cell4.setAttribute("id", "product");
cell4.innerHTML = finalArray["strEmail"];

row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);
row.appendChild(cell4);
selector.appendChild(row);//Add the new row to the existing table
}
}

 

[Ian Collins]

Hej Everybody

I have tried do make an "instant search" in javascript, ie everytime one
hits a key the javascript sends the request to a database and returns
the result into a table.

The problem is occuring when the result i given. When one do a search
the given result is appended to the existing rowx in the table instead
of redrawing the table.

Isn't appending exactly what your display() method sets out to do?
Nowhere does it remove any table content. Find the row(s) you want to
remove and call removeChild on their parent node.

[snip]

function display()
{
//Find the table we want to append to
var selector =
document.getElementById("selector").getElementsByTagName("tbody")[0];

for(var i in finalArray){//Run through "finalArray"

var strPhone = finalArray["strPhone"]

row = document.createElement("tr");//New row

Why don't you use inserRow() (ditto for cells)?

 

[Memborg]

Ian Collins skrev:

Hej Everybody

I have tried do make an "instant search" in javascript, ie everytime one
hits a key the javascript sends the request to a database and returns
the result into a table.

The problem is occuring when the result i given. When one do a search
the given result is appended to the existing rowx in the table instead
of redrawing the table.

Isn't appending exactly what your display() method sets out to do?
Nowhere does it remove any table content. Find the row(s) you want to
remove and call removeChild on their parent node.

[snip]

function display()
{
//Find the table we want to append to
var selector =
document.getElementById("selector").getElementsByTagName("tbody")[0];

for(var i in finalArray){//Run through "finalArray"

var strPhone = finalArray["strPhone"]

row = document.createElement("tr");//New row

Why don't you use inserRow() (ditto for cells)?

After some research I found that there is a deleteRow() function and i
work for me.

I have no idea why I don't use insertRow(). I wasn't aware of the
function i guess.