Topic
2 replies Latest Post - ‏2012-06-01T06:18:30Z by hverma
SystemAdmin
SystemAdmin
1140 Posts
ACCEPTED ANSWER

Pinned topic IE7 Ajax issue

‏2008-09-03T17:39:14Z |
I am having a strange issue with IE and Ajax. The problem is that IE7 returns a 'unknown runtime error' message when trying to use onchange on a returned Ajax select box. Here is a little more info. This is for a billing system I have built. When a user first hits the page, they select the type of payment they want to make. This is done via a select box using an onchange event to make an ajax call. This first call seems to work fine, I think that is because the first select is not being generated via ajax. After this select is made a new select box appears which allows the user to get more specific with their payment info. This new select box is the result of a Ajax call and also uses an onchange event to call other form elements based on the selection which was made. This is the failure point. In all other browsers this second select works as expected, but in IE7 I get the 'unknown runtime error' message returned. Now I am not using any sort of framework for my Ajax at all. Personally I refer to have complete control over my code and so I write it all myself. Here is my basic Ajax function.



//Browser Support Code function ajaxCall(file, query, ajaxDiv) 
{ var ajaxRequest; 
//The variable that makes Ajax possible!   

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; 
}
}
}     
//Create a function that will recieve data sent from the server   ajaxRequest.onreadystatechange = function() 
{ 

if(ajaxRequest.readyState == 4) 
{ 
//Get the data from the server's response var ajaxDisplay = document.getElementById(ajaxDiv); ajaxDisplay.innerHTML = ajaxRequest.responseText; 
} 
}     var queryString = query; ajaxRequest.open(
"GET",file+queryString,

true); ajaxRequest.send(

null); 
}


and here is the function that is failing in IE7 **(only)**


function billing_select_1(val)
{ var query = 
'?value='+val; var file = 
'modules/aj/billing.php'; ajaxCall(file, query, 
"billing1");   
}


here is an example of the way the select is setup

<select id=
"my_select_1" onchange=
"return billing_select(this.value);"> <option value=
"">----</option> <option value=
"1">Option 1</option> <option value=
"2">Option 2</option> <option value=
"3">Option 3</option> </select>   <div id=
"billing_1"></div>


And that is basically it. Keep in mind that the above select represents the second one on the page that is returned by the first Ajax call. So it seems there is some issue with accessing elements via DOM if they were added to the page using Ajax. Does anyone know of a way to correct this and make it work in all browsers?
Updated on 2012-06-01T06:18:30Z at 2012-06-01T06:18:30Z by hverma
  • SystemAdmin
    SystemAdmin
    1140 Posts
    ACCEPTED ANSWER

    Re: IE7 Ajax issue

    ‏2008-09-04T06:55:30Z  in response to SystemAdmin
    OK, I found the solution to this issue. The ironic thing is that it is actually an error that IE catches and other browsers actually seem to ignore. In any event the issue was that the form itself was not xHTML compliant. It seems that you can't replace elements inside of a form tag. Luckily in this case, the form is all Ajax, and submitted via Javascript in the end. So I removed the
    
    <form></form>
    
    tags from the form and it now works properly in IE as well as the other browsers.