473,372 Members | 952 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,372 software developers and data experts.

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 2506
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: k.mitz | last post by:
Hi, I have a PHP application that allows users to generate a .pdf report of their database content. Normally, I've had to refresh a page to call the script to generate the report, so there's a...
21
by: javainfo | last post by:
How can i refresh IFRAME and load data through AJAX?
10
by: Steve | last post by:
I need to build a very dynamic client and would be interested in knowing the pros and cons of using JSF and Ajax to accomplish this. Thanks. Steve
13
by: Sharon | last post by:
Hi all, I was wondering if anyone had experience using ajax with asp.net controls. What i'm looking for, are ways to implement and possible problems. A way to implement could be rendering the...
3
by: Ivan P | last post by:
Hello! I have a index.php that on one click calls via AJAX a file.php. index.php looks like this: <html > <head> <script language="javascript" type="text/javascript" >
2
by: =?Utf-8?B?RG90TmV0RGV2?= | last post by:
Hi, We are still using .net 1.1 and I am working on a problem that I thought could be 'probably' done easily through 'AJAX'. I visited the ajax.asp.net site and I got an impression that its only...
2
by: Nathan Sokalski | last post by:
I am moving my website from my machine to my webhost, and need some help with what extra files I need to include due to the fact that I used AJAX in my site. Everything on the site is obviously...
0
by: Tarik Monem | last post by:
I have been working on an all AJAX/DOM web site which is set to go live today and I thought I'd share my discoveries with all of you whom have helped me when I have encountered different issues along...
4
by: KDawg44 | last post by:
Hi, I have a feeling this is a dumb question, but I am exploring AJAX and PHP. I would like to write my PHP in an Object Oriented approach. What is the limitation on what I can return in AJAX? ...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.