IE Browser failed to execute scripts in Ajax response


Send an ajax request to server and get an ajax response as html. The response has scripts at top of the page(assume its a jsp page). IE browser does not execute those scripts, just simply ignored it. When you access/called any script methods the browser will through script errors. Solution to solve this issue., move the scripts present in top of the jsp file to bottom area. Now the browser will execute the scripts and it works fine.

Web page will load faster when you place scripts in bottom of the file.

Reason is, browser will render a html tags easily and that should be displayed immediately. But evaluate the scripts will take some time and also required to send separate requests to server to load the specified script files.

Example.

test_not_working_ie.jsp

<html>
<script src=”/ajax.js” language=”javascript”></script>
<script src=”/ajaxform.js” language=”javascript”></script>
<script>
function validate()
{
var name = document.testform.name.value;
var age = document.testform.age.value;
if( name != null ){
alert(“enter valid name”);
return false;
}
if( age != null ){
alert(“enter valid age “);
return false;
}
sendAjaxRequest(“/testaction.do”, “showid”);
}
</script>

<body>
<table>
<form name=”testform” action=”testaction.do” onsumbit=”return validate();”>
<tr><td> Enter your name <input type=”text” name=”name”/></td></tr>
<tr><td> Enter your age <input type=”text” name=”age”/></td></tr>
<tr><td> <input type=”submit” name=”save”/></td></tr>
</form>
<div id=”showid”>
</div>
</table>
</body>
</html>

In the above file, scripts are written in top of the jsp file. Javascript validate method is called when you submit the above form, but that’s not happen in this case. Because those scripts are not loaded or executed when you render the page using Ajax. Lets see the simple solution below.

test_working_in_ie.jsp – scripts are moved to bottom of page

<html>
<body>
<table>
<form name=”testform” action=”testaction.do” onsumbit=”return validate();”>
<tr><td> Enter your name <input type=”text” name=”name”/></td></tr>
<tr><td> Enter your age <input type=”text” name=”age”/></td></tr>
<tr><td> <input type=”submit” name=”save”/></td></tr>
</form>
<div id=”showid”>
</div>
</table>
</body>
<script src=”/ajax.js” language=”javascript”></script>
<script src=”/ajaxform.js” language=”javascript”></script>
<script>
function validate()
{
var name = document.testform.name.value;
var age = document.testform.age.value;
if( name != null ){
alert(“enter valid name”);
return false;
}
if( age != null ){
alert(“enter valid age “);
return false;
}
sendAjaxRequest(“/testaction.do”, “showid”);
}
</script>

</html>

If you are new to Ajax see the below links to learn basics.

Ajax Basics – https://manikandanmv.wordpress.com/2008/09/23/ajax-asynchronous-javascript-and-xml/
Ajax GET request – https://manikandanmv.wordpress.com/2008/09/29/ajax-example/
Ajax POST request – https://manikandanmv.wordpress.com/2008/09/25/ajax-post-request/

Advertisements

Tags: , , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: