469,625 Members | 911 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,625 developers. It's quick & easy.

Ajax & IE

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

May 30 '07 #1
4 2334
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

May 30 '07 #2
On 30 May, 18:29, purcaholic <purcaho...@googlemail.comwrote:
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
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

May 31 '07 #3
On 31 Mai, 10:22, UKuser <spiderc...@yahoo.co.ukwrote:
On 30 May, 18:29, purcaholic <purcaho...@googlemail.comwrote:


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

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</fooor use
document.getElementById('servicet').innerHTML.

purcaholic

May 31 '07 #4
On 31 May, 10:02, purcaholic <purcaho...@googlemail.comwrote:
On 31 Mai, 10:22, UKuser <spiderc...@yahoo.co.ukwrote:
On 30 May, 18:29, purcaholic <purcaho...@googlemail.comwrote:
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
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</fooor 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

May 31 '07 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

21 posts views Thread by javainfo | last post: by
10 posts views Thread by Steve | last post: by
13 posts views Thread by Sharon | last post: by
3 posts views Thread by Ivan P | last post: by
2 posts views Thread by =?Utf-8?B?RG90TmV0RGV2?= | last post: by
4 posts views Thread by KDawg44 | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.