Ajax Problems in IE
Microsoft released a new browser that is follows standards. Older versions of Internet Explorer have held back adoption of web standards. One of those standards is ajax submissions which ironically was pioneered by Internet Explorer.
One upon a time, Internet Explorer held over 90% of the browser market. Microsoft had no competition and added few features. Uptake of standards was held back by hacks to make older versions work well.
Ajax stands for asynchronous JavaScript and XML. It is a web development method used to send data to and from the client-side to the server-side. In layman’s terms, Ajax loads pages dynamically without reloading the page.
- Tools are required:
- Text editor.
- HTML.
- JavaScript.
- Browser to view output.
Optional Download and install suitable text editor
Any text editor with regular expression support will work. To select a reviewed lightweight programming editor read the Ojambo.com Lightweight Programming Editors.
Form processing form-handler.php file
<?php
/*
* form-handler.php
*
* Copyright 2011 Edward <http://ojambo.com>
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 2 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program; if not, write to the Free Software
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
* MA 02110-1301, USA.
*
*
*/
// Retrieve data
$name = $_POST['name']; // grab the posted value
// Create specific data
$time = date('H:i:s'); // time in hour:minute:seconds, HH:MM:SS
// Return content
echo $name . ' was submitted at '. $time; // Print return string
?>
The form handler simply obtains the submitted values. Then it creates specific data, which is the current time. Finally the form handler returns the submitted value and the specific data as a string.
Original index.html file
<!--
index.html
Copyright 2011 Edward <http://ojambo.com>
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
MA 02110-1301, USA.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Ojambo.com Internet Explorer Ajax Fix</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="jquery-1.4.2.min.js" ></script>
<script type="text/javascript">
$(document).ready(function() { // Make sure document has loaded
$("input#original-submit").click(function() {
//Process Form
var name = $("input#original-name").val(); // Get the original name
var submit = $("input#original-submit").val(); // Get the original submit
var dataString = 'name='+ name + '&submit=' +submit; // Create send data
$.ajax({
type: "POST", // The method type
url: "form-handler.php", // Place to send data
data: dataString, // Specific information
success: function(returnString) { // Grab the return string
$('#content-area').html("<div id='message'>"+returnString+"</div>");
$('#message').append("<p>Thanks Form was Received</p>");
}
});
return false;
}); //submit-button clicked
});
</script>
</head>
<body>
<form id="original-form" method='POST' action='#'>
Name: <input type='text' name='name' id="original-name" />
<input type='submit' name='submit' value='Original Submit' id="original-submit"/>
</form>
<div id="content-area"></div>
</body>
</html>
In the past, the above code worked in all browsers from Internet Explorer 6 and up. It still works in the latest versions of non-Microsoft browsers. Microsoft fixed some vulnerabilities in all their browsers which prevents the above code from working.
Fixed index.html file
<!--
index.html
Copyright 2011 Edward <http://ojambo.com>
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
MA 02110-1301, USA.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Ojambo.com Internet Explorer Ajax Fix</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="jquery-1.5.2.min.js" ></script>
<script type="text/javascript">
$(document).ready(function() { // Make sure document has loaded
$("input#fixed-submit").click(function() {
//Process Form
var name = $("input#fixed-name").val(); // Get the original name
var submit = $("input#fixed-submit").val(); // Get the original submit
var dataString = 'name='+ name + '&submit=' +submit; // Create send data
var postURL = 'form-handler.php'; // Place to send data
$.post(postURL, dataString,
function(returnString) {
$('#content-area-fixed').html("<div id='message-fixed'>"+returnString+"</div>");
$('#message-fixed').append("<p>Thanks Form was Received</p>");
}
);
return false; // Disable form submission
}); //submit-button clicked
});
</script>
</head>
<body>
<form id="fixed-form" method='POST' action='#'>
Name: <input type='text' name='name' id="fixed-name" />
<input type='submit' name='submit' value='Fixed Submit' id="fixed-submit"/>
</form>
<div id="content-area-fixed"></div>
</body>
</html>
Before applying the fix, update to a recent version of jQuery. The fix works by using the jQuery post method instead of the ajax method of the past. It works on all versions of Internet Explorer and other non-Microsoft browsers.
How to Use:
Run the index.html file in your favourite browser.
For demonstrations, use an older jQuery version in Internet Explorer.
For live sites use an updated version of jQuery.
Results:
The form handler file recieves the form data once the submit button is clicked. The form handler file sends back customized data. The customized data is then appended below the form.
Conclusion:
Ajax is a great way to dynamically send content between the client-side and the server-side. Security policy changes can affect older code that was hacked to make older browsers work.
- Recommendations:
- Never use hacks to enhance older browsers.
- Use current and up-to-date plugins that follow standards.
- Check for browser standard compliance for your applications.
- Always program without JavaScript first for easier fallback.