Problem with AJAX calls in IE: function oes not receive returnedvalue after one time

[Samik R.]

Hello,
I am using the innerHTML property of a div placeholder to update the contents, and the HTML is provided from a perl script on the server side. The perl script gets called through AJAX when I press a button in the first page. The returned HTML in the div has another button, which, when pressed, should call the same perl script again. Think of the program as some sort of wizard.

The problem is, this works perfectly as expected in FF (2.0). In IE (7.0) however, the first time I press the button, the things are fine and the second button comes in. Pressing this button does not do anything, although the perl routine does get called and the return HTML gets generated. Somehow the HTML never reaches the browser or something similar. The JS stateChangeHandler method for the XMLHTTP object, which should handle things when readyState changes to 4 and status changes to 200 etc. never gets fired.

I created a highly scaled down version of my page which demonstrates the problem. The page works in FF but not in IE7.

URL: http://samik.freeshell.org/test/ajaxtest.html

The backend perl is available at: http://samik.freeshell.org/test/ajaxTest.txt
Regards.
-Samik

 

[purcaholic]

Hello,
I am using the innerHTML property of a div placeholder to update the contents, and the HTML is provided from a perl script on the server side. The perl script gets called through AJAX when I press a button in the first page. The returned HTML in the div has another button, which, when pressed, should call the same perl script again. Think of the program as some sort of wizard.

The problem is, this works perfectly as expected in FF (2.0). In IE (7.0) however, the first time I press the button, the things are fine and the second button comes in. Pressing this button does not do anything, although the perl routine does get called and the return HTML gets generated. Somehow the HTML never reaches the browser or something similar. The JS stateChangeHandler method for the XMLHTTP object, which should handle things when readyState changes to 4 and status changes to 200 etc. never gets fired.

I created a highly scaled down version of my page which demonstrates the problem. The page works in FF but not in IE7.

URL:http://samik.freeshell.org/test/ajaxtest.html

The backend perl is available at:http://samik.freeshell.org/test/ajaxTest.txt
Regards.
-Samik

Hi Samik,

i had the same problem some weeks ago. IE doesn't like javascript code
in onclick, onmouseover etc. inside dynamically added HTML content.
Maybe one solution is to add the onclick event after saving returned
HTML content is placed on the desired place. Another way is to use an
anchor tag where the javascript code is placed in the href attribute.
On this case IE won't be fussy and will accept your HTML output
including javascript code.


purcaholic

 

[Pete]

The problem is, this works perfectly as expected in FF (2.0). In IE (7.0) however, the first time I press the button, the things are fine and the second button comes in. Pressing this button does not do anything, although the perl routine does get called and the return HTML gets generated. Somehow the HTML never reaches the browser or something similar. The JS stateChangeHandler method for the XMLHTTP object, which should handle things when readyState changes to 4 and status changes to 200 etc. never gets fired.

You are only creating the XMLHttpRequest once. You need a new
XMLHttpRequest object for each ajax request.

 

[Pete]

i had the same problem some weeks ago. IE doesn't like javascript code
in onclick, onmouseover etc. inside dynamically added HTML content.
Maybe one solution is to add the onclick event after saving returned
HTML content is placed on the desired place. Another way is to use an
anchor tag where the javascript code is placed in the href attribute.
On this case IE won't be fussy and will accept your HTML output
including javascript code.

In what way does IE not like onclick events? Can you provide sample
code?

 

[Samik R.]

You are only creating the XMLHttpRequest once. You need a new
XMLHttpRequest object for each ajax request.

So, this is only true in IE, is it? FF does not seem to be having any problem !!
Thanks for your comment.
-Samik

 

[Samik R.]

Hi Samik,

i had the same problem some weeks ago. IE doesn't like javascript code
in onclick, onmouseover etc. inside dynamically added HTML content.
Maybe one solution is to add the onclick event after saving returned
HTML content is placed on the desired place. Another way is to use an
anchor tag where the javascript code is placed in the href attribute.
On this case IE won't be fussy and will accept your HTML output
including javascript code.


purcaholic

Thanks for your comment. I will try this, but I think my onClick event is working fine. The call to the perl program does get processed after the button is clicked, just that it does not return with the output.

 

[purcaholic]

In what way does IE not like onclick events? Can you provide sample
code?

I have had this behavior few weeks ago. It wasn't possible to use any
javascript code inside a onclick attribute. Have tested it today with
another code snippets ant it works also on IE, can't reproduce the
issue. Maybe i had an specific error, depending on environment
settings.

The first error was something like "invalid character at postition
xy", even though valid encoding. After than IE didn't respond to any
javascript code in onclick attribute. Could solve this issue after
moving everything from onclick to href attribute.

 

[purcaholic]

Thanks for your comment. I will try this, but I think my onClick event is working fine. The call to the perl program does get processed after the button is clicked, just that it does not return with the output.- Zitierten Text ausblenden -

- Zitierten Text anzeigen -

Excuse me for my wrong answer, IE works fine with dynamically added
content by ajax including onclick attributes.

You should create, as Pete wrote before, a new XMLHttpRequest on each
request. Cjhange youre code as follows:
[snip]
....
var AjaxRequester=null;
function setNewAjaxRequester(){
if(window.ActiveXObject)
{ AjaxRequester = new ActiveXObject("Microsoft.XMLHTTP"); }
else if(window.XMLHttpRequest)
{ AjaxRequester = new XMLHttpRequest(); }
}
....
// This method does the heavy lifting of calling AJAX and displaying
data
function display(TargetDivName,Var,Val)
{
//Call this to create a new XMLHttpRequest object
setNewAjaxRequester();
// Get the target div element
TargetDiv=document.getElementById(TargetDivName);
....
}
....
[/snap]

Then the "javascript" string is only for usage in href attribute
(href="javascript:alert('foo')"), it's not necessary in onclick,
because content of onclick attribute will allways handled as
javascript code.
The code onClick="display('CredBody','TeamLogin','Team1');" will also
do the job.


purcaholic

 

[Samik R.]

Thanks for your comment. I will try this, but I think my onClick event is working fine. The call to the perl program does get processed after the button is clicked, just that it does not return with the output.- Zitierten Text ausblenden -

- Zitierten Text anzeigen -

Excuse me for my wrong answer, IE works fine with dynamically added
content by ajax including onclick attributes.

You should create, as Pete wrote before, a new XMLHttpRequest on each
request. Cjhange youre code as follows:
[snip]
...
var AjaxRequester=null;
function setNewAjaxRequester(){
if(window.ActiveXObject)
{ AjaxRequester = new ActiveXObject("Microsoft.XMLHTTP"); }
else if(window.XMLHttpRequest)
{ AjaxRequester = new XMLHttpRequest(); }
}
...
// This method does the heavy lifting of calling AJAX and displaying
data
function display(TargetDivName,Var,Val)
{
//Call this to create a new XMLHttpRequest object
setNewAjaxRequester();
// Get the target div element
TargetDiv=document.getElementById(TargetDivName);
...
}
...
[/snap]

Then the "javascript" string is only for usage in href attribute
(href="javascript:alert('foo')"), it's not necessary in onclick,
because content of onclick attribute will allways handled as
javascript code.
The code onClick="display('CredBody','TeamLogin','Team1');" will also
do the job.


purcaholic

I found out a workaround, which is pretty well documented. I had to reverse the order of XHR.open and XHR.onreadystatechange. Following webpage is a good source:
http://keelypavan.blogspot.com/2006/03/reusing-xmlhttprequest-object-in-ie.html

Thanks.
-Samik