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.

Join the conversation

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 :)

Thank you, thank you, thank

Thank you, thank you, thank you. I was using an id tag under table, worked in firefox fine, not in ie. Switched to using tbody instead, worked a treat. Again, thank you.

Don't you think its kinda

Don't you think its kinda stupid to not download a Microsoft tool to debug Internet Explorer yet be ok with downloading a Firefox extension to debug Firefox?

That's a good point. I think

That's a good point. I think you are right, if it's valid to download a Firefox only tool for debugging on Firefox then it should be ok to do the same with Internet Explorer.

Firebug is a free extension for Firefox, I'm not sure if that's always the case with debugging tools for Internet Explorer.

Uhh.. the two of you above my

Uhh.. the two of you above my comment are missing the point.

IE fails horribly at following standards. This isn't a debate about justifying Firebug as an extension. I'd prefer Opera or Chrome above anything mentioned in previous comments!

Point is, I'm google'ing how to fix a jQuery issue in IE, after having sorted out a CSS nightmare with IE failing to implement 90% of the CSS standard set of selectors.

Even IE 8 is trash, in this light. I was hoping more from MS with IE8. Even though it's still in beta, it's the incarnation of Dread.

Thanks for the blog post, by the way.

With hard to find bugs it's

With hard to find bugs it's also usefull
to check your code at http://www.jslint.com

It's a bit *nal, but it does help.
Sometimes a missing ; can make IE loose itself.

This is because IE is running

This is because IE is running the $(document).ready() before the rest of the page is actually rendered. If you move this function to the bottom of your page, it should be fine.

Thanks for the article.

Thanks for the article. Helped me realize that it wasn't my code, but IE being incompetent.

Man that tip rocks! Ive been

Man that tip rocks!
Ive been banging my head against loads of jQuery not working in IE. Ive moved my scripts to below the body tag and they all work perfectly. Go buy yourself a beer and pretend it's from me!

I hate IE, but I love your

I hate IE, but I love your funny comments about it :)

thanks matt! but there r

thanks matt! but there r still some problems like if we include some needed variables in ready.function, script says document_root is undefined!

For me it was citype not

For me it was citype not class that was reserverd in ie, and of course no explicit error message, i changed it to mycitype and that work now

thanks to all of you

What is stupid is that, not

What is stupid is that, not only jquery, but css and every other web technology works fine in EVERY browser but IE. MS should be sued for STUPID!

Hi, I'm facing he same

Hi,

I'm facing he same problem for using 'html()' function in IE only.

Can you guys help me out?

You are all missing the point

You are all missing the point here.

JQuery is a javascript framework, right?

Its main function is therefore supposed to be IRONING OUT all the WRINKLES between all the popular browsers.

What you all appear to be saying is JQuery does not do that job particularly well.

Yah i just start using jQuery

Yah i just start using jQuery a couple days ago... and i tested it in Chrome, Konqi, Safari, Opera, Firefox, and Internet Explorer FAIL!. in internet explorer it stopped loading so i look in the bottom bar for an error box and found one. then i looked in the address bar. there was a box that stated "this website has outdated content. please click here to run in compatibility mode" i clicked it and it loaded fine. facepalm

IE debug bar is again as dump

IE debug bar is again as dump as IE itself. It has the name "Debug Bar" but i does not support java script debugging. I am getting into the habit of hating Microsoft Products.

To debug java script they will not feel shame to recommend you to purchase visual studio.

Kelly - try changing to IE7

Kelly - try changing to IE7 emulation mode to overcome the ie8 issues; Just add this line in the head of your html page. This way your users won't have to manually change to compatibility mode for the js errors to go away.

This is an IE specific fix, and won't impact any other browsers buy IE > 7.

I can't say as I have had any problems calling $(document).ready() in the head in IE. Maybe this is due to running in IE7 Emulation mode? At any rate, this discovery saved me....hope it helps.

Mike

You are 100% right about one

You are 100% right about one thing that developers should increase their fees if they have to make a web application for internet explorer too. Because it's an extra work, like two versions of same application. Oh! May Allah save us all from IE.
Ameen !

You don't need to download

You don't need to download anything extra for IE8. Just press F12, or Tools --> Developer Tools. It's gotten me out of several jams.

Working on a beta app. Every

Working on a beta app. Every browser works, and Oh.... there comes IE. And in IE sometimes it works, and sometimes it doesn't.

As it's a beta, just added a message:

"This app does not yet work in Internet Explorer. It does in other browsers."

I'm not taking the responsibility for that hunk of junk browser. It makes me look bad as a programmer. Well, I am already this crap for 3 hours. Just for IE. And how am I to see where things go wrong? No error messages displayed. No nothing. Sometimes it works, sometimes it doesn't.

