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.getEle mentById("searc h").value;
process(search) ;
}

// call server asynchronously
function process(in_valu e)
{

var server = "phoneXML.php?s earch="+in_valu e;

// 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("Receiv ing new message from server...")
// make asynchronous HTTP request to retrieve new message
xmlHttp.open("G ET", server, true);
xmlHttp.onready statechange = handleRequestSt ateChange;
xmlHttp.send(nu ll);
}
catch(e)
{
displayError(e. toString());
}
}
}

//Parsing the xml file and puts the final result in "finalArray "
function handleServerRes ponse()
{
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.respons eXML;

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

// catching potential errors with Firefox
var rootNodeName = xmlResponse.doc umentElement.no deName;

if (rootNodeName == "parsererro r") throw("Invalid XML structure");
// obtain the XML's document element
xmlRoot = xmlResponse.doc umentElement;

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

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

finalArray[idArray.item(i) .firstChild.dat a] = new Array();
finalArray[idArray.item(i) .firstChild.dat a]["strContact "] =
contactArray.it em(i).firstChil d.data;
//Er der noget i den??
if(xmlRoot.getE lementsByTagNam e("strEmail")[i].firstChild)
finalArray[idArray.item(i) .firstChild.dat a]["strEmail"] =
emailArray.item (i).firstChild. data;
else
finalArray[idArray.item(i) .firstChild.dat a]["strEmail"] = "";

//Er der noget i den??
if(xmlRoot.getE lementsByTagNam e("strPhone")[i].firstChild)
finalArray[idArray.item(i) .firstChild.dat a]["strPhone"] =
phoneArray.item (i).firstChild. data;
else
finalArray[idArray.item(i) .firstChild.dat a]["strPhone"] = "";
finalArray[idArray.item(i) .firstChild.dat a]["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.getEle mentById("selec tor").getElemen tsByTagName("tb ody")[0];

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

var strPhone = finalArray[i]["strPhone"]

row = document.create Element("tr");//New row

cell1 = document.create Element("td");//New cell
cell1.setAttrib ute("id", "product");//Cell attributes
cell1.innerHTML = finalArray[i]["strFirma"];//Cell data

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

cell3 = document.create Element("td");
cell3.setAttrib ute("id", "product");
cell3.innerHTML = strPhone;

cell4 = document.create Element("td");
cell4.setAttrib ute("id", "product");
cell4.innerHTML = finalArray[i]["strEmail"];

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

[Ian Collins]

Memborg wrote:

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.getEle mentById("selec tor").getElemen tsByTagName("tb ody")[0];

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

var strPhone = finalArray[i]["strPhone"]

row = document.create Element("tr");//New row

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

--
Ian Collins.

[Memborg]

Ian Collins skrev:

Memborg wrote:

>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.getEl ementById("sele ctor").getEleme ntsByTagName("t body")[0];

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

var strPhone = finalArray[i]["strPhone"]

row = document.create Element("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.