Ajax & IE

[UKuser]

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

 

[purcaholic]

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

 

[UKuser]

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.


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

Hi Purcaholic,

Thank you for your detailed response. I'm not sure though if I was
unclear - I'm trying to get the value selected so I can post it to the
next page, rather than set the content of the select list. For some
reason the getelementbyID won't get the selected element from the
select box to then have it posted to the php url.

Thanks

A

 

[purcaholic]

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

Hi Purcaholic,

Thank you for your detailed response. I'm not sure though if I was
unclear - I'm trying to get the value selected so I can post it to the
next page, rather than set the content of the select list. For some
reason the getelementbyID won't get the selected element from the
select box to then have it posted to the php url.

Thanks

A- Zitierten Text ausblenden -

- Zitierten Text anzeigen -

Hi UKuser,

sorry my mistake, should read the post better before typing a answer.

You wrote, that you have problem to access to the selected value of
the select box. I suppose the options don't contain a value attribute.
If so, you won't get the content using
document.getElementById('servicet').value. Either add the value
attribute to the option list '<option value="foo">foo</foo> or use
document.getElementById('servicet').innerHTML.

purcaholic

 

[UKuser]

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

Hi Purcaholic,

Thank you for your detailed response. I'm not sure though if I was
unclear - I'm trying to get the value selected so I can post it to the
next page, rather than set the content of the select list. For some
reason the getelementbyID won't get the selected element from the
select box to then have it posted to the php url.

A- Zitierten Text ausblenden -

- Zitierten Text anzeigen -

Hi UKuser,

sorry my mistake, should read the post better before typing a answer.

You wrote, that you have problem to access to the selected value of
the select box. I suppose the options don't contain a value attribute.
If so, you won't get the content using
document.getElementById('servicet').value. Either add the value
attribute to the option list '<option value="foo">foo</foo> or use
document.getElementById('servicet').innerHTML.

purcaholic

Hi Purcaholic,

Yeah thanks for that - I've literally just fixed it. I was using a
menu generator which didnt include the value attribute - something so
simple can be such a pain.

Thanks again.

A