IE6 and 7 issue with innerHTML
I have used ajax in the application i have develop, but there are issues with IE6 and IE7, they doesn't support innerHTML. What must be used to fixed this issue and to be a cross browser compatible?
the sample code looks like this.
function showFAQ(src, target){
xhr.onreadystatechange=function(){
if(xhr.readyState == 4 && xhr.status == 200){
document.getElementById('resultDiv').innerHTML=xhr.responseText;
}
}
str = "?action=get&request="+src;
xhr.open("GET", "./requests/data.php"+encodeURI(str), true);
xhr.send();
}
In FireFox, IE8 and other major browsers works fine. Just the problem is with IE6 and 7.
Any help/advice will be appreciated.
Thanks
IE cannot update readonly elements using innerHTML... consider this too.. :)
Try
var xmlHttp;
function getXmlHttpObject() {
var xmlHttp = null;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
// Internet Explorer 6+
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
var xhr = getXmlHttpObject();
Update
Try adding
xhr.send(null);
after
str = "?action=get&request="+src;
xhr.open("GET", "./requests/data.php"+encodeURI(str), true);
innerHTML is supported as of IE5. I think you problem is the use of the xmlhttprequest object. That one is only supported as of IE7. You can however ActiveXObject as stealthyninja's code uses.
Related
I am using jQuery 1.12 . But my question is how to check browser support ajax or not. If browser support ajax then i want to change page content using ajax.
Almost every browser now support AJAX.
If you still want to test it you can check for XMLHttpRequest
if (window.XMLHttpRequest) {
// Supports Ajax.
} else {
//No.
}
<script language="javascript" type="text/javascript">
<!--
function ajaxFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari (1st attempt)
ajaxRequest = new XMLHttpRequest();
}catch (e){
// IE browser (2nd attempt)
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
// 3rd attempt
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
alert("Failure");
return false;
}
}
}
}
//-->
</script>
Try individually three times to make the XMLHttpRequest object.
If all cases fail, it is sure that the browser is outdated and doesn't support ajax. Hope this helps!
Found this at: http://programmerguru.com/ajax-tutorial/browser-support/
Here is the code snippet which checks if the browser supports AJAX or not.
?
<script type="text/javascript">
var xmlhttp;
function checkAJAXSupport() {
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
xmlhttp= new XMLHttpRequest();
alert("Yes. Your browser must be one among them - Mozilla, Safari, Chrome, Rockmelt, IE 8.0 or above");
} else if (window.ActiveXObject) { // IE
try {
xmlhttp= new ActiveXObject("Msxml2.XMLHTTP");
alert("Yes. Your browser must be IE");
}
catch (e) {
try {
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
alert("Yes. Your browser must be IE");
}
catch (e) {}
}
}
if (!xmlhttp) {
alert("No. Giving up Cannot create an XMLHTTP instance. Your browser is outdated!");
return false;
}
}
</script>
Here is my js and problem:
function refreshDiagValues()
{
var xmlhttp = null;
var recv;
try {
// Firefox, Opera 8.0+, Safari
xmlhttp = new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
recv=xmlhttp.responseText;
document.getElementById("text7").innerHTML = recv;
}
};
xmlhttp.open("GET","ajax_DGS0101", false);
xmlhttp.send();
}
I could get this work in IE and chrome, but fails in safari.
I tested it by changing document.getElementById("text7").innerHTML = 5 and it shows the correct number on all browsers.
It feels like responseText does not contain any value for safari, but contains results for chrome and IE.
Could anyone help me?
I am using this JS code to reach a list of cities. It works in fireworks, chrome .e.t.c. But in ie7 it does not. the line document.getElementById(oDiv).innerHTML=xmlhttp.responseText; causes the error.
When I change "responseText" to "readyState", "statusText", "readyState" the scripts works. Only "responseText" causes problem.
What is the problem here?
function showAjax(oDiv, countrycode, dowhat) {
if (oDiv == "") {
document.getElementById(oDiv).innerHTML = "";
return;
}
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open('POST', 'ajax.php?dowhat=' + dowhat + '&countrycode=' + countrycode, true);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById(oDiv).innerHTML = xmlhttp.responseText;
//document.getElementById(oDiv).innerHTML=xmlhttp.readyState;
}
}
xmlhttp.send();
}
Click
<div id=citytd></div>
IE7 (and before, and IE8 in "compatibility" mode) has issues with getElementById, where it considers some things IDs that it shouldn't. I suspect you have a global variable, or another element with name="citytd", and IE is pick that up instead (even though, again, it shouldn't). More: ...by any other name, would smell as sweet
My Ajax code works fine for Chrome but it doesn't give me anything when i try to run it using other browsers like Mozilla , IE7 opera. I am uploading my code here please tell me where is problem
function ajaxFunction(str){
var ajaxRequest; // The variable that makes Ajax possible!
alert("in ajax");
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
ajaxRequest.onreadystatechange = function(){
if((ajaxRequest.readyState == 4)){
var msg=ajaxRequest.responseText
var fld=document.getElementById("prtCnt");
alert('"' + msg + '"');
msg = msg.trim();
if(msg == "not")
{
var msg="This User Name is already taken !!!!";
fld.className="bp_invalid";
// fld.style.color=green;
fld.innerHTML=msg;
}
else if(msg == "yes")
{
var msg="This User Name is available !!!!";
fld.className="bp_valid";
// fld.style.color=green;
fld.innerHTML=msg;
}
//document.myForm.time.value = "";
//document.myForm.time.value = ajaxRequest.responseText;
}
}
var fld =document.getElementById(user);
var url="loadjsp.jsp";
url=url+"?user="+str;
ajaxRequest.open("GET",url, true);
ajaxRequest.send(null);
}
Please tell me if anybody. I am new to ajax. thanx
One thing that might make IE fail is the use of trim as a string method. If you don't have any library that adds support for trim then on IE that line will produce and exception. Try removing the trim method to see if at least something is shown on screen.
Other browsers, at least on their latest versions, support the trim method, so if that's the case you still have to figure out why the rest of the browsers are failing.
You have a missing ";" in the line
var msg=ajaxRequest.responseText
that might be causing the problem on some browsers
var url="display.php?vote="+grade;
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}
This piece of code fails to send out the request. How to create a xmlHttp correctly?
<script type="text/javascript">
function ajaxFunction()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
alert("Your browser does not support XMLHTTP!");
}
}
</script>
this piece of code is available in link text you can learn basics here like i did. hope this helps.
Here is a "80%" solution.
function GetXHR()
{
try
{
if (window.XmlHTTPRequest)
xmlHttp = new XmlHTTPRequest()
else
xmlHttp = new ActiveXObject("MSXML2.XMLHTTP.3.0")
}
catch(e) { }
}
var xmlHttp = GetXHR()
if (xmlHttp)
{
// Proceed with xmlHttp usage.
}
Edit
Note I tend to avoid the old ProgID "Microsoft.XMLHTTP" in favour of the one I have used because this later ProgID has a more predictable behaviour and is ever so slightly more secure. However if you want wider compatiblity with really old Windows machines (I'm talking out-of-support stuff) then you could use the older one in your specific case.
var xmlHttp=new(window.ActiveXObject?ActiveXObject:XMLHttpRequest)('Microsoft.XMLHTTP');