drop down population with ajax firefox not working i.e.ok
The following code has been simplified to highlight the problem assume that response contains a string and passes the first if statement
Code:
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.
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.
1. If you reply to my post, and your reply would then appear directly beneath my post, DON'T QUOTE MY ENTIRE POST!!! IT'S REDUNTANT!!! IT'S ASININE!!!! IT'S REDUNDANTLY ASININE!!!!! DON'T DO IT!!!!
2. jQuery extends the functionality of JavaScript. If you don't know JavaScript, give up on that jQuery script and learn JavaScript. You'll save yourself a lot of frustration, I promise.
3. Use the [code][/code] tags. Otherwise, you may be left wondering why no one responded to your eyesore of a thread.
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){
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);
}
}
}
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.
1. If you reply to my post, and your reply would then appear directly beneath my post, DON'T QUOTE MY ENTIRE POST!!! IT'S REDUNTANT!!! IT'S ASININE!!!! IT'S REDUNDANTLY ASININE!!!!! DON'T DO IT!!!!
2. jQuery extends the functionality of JavaScript. If you don't know JavaScript, give up on that jQuery script and learn JavaScript. You'll save yourself a lot of frustration, I promise.
3. Use the [code][/code] tags. Otherwise, you may be left wondering why no one responded to your eyesore of a thread.
<!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>
it doesnt since that has PHP in it that i cant access. i may be able to troubleshoot a live page.
1. If you reply to my post, and your reply would then appear directly beneath my post, DON'T QUOTE MY ENTIRE POST!!! IT'S REDUNTANT!!! IT'S ASININE!!!! IT'S REDUNDANTLY ASININE!!!!! DON'T DO IT!!!!
2. jQuery extends the functionality of JavaScript. If you don't know JavaScript, give up on that jQuery script and learn JavaScript. You'll save yourself a lot of frustration, I promise.
3. Use the [code][/code] tags. Otherwise, you may be left wondering why no one responded to your eyesore of a thread.
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.
drop down population with ajax firefox not working i.e.ok
Reply With Quote
its just javascript error on html.
Bookmarks