Simple AJAX question

durino13 · #1 11-23-2009, 03:01 AM

I have a question regarding AJAX.

I have a table with row lines. I want to delete table rows, when clicked in the first cell in the table. I use AJAX for this. Logic is following:

1. Get the element (<td>) by id of the row, you want to delete. I use getElementByID(id) for this.
2. Pass this id in an AJAX call to the server
3. Delete the row in mysql table (php on the server)
4. Return AJAX response and redraw table (omit already deleted row)

This works with no problems for the first time. Problems start, if i want to delete second row .. The above procedure will fail, because the 'getElementByID()' function can not process data from the AJAX response, so the function fails with error something like "can not find ID" ..

This phenomenon is explained here http://www.subbu.org/blog/2006/04/aj...getelementbyid

I don't know however, how can I fix the problem. The site above mentions solution like "I was reminded that the solution is to use xml:id attribute in the XML so that getElementById can recognize ID type attributes", but this I don't understand.

Does anybody know, how can I fix my problem? I am sure, I am missing something basic here.

Scriptage · #2 11-23-2009, 04:38 AM

Consider the following example:

HTML Code:

<!DOCTYPE html 
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript">
onload = function(){

var el = document.createElement("div");
el.id = "element";

document.getElementsByTagName("body")[0].appendChild(el);

}
</script>
<title>Simple</title>


</head>
<body>

<div>

<a href="#" onclick="document.getElementById('element').innerHTML = 'Foo';">Do stuff</a>

</div>

</body>
</html>

We can get elements that we add to the table using document.getElementById, so if you're re-drawing the table by appending everything that's returned by the server to the page it isn't an issue. I don't understand why you need to re-draw the table anyway, can't you just remove the row once it's been clicked?

durino13 · #3 11-23-2009, 05:17 AM

Quote:

I don't understand why you need to re-draw the table anyway, can't you just remove the row once it's been clicked?

Since I am a real javascript, ajax beginner, I just followed 'internet tutorials' where a whole table was sent back from the server in a reply. That's why

Regarding your code:

1. Does the 'onload' function simulates the AJAX call? Is it the same? If you sey 'yes', than i ask: "Are you sure?"

Because I have tested dozen of times and getDocumentByID doesn't work for me, if data from AJAX reply are processed.

Scriptage · #4 11-23-2009, 05:33 AM

You cannot use getElementById on an XMLDOM object but if you append the HTML nodes from an XMLDOM object to the page you can then access them using document.getElementById.
If for some reason you need to access them before appending them to the page you could do:

HTML Code:

function getById(XMLDOMObject, tag, id){
var elements = XMLDOMObject.getElementdByTagName(tag);
  for(var i=0; i<elements.length; i++){

    if(elements[i].id == id){

   return elements[i];

    }

  }

return false;
}

// usage

var myElement = getById(request.responseXML, 'td', 'tableElement');

durino13 · #5 11-23-2009, 05:44 AM

Quote:

You cannot use getElementById on an XMLDOM object but if you append the HTML nodes from an XMLDOM object to the page you can then access them using document.getElementById.

This is how I get the result back to my page:

Code:

var xmlhttp;

function processUser(str, action, comment)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }
var url="components/com_futbal/processuser.php";
url=url+"?user="+str;
url=url+"&sid="+Math.random();
url=url+"&action="+action;
url=url+"&comment="+comment;
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("myDestinationDivID").innerHTML=xmlhttp.responseText;
}
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}

I am in the impression, that the line

Code:

document.getElementById("myDestinationDivID").innerHTML=xmlhttp.responseText;

actually appends the result to my html page. Not? Or is there something else I need to do in order to append?

Scriptage · #6 11-23-2009, 06:02 AM

No you need to use appendChild() to append to the document's DOM node structure as far as I am aware. I haven't got a great deal of time to look into it at the moment but you might be able to get away with:

HTML Code:

document.getElementById("myDestinationDivID").appendChild(xmlhttp.responseXML);

I think it all depends on the format of what is being returned from the server, if you are returning an entire HTML page with a doctype it can get quite tricky. I wrote a program a while ago that handled all of the ugly stuff, if the code above doesn't work I'll dig it out for you later on tonight.

durino13 · #7 11-23-2009, 06:39 AM

Scriptage,

I think, you already helped me enough! I will do the tests .. At least, I know, where to proceed.

I appreciate your time you've spent with me !! In case, i need to know more, I will come back to you.

Thanks a LOT!

Juraj

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)