I hope all visitors to the app switch browsers.

It is not a web standard if

It is not a web standard if not all web browsers implement that standard, and it is certainly not a web standard if 80 % of the user base uses a web browser which is not compliant with it! What is happening is that we developers get punished because mozilla and windows wants a goddamn style war. Seriously, when they set the web standard, why did they not set it after ie? That way we could have avoided all this "multi browser" compliant bs.

Just to satisfy stupid

Just to satisfy stupid clients who want to keep using IE version 6 to 8 in the 21st century because they have no clue whatsoever about what versionning and technology means. I have to spend hours mending screens to look nice on IE when it takes me a few minutes on FF, Saf and Chrome.
Microsoft, you are an obnoxious bunch of fools.

well i think Internet

well i think Internet explorer new version is better than all. but as an SEO guy i am not comfortable to use it.because some seo software like seoquake and search status toolbar and google global are not compatible with this.
what do you think?
SEO

i have been given a work to

i have been given a work to chk why a page is not working right in IE...the problem is that the page is left aligned in IE7, but works perfectly in all other browsers (even IE8). also the drop down menu doesnt work in IE7...

i have been bangin my head on the code for 3 days...and hey m a fresher so thrs one problem.

I found that sometimes in IE

I found that sometimes in IE you just have to wrap the objects you want to perform a .html() on in an extra layer of

<

div> tags and it works.

i just use .empty() and

i just use
.empty()
and then
.append('new value')

instead of .html('new value')

works like magic on all browsers.

jQuery(document).ready(functi

jQuery(document).ready(function( $ ){
//borrowed from jQuery easing plugin
//http://gsgd.co.uk/sandbox/jquery.easing.php
$.easing.backout = function(x, t, b, c, d){
var s=1.70158;
return c((t=t/d-1)t((s+1)t + s) + 1) + b;
};

$('#screen').scrollShow({
view:'#view',
content:'#images',
easing:'backout',
wrappers:'link,crop',
navigators:'a[id]',
navigationMode:'sr',
circular:true,
start:0
});
});

hi this is the code and not proper work in IE browser. Please help me. Images are displayed in proper sequence in mozila but not in IE. Please reply me ASAP.

Guys, it's unfair to say IE

Guys, it's unfair to say IE is rubbish (unless your talking about IE6) as it is the most secure browser around. you can't argue that as the Chinese government tested all browser engines to use for their own country and only IE passed the test. Basically never do your banking in Firefox, Safari and definately not chrome :)

It is a proper hassle to optimise for, however all expert front-end developers can optimise for IE in their sleep, so if your having issues, remember, a good workman never blames his tools.

Yes it drives me nuts to

Yes it drives me nuts to build a great looking site...only to find out I have to "dumb it down" in order to play nicely with Internet Explorer. Updating to IE9 made everything play nicely, however I can't expect the majority of clueless people out there to know this, so they walk away thinking...."gee that site looked odd".

Great example, check out DesignerBabyWebsites.com , look at it in IE7 IE8, and it looks all weird, pulls several errors on the page, doesn't load up the youtube video or the vimeo video, then pull it up on firefox, chrome, safari and it looks proper...sigh very frustrating.

Charge more for supporting

Charge more for supporting IE? That's like a mechanic crying and saying we should charge more for cars with 4 wheels, that'll force more people to use those easy to fix 3 wheelers.

Maybe if JQuery was better written it wouldn't be an issue. After all, you are complaining about a third party library not working in the worlds most widely used browser.

I'm no fan of IE but I wouldn't lay all the blame for this at IE's feet.

The valid html suggestion

The valid html suggestion when using jquery fixed my problem. I forgot to close my span tag when I was using .after()

I agree with the previous

I agree with the previous poster about the fact that you can't possibly charge more for using the most popular browser, even if it is a big stinking pile of horse poo!

However, I would lay about 99.9% of the blame with IE as they seem to feel that, because they are Microsoft, they are exempt from following standards that have been internationally agreed and accepted.

I guess the logic within the IE development team is "we have spent so long building this crap that we don't want to have to go back and do it properly - it might cost some money, and we only make a few billion a year... times are hard."

Personally, I wish all new PCs shipped with either Firefox or Chrome as the default browser, but until Google buy out Microsoft I don't think that will happen........

Give it a couple of years though! :)

Really working with internet

Really working with internet explorer is bit difficult. But this post makes it easier. Thanks.
Hydroxatone
Max Burn
Douglasville bankruptcy lawyers

Keep your comments relevant, written in good English and don't spam. Let's create useful and valuable discussions. Markdown is welcome.

Add your comment