Link to home
Start Free TrialLog in
Avatar of Seppoo
Seppoo

asked on

AJAX problems with IE

With firefox, the page works fine, but with IE (I've tried 6 and 7) id does not.. occasionally it will go through, but spesifically if I refresh the page, or click one listed link, and then come back (in menu "Tuoteluettelo"), I get the error Search did not succeed (in finnish though, but I included als a english translation here to the scriptcopy). Another odd thing (not about this error though) is that the site is very slow with IE, while OK with firefox.. but that's another problem :)
Here is the codeblock where it comes from:

function categoryStateChanged()
{
        	try
		{
 
			if (xmlHttp.readyState == 4){
				if (xmlHttp.status == 200)
				{
					if (xmlHttp.responseXML)
					{
						  var xmlDoc = xmlHttp.responseXML;
						  var textData = xmlHttp.responseText;
						  document.getElementById("lista").innerHTML = textData;
					}
					else
					{
						//do some error reporting
						alert("xmlHttp.responseXML does not function");
					}
				}
				else if(xmlHttp.status == 404) {
					alert("Requested file not found");
				}
				else {
					alert("Error has occurred with status code:"+xmlhttp.status);
				}
			}
		}
		catch (err)
		{
			//more error reporting
			alert("Haku ei onnistunut Search didnt succeed");
		}
}

Open in new window

Avatar of ctyler86
ctyler86

I didn't really understand your question, however, I did notice you were trying to load your ajax response into the innerHTML of an element. I would like you to know, innerHTML is not fully supported by IE, where it is supported by FireFox.  I had a problem populating a drop down select box using innerHTML the other day, so innerHTML is the culprit.
Avatar of Seppoo

ASKER

I tried to comment the innerHTML-line just to see if I still get the error message, and I did, so it was not problem here (at least the one causing the error)

What I am trying to do there is to load a list from database, and that part of the script is giving me error with IE - the error coming from try-catch (I get the last alert-message). With FF it works fine.. The link to the site where that happens is at the tags-information in the question above.
Oh, Well your readyState is not ever reaching "4", so thus the fail in your try catch. I don't see anything else wrong with the code.

This most likely is a problem with your PHP, or whatever language you are using to do your processing.
The only reason for a potential exception would be that categoryStateChanged is called but xmlHttp is null, try surrounding the code within the try { } block with:

if(xmlHttp) {
    if (xmlHttp.readyState == 4){
    ...
}
else {
    alert("xmlHttp is NULL");
}

Try also adding an alert above each if statement to see what the last action is prior to the exception being raised.
Avatar of Seppoo

ASKER

I played with a while, and now it seemed to have couple of problems - with http readyState (which, I believe is working now), and moreover the innerHTML that ctyler86 pointed out. It seems that it is working sometimes - for some odd reason - but most of the times is is not working..
Do you have any suggestions what to use instead of innerHTML to get it function in both IE and FF? The goal is to put the php-exportted HTML-list to certain part of page. If I recall right I did try something else when wrinting that code (some while ago), but for some reason only thing I got to work (then) was that innerHTML.. but obviously it is problem here..
ASKER CERTIFIED SOLUTION
Avatar of ctyler86
ctyler86

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
What type of HTML component is the element with ID "lista"? Does your returned data have any new line or carriage return characters? IE might have an issue if the data contains \n or \r so you could filter it in PHP before sending it over.

Another suggestion to try is replace the catch block with the following to see if you see additional information:
catch(err)
{
    alert(err.description);
}

Open in new window

Avatar of Seppoo

ASKER

I am currently evaluatin both answers.. The code I have there now is below. THe id-tag I am pasting it to is simply:
'<span id="lista"></span>'

The code that comes from http.responseText is HTML - it contains table inside a div-tag.

What I got so far from your advices: using createElement causes IE not give error: IE cannot open the site.
With alerts I saw that it did traverse all the lines (including insertBefore) until it got the error.
If I chage that insertBefore -line to:

container.appendChild(newdiv);

I does load the page, but with original error - dropping to catch-part. The error it gives me (with LordOfPorts code) is: 'null' is null or not an object
and that is caused by that line I wrote just above (container.appendChild(newdiv); (I tested it by putting alerts after every line)

Any suggestions to get further?
var http;
 
function lataaListat()
{
	try
		{
			if (http.readyState == 4){
				if (http.status == 200)
				{
					if (http.responseText)
					{
						var newdiv = document.createElement("div");
						newdiv.innerHTML = http.responseText;
						var container = document.getElementById("lista");
						document.body.insertBefore(newdiv, container);
					}
					else
					{
						alert("http.responseXML does not function");
					} 
				}
				else if(http.status == 404) {
					alert("Requested file not found");
				}
				else {
					alert("Error has occurred with status code:"+http.status);
				} 
			}
		}
		catch (err)
		{
			alert(err.description);
			alert("Haku ei onnistunut");
		}
}

Open in new window

Sounds like it has an issue with finding the element with id "lista", try checking if it exists:

if(document.getElementById("lista")) {
    alert("Lista exists.");
}
else {
    alert("Lista does not exist.");
}

If the issue is indeed with the element not existing you might try appending the new element you created to the body element itself:


var newdiv = document.createElement("div");
newdiv.innerHTML = http.responseText;
document.body.appendChild(newdiv);

Open in new window

Avatar of Seppoo

ASKER

To clarify more what seems to be problem now:
the line

var container = document.getElementById("lista");

some how causes that container will be NULL with IE but not in FireFox.
There is no another tag with same name or ID. Just to be sure I changed it - without any luck affecting the error. I also double checked the case sensitivity.
Avatar of Seppoo

ASKER

Heh, I posted my second line just at the same time as your suggestion.. but anyway, I tried now also what you suggested, and it supports that what I just wrote there:

with IE I get "Lista does not exist"
while with FF "Lista exists"

As I have understood the only (that I know of) difference between the two is that IS thinks name and ID attributes are the same, and that it is case-insensetive. However, as the name change nor case-checking did not solve this, I am again out of ideas..
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Seppoo

ASKER

the space there did not solve the problem, but I moved the initial functiont call after that span-tag, which finally helped IE to find it. Previously the process was started before that tag.

The IE still yells about slowness of script, but even still a IE / FF -problem, it is not anymore the actually the problem of my question in this thread. If needed I will soon open another thread abou that :)

Anyway thank you both for your answers, they both helped me to find solution. so I'll try to give you both the points (I am reletively new here so I hope I'll succeed doing that..)