Working with Javascript innerhtml

[radi8]

I have a utility that I am in the process of developing that will get data from a PHP script as an AJAX web Service. The returned data from the web service is in the form of a table. In the table, one element is an input field that I need to reference in the main app javascript.I have been trying to use the getElementById(...) to grab the value but it fails to find the element id. I have come to the conclusion that this requires a different approach but I have not been able to find the technique yet. Inspecting the DOM, I can see the value in the div innerhtml but do not know how to pull or reference it.Any suggestions?

[jeffman]

It is impossible to say just going from a general description like that. You'll need to post relevant HTML and JavaScript.Better yet, post a link.

[radi8]

It is impossible to say just going from a general description like that. You'll need to post relevant HTML and JavaScript.Better yet, post a link.

Since this is an intranet app and not one used on a public server, posting a link is impossible.BUT... here is some pertinent code:This will get the rates information from the PHP script

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();}

This is the resulting table returned to the textRates div:

<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>

finally, here is what I was trying to do to get the rate value from the selected row:

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);	}

[shadowayex]

Since this is an intranet app and not one used on a public server, posting a link is impossible.BUT... here is some pertinent code:This will get the rates information from the PHP script

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();}

This is the resulting table returned to the textRates div:

<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>

finally, here is what I was trying to do to get the rate value from the selected row:

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);	}

Since only one element should have a certain ID (meaning each element with an ID should have a unique one), you should be able to just do document.getElementById(rateElement).value.Otherwise, you can call getElementById on div I think => div.getElementById(rateElement). Again, each element should have a unique ID, so the first bolded code should work.When you get the innerHTML of an element, you're just getting a string, not DOM. So, AFAIK you cannot use DOM functions on innerHTML.

[jeffman]

Only the document element has the getElementById method.

[radi8]

Since only one element should have a certain ID (meaning each element with an ID should have a unique one), you should be able to just do document.getElementById(rateElement).value.Otherwise, you can call getElementById on div I think => div.getElementById(rateElement). Again, each element should have a unique ID, so the first bolded code should work.When you get the innerHTML of an element, you're just getting a string, not DOM. So, AFAIK you cannot use DOM functions on innerHTML.

OK, so the innerHTML is just a text string and not DOM. Interesting that the first column is actually a button that when selected triggers the Javascript function emailSelected(..), but I cannot get to the last element. I can sort of get that...But, if using the innerHTML is not going to work, is there another technique for displaying the AJAX data so that it's DOM are available? Can the line (document.getElementById("txtRates").innerHTML=xmlhttp.responseText;)be the problem? Can it be changed so that the DOM attribute is active?

xmlhttp.onreadystatechange=function(){	if (xmlhttp.readyState==4 && xmlhttp.status==200)	{		document.getElementById("txtRates").innerHTML=xmlhttp.responseText;		document.getElementById("txtRates").style.display = "block";	}}

I am just a newbie at this so please, be patient and any help is appreciated.

[trinistorm]

Ignore this.

[ShadowMage]

DD said it:

Only the document element has the getElementById method.

You can only use getElementById on the document element, so change this line:var rate = div.InnerHTML.getElementById(rateElement).value;to:var rate = document.getElementById(rateElement).value;and you will have your rate.EDIT:Oh, BTW

But, if using the innerHTML is not going to work, is there another technique for displaying the AJAX data so that it's DOM are available? Can the line (document.getElementById("txtRates").innerHTML=xmlhttp.responseText;)be the problem? Can it be changed so that the DOM attribute is active?

You can still use innerHTML to add elements to the DOM. When you put an HTML string (a properly formatted string containing HTML markup) into the innerHTML of an element that string is automatically parsed into actual elements and added to the DOM. So what ragae meant by "you cannot use DOM functions on innerHTML" is that you cannot operate on the innerHTML itself as a DOM fragment. Ie,This works:divEl.innerHTML = "<p>this is a paragraph</p>";and will produce a new p element that is a child of the divEl element.This does not work:divEl.innerHTML.getElementsByTagName("p");and will produce an error because when you read the innerHTML property, you are retrieving a string. When you write to (or set) the innerHTML property, you generate the DOM elements.