I am completely befuddled by this and can not seem to come with a reason why or how to resolve it.
My situation is pretty simple:
I have a page that contains 4 panels that change visibilty based upon user interaction. (For example clicking button A would reval panel A and hide all others.)
Now everything works fine with this portion of the UI but a request came down to add functionality that would return a list of data based upon user input without causing the screen to refresh, so I implemented a simply Ajax routine that returned the necessary data to the UI and it works great.
My problem is this: if I simply click the buttons that control the all the different panels everything works as it should. If I go down and type into the text box that is wired to the Ajax event it works as it is intended BUT after I have executed my Ajax routines if I click on a button that attempts to unhide a panel (hence causing the server to post back) IE throws an error saying that it has encountered a problem and needs to close.
Here are the pertinent Ajax routines:
Code:
var req = false;
function Initialize(){
req = false;
if(window.XMLHttpRequest){//Mozilla, Safari, etc
req = new XMLHttpRequest();
if(req.overrideMimeType){
req.overrideMimeType('text/html');
}
}
else if(window.ActiveXObject){//IE
try{
req = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e){
alert('An error has occured with IE XML Request');
}
}
if(!req){
alert('Cannot create XMLHTTP instance!');
return false;
}
}
function SendQuery(key, panel)
{
Initialize();
var url='/MetroParks/VolunteerAjax.aspx?k='+key+ '&panel=' + panel ;
if(req!=null)
{
req.onreadystatechange = Process;
req.open("GET", url, true);
req.send(null);
}
}
function Process()
{
if (req.readyState == 4)
{
if (req.status == 200)
{
if(req.responseText==""){
HideDiv("autocomplete");
}
else
{
ShowDiv("autocomplete");
var parentElement = document.getElementById('autocomplete');
try
{
parentElement.innerHTML='';
parentElement.innerHTML=req.responseText;
}
catch(e){
var wrappingDiv = document.createElement('div');
wrappingDiv.innerHTML = '';
wrappingDiv.innerHTML = req.responseText;
parentElement.appendChild(wrappingDiv);
}
//document.getElementById('autocomplete').innerHTML = req.responseText;
}
}
else
{
document.getElementById("autocomplete").innerHTML=
"There was a problem retrieving data:<br>"+req.statusText;
}
}
}
I am assuming that this has something to do with the XMLHttp object but, problem is, I can't seem to find any information on Google about this problem.
Any help here would be greatly appreciated.
Thanks!
-Doug
================================================== =========
Read this if you want to know how to get a correct reply for your question:
http://www.catb.org/~esr/faqs/smart-questions.html
================================================== =========
.: Wrox Technical Editor :.
Wrox Books 24 x 7
================================================== =========