drop down population with ajax firefox not working i.e.ok

This site is best viewed in a modern browser with JavaScript enabled.

drop down population with ajax firefox not working i.e.ok

mojito

The following code has been simplified to highlight the problem assume that response contains a string and passes the first if statement

 if(response!="" || response != false) {
	   alert("ok here rsponse = "+response);
         // UPDATE select box sel2 content
		sel = document.cities.sel2;
		 alert("ok here sel = "+sel);

		sel.options[0] = new Option("me","too");


     		document.getElementById("ajaxTest").innerHTML ="response";
  }

in firefox the sel variable doesnt work but in i.e. it does..im a flash guy normally so am getting a grip on ajax hopefully. I'm wondering if I should use some kind of library or framework for the java script- ajax but for this would like the raw code for understanding.

Angry_Black_Man

sorry, too little code to see the problem clearly. if i had a document, with a form named "cities" with a form element called "sel2" and used that dom to access it, it would work.

id suggest looking at the error console in FF. when code doesnt work, there is a high chance the problem will appear in FF's error console.

mojito

the getElementbyId is undefined for some reason, but its there ?

...
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript">
<!--
function createRequestObject() {
var req;

if(window.XMLHttpRequest){
// Firefox, Safari, Opera...
req = new XMLHttpRequest();
} else if(window.ActiveXObject) {
// Internet Explorer 5+
req = new ActiveXObject("Microsoft.XMLHTTP");
} else {
// There is an error creating the object,
// just as an old browser is being used.
alert('Problem creating the XMLHttpRequest object');
}
return req;
}

// Make the XMLHttpRequest object
var http = createRequestObject();

function sendRequest(act) {
//alert("fired "+act);
//alert("send request");
// Open PHP script for requests
http.abort();
http.open('post', 'modules/doit.php');
http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
http.send('country='+act);
document.getElementById("ajaxCountry").innerHTML=act;
// document.getElementById("ajaxTest").innerHTML=act;
http.onreadystatechange = handleResponse;
}
function setCity(act){

document.getElementById("ajaxCity").innerHTML=act;
}

function handleResponse() {
if(http.readyState == 4 && http.status == 200){
//alert("ajax loaded "+http.responseText);
// Text returned FROM the PHP script
var response = http.responseText;
// var response ="text~value|text~value|text~value|text~value|";

  if(response!="" || response != false) {
   alert("ok here rsponse = "+response);
     // UPDATE select box sel2 content
	sel = getElementById['cities'].sel2;
	 //clear old content
	 alert("ok here sel = "+sel);
	 /* while (sel.options.length) 
	  	{
		sel.remove(0);
		}*/
	 //split the incoming string to create array arrOpt which contians the pairs of content

		sel.options[0] = new Option("me","too");

		/*var arrOpt = response.split("|");
		   alert("ok here arrOpt= "+arrOpt);
		for(var i = 0; i< arrOpt.length-1;i++){

			var arrVal = arrOpt[i].split("~");
			sel.options[sel.options.length] = new Option(arrVal [0],arrVal[1]);
		}*/
     		document.getElementById("ajaxTest").innerHTML ="response";
  }
  else{
   alert("response was equal to nowt ="+response);
  }

}
}

//-->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
Please select a country from the drop down box below.<br><br><form id="places" action="/landed.at/" method="post" name="form01"><select size="10" name="sel1" onchange="javascript:sendRequest(sel1.value)"><option value="1">Afghanistan</option><option value="2">Albania</option><option value="3">Algeria</option><option value="4">American Samoa</option><option value="5">Andorra</option><option value="6">Angola</option><option value="7">Anguilla</option><option value="8">Antarctica</option><option value="9">Antigua and Barbuda</option><option value="10">Argentina</option><option value="11">Armenia</option><option value="12">Aruba</option><option value="13">Ashmore and Cartier</option><option value="272">Zaire</option><option value="273">Zambia</option><option value="274">Zimbabwe</option><option value="275">Palestinian Territory, Occupied</option></select></form><div id='ajaxTest'>ggg</div>

    <tr>
      <td width="700">There are no items to display</td>

	  <td valign="top">		<div class="moduletable">
				</div>
	</td>
	          </tr>
  </table>

</div>

<br />
<div align="center" class="header_right">
(C) 2007 landed.at</div>

<div align="center">
</div></td>
</tr>
<tr>
<td class="header_left" colspan="3"><a href="http://www.tri-x-directory.com/">Tri-X-Directory</a>
<script type="text/javascript"></script>

		<div align="center">
		<a href="index2.php?option=com_rss&amp;feed=RSS0.91&amp;no_html=1">
			<img src="http://localhost/landed.at/images/M_images/rss091.gif" alt="RSS 0.91" align="middle" name="RSS_091" border="0" /></a>
	</div>

		<div align="center">
		<a href="index2.php?option=com_rss&amp;feed=RSS1.0&amp;no_html=1">

			<img src="http://localhost/landed.at/images/M_images/rss10.gif" alt="RSS 1.0" align="middle" name="RSS_10" border="0" /></a>
	</div>

		<div align="center">
	<a href="index2.php?option=com_rss&amp;feed=RSS2.0&amp;no_html=1">
		<img src="http://localhost/landed.at/images/M_images/rss20.gif" alt="RSS 2.0" align="middle" name="RSS_20" border="0" /></a>
	</div>

		<div align="center">
	<a href="index2.php?option=com_rss&amp;feed=ATOM0.3&amp;no_html=1">
		<img src="http://localhost/landed.at/images/M_images/atom03.gif" alt="ATOM 0.3" align="middle" name="ATOM_03" border="0" /></a>

	</div>

		<div align="center">
	<a href="index2.php?option=com_rss&amp;feed=OPML&amp;no_html=1">
		<img src="http://localhost/landed.at/images/M_images/opml.png" alt="OPML" align="middle" name="OPML" border="0" /></a>
	</div>
	</div></td>

