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" ..
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.
<!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?
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.
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');
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;
}
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:
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.
Reply With Quote
Because I have tested dozen of times and getDocumentByID doesn't work for me, if data from AJAX reply are processed.
Bookmarks