Better method of accessing AJAX data

[radi8]

I have a script that will call a php script to return data to a page using the following code (basic AJAX xmlHTTPResponse function):

function showRates(from, to, drops, dist){
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("txtRates").innerHTML=xmlhttp.responseText;
            document.getElementById("txtRates").style.display = "block";
        }
    }
    var InterModal;
    var surcharge;
    if(document.getElementById("useSurcharge").checked )surcharge=true;
    else surcharge = false;
    if(document.getElementById("useInterModal").checked)InterModal=true;
    else InterModal = false;
    diesel = document.getElementById("dieselFuel").value;
    xmlhttp.open("GET","<?php print  'http://'.$_SERVER['HTTP_HOST'].'/webServices/'?>web.svc.php?start="+from+"&endZip="+to+"&drops="+drops+"&dist="+dist+"&diesel="+diesel+"&Surcharge="+surcharge+"&Intermodal="+InterModal,true);
    xmlhttp.send();
}

The PHP script will return a formatted table to the function displaying the appropriate data. Unfortunately, the  document.getElementById("txtRates").innerHTML store the data as a text string. In the table, there are elements that I need to reference in other areas of the form, but cannot. A sample of the table is given here:

<table class=\"reference\" width=\"100% border=\"0\" align=\"center\">
<caption align=\"top\">\r\n                        Truck Rates for given Route\r\n                   </caption>
<tr>
     <th width=\"5\">Click to Email</th>
     <th width=\"20%\"> Carrier </th>
     <th width=\"9%\"> Carrier Nbr </th>
     <th width=\"9%\"> Base Rate (ttl) </th>
     <th width=\"9%\"> Drop Fee </th>
     <th width=\"9%\"> Detention Hrs</th>
     <th width=\"9%\"> Detention Fee </th>
     <th width=\"10%\"> Mileage Surcharge </th>
     <th width=\"10%\"> Total Mileage Surcharge </th>
     <th width=\"10%\"> Total Rate </th>
</tr>
<tr>
     <th><input type=\"button\" id=\"email_83629\" name=\"\" onclick=\"emailSelected(83629)\">
     <th>Command Transportation</th>
     <th>83629</th><td><div align=\"center\">1,303.06</div></td>
     <td><div align=\"center\">0.00</div></td><td><div align=\"center\">2.0</div></td>
     <td><div align=\"center\">50.00</div></td><td><div align=\"center\">0.45</div></td>
     <td><div align=\"center\">488.28</div></td>
     <td><div align=\"center\"><input type=\"text\" readonly=\"readonly\" disabled=\"disabled\" id=\"rate_83629\" value = 1,791.34></div></td>
</tr>
<tr>
etc...
</tr>
</table>

Notice that the first column and last columns are active elements which, if displayed as a static table would be active DOM objects. But, because this is displayed in the innerHTML these elements are not accessible using standard getElementById() notation. Obviously there is a better way to do this, but I am at a loss as to how.

 

When the button in the first column is pressed, the script should direct the user to an email page where the last column element should be displayed. For now, if I select the first column I want o be able to read the last column.

 

This does not work:

    function emailSelected(carrierNbr){
        var div = document.getElementById("textRates")
        var rateElement = "rate_" + carrierNbr;
        var rate = div.InnerHTML.getElementById(rateElement).value;
        alert('Carrier Nbr: ' + carrierNbr + ', rate: ' + rate);
    }

 

Can anyone please help direct me to the proper technique?

[JonnoTheDev]

Are you familiar with jQuery? It would make your life a lot easier.

Here's a quick guide:

[radi8]

Are you familiar with jQuery? It would make your life a lot easier.

Here's a quick guide:

Vaguely, I will look into it. I was wondering if that was the route I needed to go. Thanks.