Solved

AJAX problems with IE

Posted on 2008-10-19
13
265 Views
Last Modified: 2013-12-08
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

0
Comment
Question by:Seppoo
  • 6
  • 4
  • 3
13 Comments
 
LVL 1

Expert Comment

by:ctyler86
Comment Utility
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.
0
 

Author Comment

by:Seppoo
Comment Utility
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.
0
 
LVL 1

Expert Comment

by:ctyler86
Comment Utility
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.
0
 
LVL 19

Expert Comment

by:LordOfPorts
Comment Utility
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.
0
 

Author Comment

by:Seppoo
Comment Utility
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..
0
 
LVL 1

Accepted Solution

by:
ctyler86 earned 250 total points
Comment Utility
Try using "createElement".
0
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 19

Expert Comment

by:LordOfPorts
Comment Utility
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

0
 

Author Comment

by:Seppoo
Comment Utility
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

0
 
LVL 19

Expert Comment

by:LordOfPorts
Comment Utility
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

0
 

Author Comment

by:Seppoo
Comment Utility
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.
0
 

Author Comment

by:Seppoo
Comment Utility
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..
0
 
LVL 19

Assisted Solution

by:LordOfPorts
LordOfPorts earned 250 total points
Comment Utility
It is somewhat unusual. Your web page is loaded before the AJAX interaction begins, correct? Try adding &nbsp; between the span tags.
<span id="lista">&nbsp;</span>

Open in new window

0
 

Author Comment

by:Seppoo
Comment Utility
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..)
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now