jQuery Advice For Dealing With Stupid Internet Explorer

It feels so good getting rid of that many long Javascript lines, sorry, ECMAscript, and playing with some jQuery and DOM. Well, at least until you meet with that browser which ignores so many web standards: Internet Explorer, unfortunately still used by a big bunch of naive users who don't know there are way better options out there.

This week I had to modify a lot of jQuery code to get it working with that horrible browser from Redmond. And the job is even harder without a tool like Firebug. Internet Explorer just spits a line number when there's an error, often without a file name, or just cryptic messages.

I refuse to install any other Microsoft application just to debug their errors, I prefer thinking, changing some code and seeing if line numbers change. It's a very old fashion way of debugging but it works.

One of the problems I found while working with Internet Explorer and jQuery involved using the html() method to change some element's content. I was able to solve this by modifying some parent() or even using remove() and then append() or after() (see jQuery docs). However, I haven't found any logic for most of these issues yet, in some cases html() worked but quite often Internet Explorer died showing a run time error.

Also, while designing a jQuery enabled calendar using an HTML table I realized that correctly using thead and tbody could make a difference. It's better to have a correctly structured table to avoid Internet Explorer complaining.

Making your web application run with Internet Explorer is not an impossible task but takes a good amount of time and can make you think about killing yourself while listening to a Steve Ballmer interview, yeah, that horrible.

I guess that many web developers, like myself, are already thinking on increasing their fees when some job requires dealing with Internet Explorer, not a bad idea, really.

Trackback URL for this post:

http://ventanazul.com/webzine/trackback/85

developer tools for IE

Hi,

For debugging under IE, you can use DebugBar (http://www.debugbar.com/) and Companion.JS (http://www.my-debugbar.com/wiki/CompanionJS/HomePage).
Those tool add some useful features to IE, similar to firebug (but not as good so far).

Hope this helps.

Regards.

JFR

A couple ideas

Hi Alexis,

For debugging in Internet Explorer, you might want to check out DebugBar. I just started using it, and it works pretty well. Also, Ajaxian recently reported that version 5 beta has some really nice new features that bring it a step closer to Firebug in terms of functionality.

On the topic of your jQuery problem, one possibility is that you're trying to inject invalid markup with .html(). I noticed this causing problems with a plugin I wrote. For example, inserting something like <div>this is a div with no closing div tag caused IE to churn. The actual html was more complex than that, but the point is that it was an incomplete DOM of sorts. Anyway, I hope this helps you a bit with your troubleshooting.

Cheers.

Indeed

Indeed, IE6 is a ECMA killer. That's because it only implements like 70% at best of the standard DOM-processing functions, not to mention there are DOM elements still a stranger to IE6. IE7 does somewhat better though it's still a headache. (I'm not even going into CSS-rant)

And yeah, I'm already negotiating a stress bonus on projects involving JS apps and IE6. Kudos to the DebugBar team, it's a long way to Firebug, but it's a damn good step.

JQUERY AND IE HELP NEEDED

Hi,

i was wondering if anyone could help.

$(document).ready(function(){
$('#thumbnails2 a').click(function(){
$(this).children('img').effect("transfer", { to: "#bigimage" },500, function() {
$('#bigimage').attr('src', $(this).parent().attr('href'));
});
$('.ui-effects-transfer').css('background-image','url('+$(this).attr('href')+')');
return false;
});
});

this code works perfectly in mozilla and safari, however it doesn't work in ie. it redirects to a blank page with only the picture that was clicked on it..

Try to view the HTML as XML

... just for debugging i wrote the ajax HTML into a text file. I found that my mistake was a not close comment.

The XML page cannot be displayed
Cannot view XML input using XSL style sheet. Please correct the error and then click the Refresh button, or try again later.

--------------------------------------------------------------------------------

A comment was not closed. Error processing resource 'file:///C:/Daten/xml_reply_action_tilg.xml'. Line 10, Position 5

Yeah, you're right...

You're right. I have a lot of coding in jQuery. My firefox works fine. Opera and Safari are fun, too, with jQuery. I didn't realize that I have to check IE... and the disaster coming.. IE didn't recognize most of my jQuery!

Doh! I just say to my client, move to another browser better than IE :)

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <h1> <h2> <h3> <h4>
  • Lines and paragraphs break automatically.

More information about formatting options