[RESOLVED] A little Ajax...

mrbaseball34

I am showing a page with a dropdown and an empty table.
I want to load the table with data when I select an item from the dropdown without submitting the page.

Anyone have an example of how to do that?

rulian

use the drop down's "onChange" trigger and use prototype
www.prototypejs.org to update the table.
You could build your own ajax engine, but so many people use prototype it's not worth reinventing the wheel, specially if you arent to familiar with javascriptping

mrbaseball34

I don't want to use another library as it takes too long to learn them.
I almost have it working from various examples found, can you help w
with this?

Actual oXMLHTTP.responseText returned:

      <td class="even1"><input type="hidden" value="Cole Hamel" name="name[]" size="40"/>Cole Hamel</td>
      <td class="even1"><input type="text" name="jersey[]" size="3"/></td>
      <td class="even1"><input type="hidden" value="14" name="age[]" size="40"/>14</td>
      <td class="odd1">David Wells</td>
      <td class="odd1">4</td>
      <td class="odd1">0</td>
      <td class="even1">Brad Lidge</td>
      <td class="even1">14</td>
      <td class="even1">0</td>
      <td class="odd1">Roger Clemens</td>
      <td class="odd1">21</td>
      <td class="odd1">0</td>
      <td class="even1">Randy Johnson</td>
      <td class="even1">22</td>
      <td class="even1">0</td>
      <td class="odd1">Chad Qualls</td>
      <td class="odd1">26</td>
      <td class="odd1">0</td>
      <td class="even1">Mariano Rivera</td>
      <td class="even1">29</td>
      <td class="even1">0</td>
      <td class="odd1">Andy Pettitte</td>
      <td class="odd1">31</td>
      <td class="odd1">0</td>
      <td class="even1">Roy Oswalt</td>
      <td class="even1">32</td>
      <td class="even1">0</td>
      <td class="odd1">Nolan Ryan</td>
      <td class="odd1">34</td>
      <td class="odd1">0</td>
      <td class="even1">Bob Gibson</td>
      <td class="even1">42</td>
      <td class="even1">0</td>

Replacing innerHTML like this:

  // Get the table
  var tabBody          = document.getElementById("playertablebody");

  // Create an empty Row
  var row              = document.createElement("TR");

  /* 
    The responseText of the oXMLHTTP object has the rows of the existing 
    roster in it already HTML formatted.
  */
  var response         = oXMLHTTP.responseText;
  row.innerHTML        = response;
  // Append the Row created
  tabBody.appendChild(row);

Source of the table:

<table width="400" cellspacing="0" cellpadding="1" border="0" class="playertable">
  <tbody>
    <tr>
      <th width="300" align="center" class="stheader1">Player Name</th>
      <th width="50" align="center" class="stheader1">Jersey</th>
      <th width="50" align="center" class="stheader1">Age</th>
    </tr>
  </tbody>
  <tbody id="playertablebody">
    <tr>joe pitcher1314</tr>
    <tr>
      <input type="hidden" value="Cole Hamel" name="name[]" size="40"/>Cole Hamel
      <input type="text" name="jersey[]" size="3"/>
      <input type="hidden" value="14" name="age[]" size="40"/>14
      David Wells40
      Brad Lidge140
      Roger Clemens210
      Randy Johnson220
      Chad Qualls260
      Mariano Rivera290
      Andy Pettitte310
      Roy Oswalt320
      Nolan Ryan340
      Bob Gibson420
      </tr>
  </tbody>
</table>

Where are my TD tags????

rulian

well, first I see that you are returning a bunch of TD's that dont have tr's in between and that will cause yoru tables to break since their row counts will not be even.

You will not see your TD tags in the page's source code if you load them via ajax because the source code is only for what is originally loaded on the page, and doesnt reflect any changes made to the page since.

As for the rest, you have to troubleshoot if your JS isnt either adding the innerHTML to you tr, or the TR into the tbody, and if everything else is triggering okay.

I'm not sure what you are using to send out your requests, if you can supply that code too it would probably help out.

mrbaseball34

This is the URL: http://www.crnorthampton.com/new_site/tabletest.html

mrbaseball34

Sendimg out my requests?? Yes, I am forgetting the TRs. I will add them and see if that is causing the problem.

mrbaseball34

Adding the TRs did not help.

Oh, BTW, I'm using Firefox and Firebug to do my debugging so I can see the innerHTML for the row object and it does not include any of the TDs.

Oh, crud...I don't think I can add another TR to the innerHTML of a TR, right?
I need to se the innerHTML of the TBODY. Let me try that, instead..

mrbaseball34

BINGO!!!

...set the innerHTML of the TBODY

rulian

So the appendChild method didnt work for you to add the tr into the tbody?

mrbaseball34

yes, worked just like I expected it to.