</tr></table>
</td></tr>
</table>

Angry_Black_Man

hrm, im not tracking this problem. do you have the PHP page that you are posting your information to? im not getting to your error becuase i dont have access to that particular page.

mojito

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
<!--
function createRequestObject() {
   var req;

   if(window.XMLHttpRequest){
      // Firefox, Safari, Opera...
      req = new XMLHttpRequest();
   } else if(window.ActiveXObject) {
      // Internet Explorer 5+
      req = new ActiveXObject("Microsoft.XMLHTTP");
   } else {
      // There is an error creating the object,
      // just as an old browser is being used.
      alert('Problem creating the XMLHttpRequest object');
   }
   return req;
}

// Make the XMLHttpRequest object
var http = createRequestObject();


function sendRequest(act) {
//alert("fired "+act);
//alert("send request");
   // Open PHP script for requests
  http.abort();
   http.open('post', 'modules/doit.php');
   http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
   http.send('country='+act);
   document.getElementById("ajaxCountry").innerHTML=act;
  // document.getElementById("ajaxTest").innerHTML=act;
   http.onreadystatechange = handleResponse;
}
function setCity(act){
	var P = document.getElementById('ajaxCity').value;
 document.getElementById("ajaxCity").innerHTML=act;
}

function handleResponse() {
   if(http.readyState == 4 && http.status == 200){
	//alert("ajax loaded "+http.responseText);
      // Text returned FROM the PHP script
      var response = http.responseText;
	// var response ="text~value|text~value|text~value|text~value|";

  if(response!="" || response != false) {
   alert("ok here rsponse = "+response);
     // UPDATE select box sel2 content
	 var Q = document.getElementById('cities').value;
	sel = getElementById['cities'].sel2;
	 //clear old content
	 alert("ok here sel = "+sel);
	 /* while (sel.options.length) 
	  	{
		sel.remove(0);
		}*/
	 //split the incoming string to create array arrOpt which contians the pairs of content

		sel.options[0] = new Option("me","too");

		/*var arrOpt = response.split("|");
		   alert("ok here arrOpt= "+arrOpt);
		for(var i = 0; i< arrOpt.length-1;i++){

			var arrVal = arrOpt[i].split("~");
			sel.options[sel.options.length] = new Option(arrVal [0],arrVal[1]);
		}*/
		 var R = document.getElementById('ajaxTest').value;
     		document.getElementById("ajaxTest").innerHTML ="response";
  }
  else{
   alert("response was equal to nowt ="+response);
  }
   }
}

//-->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<?
$query = "SELECT CountryId, Country FROM countries";
	$database->setQuery( $query );
	$rows = $database->loadObjectList();
	echo "Please select a country from the drop down box below.<br><br>";
	echo "<form id=\"places\" action=\"".$_SERVER["REQUEST_URI"]."\" method=\"post\" name=\"form01\"><select size=\"10\" name=\"sel1\" onchange=\"javascript:sendRequest(sel1.value)\">";
	for ($i=0;$i<sizeof($rows);$i++){
	$row = $rows[$i];
	echo "<option value=\"".$row->CountryId."\">". $row->Country."</option>";
	}
	echo "</select></form>";

?>
<div id='ajaxTest'>ggg</div>
<form id="cities" name="form2" method="post" action="">
  <select name="sel2" onclick="setCity(sel2.value)">
  </select>
</form>
<br /><br />
</body>
</html>

Angry_Black_Man

it doesnt since that has PHP in it that i cant access. i may be able to troubleshoot a live page.

mojito

I didn't think it helped, there is no live page its running localhost. But from the source which the php creates it should be possible to copy and paste the html and work from that ? ah! replace the database driven stuff with hard coded values and then we dont need a database

This should be elementary since its a javascript error on plain html. Im going to start to work on a heard coded model and strip out the other stuff like I suggested above. I posted originaly in the hope that this was a common gotcha I never post and didnt originally want people to go through my code in that depth.

thanks

mojito

<form id="places" action="/landed.at/" method="post" name="form01"><select size="10" name="sel1" onchange="javascript:sendRequest(sel1.value)"><option value="1">Afghanistan</option><option value="2">Albania</option><option value="3">Algeria</option><option value="4">American Samoa</option><option value="255">United States Minor Outlying Islands</option><option value="256">Uruguay</option><option value="257">Uzbekistan</option><option value="258">Vanuatu</option><option value="259">Venezuela</option><option value="260">Vietnam</option><option value="261">Virgin Islands</option><option value="262">Virgin Islands (UK)</option><option value="263">Virgin Islands (US)</option><option value="264">Wake Island</option><option value="265">Wallis and Futuna</option><option value="266">West Bank</option><option value="267">Western Sahara</option><option value="268">Western Samoa</option><option value="269">World</option><option value="270">Yemen</option><option value="271">Yugoslavia</option><option value="272">Zaire</option><option value="273">Zambia</option><option value="274">Zimbabwe</option><option value="275">Palestinian Territory, Occupied</option></select></form><div id='ajaxTest'></div>

<form id="cities" name="form2" method="post" action="">
  <select name="sel2" onclick="setCity(sel2.value)">
  </select>
</form>

its this last sel which is coming up as undefined, maybe its to do with it being as part of a cms ?

mojito

I have made it live now here, http://www.landed.at

It has a new error now due to differences in the hosting pattern and database that I need to sort out.