[RESOLVED] AJAX doesn't write over the div

[jrough]

I have the AJAX function below and it now works but its doing something wrong.
The xmlhttp.responseText is not writing over the list from php in the form. Instead it is creating a 2nd drop down, so there are two drop downs. The first one is the one from php in the form with all the options and the second with the right dynamic options. How can I get it to write over the select/option in the form? The 2nd one over to the left side margin is the right one from AJAX, it does pull the right dynamic list and it works but it isn't being directed properly. So I'm just not figuring out how to do that.
can you help please? thanks, Janis

This is the search form that has the full list. The list from the php page called by AJAX below should write over this section with the section below.

function fillZoneNm() {

           var bu = document.forms[0].search_bu.value;

            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() {   
	    document.getElementById("searchzonenm").innerHTML=xmlhttp.responseText;
	}
            xmlhttp.open("GET","get_bus.php?bu="+bu,true);
	//xmlhttp.open("GET","get_bus.php?bu=" + bu,true);

	xmlhttp.send();
}

echo "<tr>";
echo "<th align='right'>Zone Number</th>\n";
echo "<div id='searchzonenm'>\n";
echo "<td><select name='search_zonenm' id='search_zonenm'  >\n";
    getZoneNms($search_zonenm);

echo "</select>\n";
echo "</div>";
echo "</td>";
echo "</tr>";

this is the page get_ bus.php that is called by the AJAX function. This is the right list, it gets the vars from the get string in the AJAX, but it has to write over the list in the form from php? thanks again.

echo "<td><select name='search_zonenm' id='search_zonenm' onChange='fillZoneId;' >\n";
echo "<option value=''>Select Zone Number</option>\n";

while ($row = mysql_fetch_array($result)) {
	$zonenm=$row['zonenm'];       

echo "<option value='$zonenm'>$zonenm</option>\n";

}
echo "</select>";
echo "</td>";

Of course this second list would have the right options and would look like this after PHP processed it but it would correspond to what the user selected
<td><select name='search_zonenm' id='search_zonenm' onChange='fillZoneId;' >
<option value=''>Select Zone Number</option>
<option value='OTC'>OTC</option>
<option value='FAST MOVERS'>FAST MOVERS</option>
<option value='CIIS'>CIIS</option>
<option value='FRIDGE'>FRIDGE</option>
<option value='OVERSTOCK'>OVERSTOCK</option>
<option value='CIIIS'>CIIIS</option>
<option value='EXPIRED'>EXPIRED</option>
</select></td>

[johanafm]

Validate your input. Your html code makes no sense. The following code

<table>
<tbody>
	<tr>
		<td>cell 1</td>
		<div>cell a?<td>cell b?</div>cell c?</td>
	</tr>
</tbody>
</table>

Generates a DOM tree matching this html markup (in Firefox anyway. results may differ when you produce nonsensical markup)

<div>cell a?</div><table>
<tbody>
<tr>
	<td>cell 1</td>
	<td>cell b?cell c?</td>
</tr>
</tbody>
</table>

So in the end your javascript code is not replacing the content you thought it was.

[jrough]

They told me that on javascript usenet so I did run it through unicorn. The problem with that is my html is in the php itself using echos and unicorn doesn't work with php tags. I took out the form and created a template and ran that through unicorn and got some feedback and translated that back to my php page
since I could not figure out how to get the php tags to work in html. Maybe I'll ask that question on a separate post. I would like to know the answer to that.

I'm sure fixing tags made my page better and maybe even prevented the AJAX at some point but what it turned out to be was just matching what was inserted into the form from AJAX more carefully. For example on the get_bus.php
page called by the javascript I had to make sure no extra <select> or <td> or <tr> was echoed and transmitted to the form
only from the <option> to the </option> on that page gets replaced in the form.
What gets replaced is everything between the <select id=zone_nm> </select>
I learned that the hard way. THANKS,

echo "<option value=''>Select Zone Number</option>";

while ($row = mysql_fetch_array($result)) {
	$zonenm=$row['zonenm'];       

echo "<option value='$zonenm'>$zonenm</option>";

}

This select line with the id= search_zonenm stays while what is between the <option>'s gets replaced. I just had to be really careful it matched.
echo "<tr>";
echo "<th align='right'>Zone Id</th>\n";
echo "<td>";
echo "<select name='search_zoneid' id='search_zoneid' >";
getZoneIds($search_zoneid);
echo "</select>";
echo "</td>";
echo "</tr>";
[/code]

[jrough]

Why do you look at the DOM tree in Firefox? I noticed it adds in some tags of its own in the DOM and if tags in my document are wrong then it adds in the wrong tags.

[jrough]

one more issue was you have to use the <select id='zone_nm'> on only the form page. You cannot use the same id again in the responseText. If you do it gets confused so you have to take that out of the responseText <select name='zone_nm' > with no id.

[johanafm]

jrough;10960581 wrote:

Why do you look at the DOM tree in Firefox?

Because it lets me do so easily using a plugin called Firebug. Safari has built in support similar to Firebug, but I personally prefer Firebug.

jrough;10960581 wrote:

I noticed it adds in some tags of its own in the DOM and if tags in my document are wrong then it adds in the wrong tags.

Not at all. It corrects incorrect markup to be able to produce an HTML document. Browsers have done this for a very long time.

For example, the spceification states that elements must be closed in the same order that they are opened, which this does

<div><span></span></div>

But if you write html code like this...

<div><span></div></span>

... then your code must be corrected to be rendered in a browser. The most likely outcome in this case would probably be to close the span element when </div> is encountered, and then disregard the second </span> (since there is no matching opening tag).
<p><div></div></p> would (or should) be turned into <p></p><div></div> and then disregard the last </p>, since div elements are not allowed inside p elements.

As for having problems with "html code in php code"... Your php script generates output, and it is this output that the browser sees. All you have to do is run the script in a browser, rclick page and view source. This is the stuff the browser works with. Copy pasting that code into the "direct input" tab of the validator I linked to above would show you the problems you need to fix.

[johanafm]

jrough;10960582 wrote:

one more issue was you have to use the <select id='zone_nm'> on only the form page. You cannot use the same id again in the responseText. If you do it gets confused so you have to take that out of the responseText <select name='zone_nm' > with no id.

If you were really replacing the original select with a new one, there would still be only one element with that id.

[jrough]

I didn't know you could run the output into a validator. Thanks, and thanks for explaining what Firebug does to the DOM. That was very helpful.