SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2005
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Inserting rows into a table with AJAX

    I am hopping on the AJAX bandwagon, and my limited knowledge of Javascript isn't helping. I'm attempting to dynamically add rows into the middle of a table using the following as my handler...

    HTML Code:
    function handleResponse() {
        if(http.readyState == 4){
            var response = http.responseText;
            var update = new Array();
    
            if(response.indexOf('|' != -1)) {
                update = response.split('|');
                document.getElementById(update[0]).innerHTML = update[1];
            }
        }
    }
    and here is my table

    HTML Code:
    <table>
    	<tr>
    		<td>HEADER 1</td>
    		<td>HEADER 2</td>
    	</tr>
    	<div id="foo">
    	</div>
    	<tr>
    		<td>BLAH</td>
    		<td>BLAH</td>
    	</tr>
    </table>
    The problem that I'm running into is that this updates the id=foo, but doesn't seem to work well in the middle of the table. When the request comes back from the handler, it puts the return data at the top of the table instead of the middle of the table. Is there a better way to approach this problem?

    By the way, this is the tutorial that I used to get started with AJAX. I recommed it to anyone also hopping on the AJAX bandwagon
    Last edited by tdawg; Mar 17, 2006 at 10:53.

  2. #2
    SitePoint Evangelist sysice's Avatar
    Join Date
    Oct 2004
    Location
    Hackettstown, NJ
    Posts
    418
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you put text in a table like that it will also be at the top. It's not an AJAX issue, but an HTML issue.

  3. #3
    SitePoint Enthusiast pentapenguin's Avatar
    Join Date
    Aug 2005
    Location
    GA, USA
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should use DOM methods to add table cells with document.createElement(). A good tutorial: Traversing an HTML table with JavaScript and DOM Interfaces - MDC

  4. #4
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if(http.readyState == 4)

    Just because the request finished communicating with the server does not mean the request was successful. Try another tutorial.

    Compare:
    Code:
    <html>
    <head><title></title>
    <body>
    
    <table>  
    <tr>  <td>HEADER 1</td>  <td>HEADER 2</td>  </tr>
    <div id="foo">Where do I get displayed?</div>  
    <tr>  <td>BLAH</td>  <td>BLAH</td>  </tr> 
    </table>
    
    </body>
    </html>
    Code:
    <html>
    <head><title></title>
    <body>
    
    <table>  
    <tr>  <td>HEADER 1</td>  <td>HEADER 2</td>  </tr>
    <tr><td id="foo">Where do I get displayed now?</td></tr>  
    <tr>  <td>BLAH</td>  <td>BLAH</td>  </tr> 
    </table>
    
    </body>
    </html>

  5. #5
    SitePoint Wizard dreamscape's Avatar
    Join Date
    Aug 2005
    Posts
    1,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The method I use for dynamic tables is to split it into a few tbody's, one being the main [visible] part of the table, and another being a template [invisible] for added rows.

    Then to add a row, I just have to clone the template row, populate it with whatever values, and append it to my main section of the table.

    A search on Google for "javascript dynamic table" should turn up loads of other methods as well as articles, samples, and tutorials on creating them.

  6. #6
    SitePoint Enthusiast pentapenguin's Avatar
    Join Date
    Aug 2005
    Location
    GA, USA
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 7stud
    if(http.readyState == 4)

    Just because the request finished communicating with the server does not mean the request was successful. Try another tutorial.
    To elaborate a bit...you also need to check the HTTP status code to make sure everything went okay. i.e.
    Code:
    if ( http.status == 200 )

  7. #7
    SitePoint Enthusiast tarunkrsna's Avatar
    Join Date
    Dec 2005
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question zis wot u want

    http://www.scottandrew.com/weblog/articles/dom_4

    I think this might be of some assistance.

    function buildTable(){
    docBody = document.getElementsByTagName("body").item(0)
    myTable = document.createElement("TABLE")
    myTable.id ="TableOne"
    myTable.border = 1
    myTableBody = document.createElement("TBODY")
    for (i = 0; i < 3; i++){
    row = document.createElement("TR")
    for (j = 0; j < 3; j++){
    cell = document.createElement("TD")
    cell.setAttribute("WIDTH","50")
    cell.setAttribute("HEIGHT","50")
    textVal = "Cell" + i + "_" + j
    textNode = document.createTextNode(textVal)
    cell.appendChild(textNode)
    row.appendChild(cell)
    }
    myTableBody.appendChild(row)
    }
    myTable.appendChild(myTableBody)
    docBody.appendChild(myTable)
    }
    window.onload = buildTable

    You increase the value of i to the value you need to add another row; You increase the value of j to the value you need to add another cell to each row; getting html into the text value variable was impossible 4 me .. I could only add text using \n to create a new line and using css styling to format. Hope it is helpful, at least in the long run if not immediately.

    I don't know much about it as yesterday was my first foray into dhtml since, as a web design design student my JS teacher told me "if you can get an ajax app working, I'm willing to give you a good mark for the course".

    So you might see me here quite a bit, picking up info.

    Ciao
    t3rry

  8. #8
    SitePoint Enthusiast
    Join Date
    Feb 2005
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    thanks

    Thank you for all of your posts...

    dreamscape your idea exactly what I was looking for...thanks, works great. I'll have to look at some of the more in-depth ways of creating a table later such as "Traversing an HTML table with JavaScript and DOM Interfaces - MDC".


Bookmarks

Posting Permissions

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