On 30 Mai, 17:18, UKuser <spiderc...@yahoo.co.ukwrote:
Hi,
I'm working on the following code, which works fine in Firefox, but
not in IE. The problem is its not posting the variable to my page and
I'm thinking its something wrong with the getElementByID but the code
is as per an example on a tutorial website (http://www.tizag.com/
ajaxTutorial/ajax-javascript.php).
The Select element is as follows:
<select style="width:240px;font-size:8pt" id='servicet'
onchange='ajaxFunction()' name="servicet" >
So not quite sure what I've done wrong here??
Any thoughts would be great.
Thanks
A
function ajaxFunction(){
var ajaxRequest; // The variable that makes Ajax
possible!
try{
ajaxRequest = new XMLHttpRequest();
} catch (e){
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new
ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
alert("Your browser broke!");
return false;
}
}
}
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('output');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
var srv = document.getElementById('servicet').value;
var queryString = "?serv=" + srv;
ajaxRequest.open("GET", "ajax.php" + queryString,
true);
ajaxRequest.send(null);
}
Hi UKuser,
due to an option bug in IE, it isn't possible to fill options of an
selectbox using innerHTML of an select element. Either generate the
whole selectbox on each ajaxrequest or use createElement function and
append the option elements to the selectbox.
For the fist solution you will need a container element wich should
hold the whole select box beeing send by the response.
[snip]
<script type="text/javascript">
....
var ajaxDisplay = document.getElementById('selectBoxContainer');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
....
</script>
<div id="selectBoxContainer"></div>
[/snap]
The second way needs output of the options either in xml or in json
format. i prefer usage of json, its faster to handle. the following
example uses json:
[snip]
<script type="text/javascript">
// your select box
el=document.getElementById('output');
// reset content
el.innerHTML = "";
// response should be an valid json format
var json = eval('(' + ajaxRequest.responseText + ')');
/*
lets assume the json object contains a list of
options like json[pos][0] = "value", json[pos][1] = "text"
*/
for (var i=0; i < json.length; i++) {
var opt = document.createElement("option");
opt.appendChild(document.createTextNode(json[i][1]));
opt.value = json[0][1];
el.appendChild(opt);
}
</script>
[/snap]
The last example needs some validation and error handling. Maybe
you'll won't get an json string, if an error on the server occurs.
purcaholic
