www.webdeveloper.com
Results 1 to 7 of 7

Thread: Simple AJAX question

  1. #1
    Join Date
    Nov 2009
    Posts
    4

    Simple AJAX question

    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.

  2. #2
    Join Date
    Nov 2002
    Location
    England
    Posts
    693
    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?

  3. #3
    Join Date
    Nov 2009
    Posts
    4
    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.

  4. #4
    Join Date
    Nov 2002
    Location
    England
    Posts
    693
    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');

  5. #5
    Join Date
    Nov 2009
    Posts
    4
    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?

  6. #6
    Join Date
    Nov 2002
    Location
    England
    Posts
    693
    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.

  7. #7
    Join Date
    Nov 2009
    Posts
    4
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles