Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

querySelectorAll alternative for IE

I'm running some javascript which uses this:

controls = document.querySelectorAll("input,textarea,button");

It should work on IE 9 (which is the version that the developers and the client use). But in our project we use some really old web components that only work properly on compatibility mode. And querySelectorAll only works on standards mode from what i found after some research.

Is there any alternative?

EDIT: it works fine on Chrome and FF

like image 788
Joao Victor Avatar asked Aug 23 '13 13:08

Joao Victor


2 Answers

querySelectorAll works fine in IE9. It even works in IE8.

But it sounds like your problem is getting it to work specifically in quirks mode or compatibility mode.

If that's the problem then... well, the problem is the mode, not the feature. You need to get the site into standards mode, and then querySelectorAll will work.

The whole point of compatiblity mode is to make the browser emulate an older version of IE. The main way it does this is by disabling all the features that have been added since that version.

So basically what you're saying is "I've switched off half the features in my browser, how can I get one of those features working again?"

And the obvious answer is: switch the features back on again.

The way to do that is to make sure the browser is in standards mode.

You need to do two things:

  1. Make sure you have a valid doctype, so you can avoid Quirks mode. If you don't have one, add <!DOCTYPE html> to the very top of your code (above the <html> tag).

  2. Add the IE standards mode meta tag somewhere in your <head> element:

    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    

    This will force IE to use the best mode it has available -- so IE9 will be in IE9 standards mode, etc.

You should make sure both of the above are in all pages in your site.

[EDIT]
You mention that you're relying on an old component that only works in compatiblity mode.

The basic answer is that you're not going to be able to use querySelectorAll in the same site where you're stuck with compatibility mode. And there's a lot of other modern browser features you'll be missing out on too.

If possible, you should try to upgrade that component, or fix it to work in modern standards mode.

If you really can't get out of compatibility mode, then you are pretty much stuck.

Your only real option in this case is to switch to using a library like jQuery that has its own selector engine built in.

If you've already written your site without using jQuery, then it's a pretty ugly thought to have to rewrite everything to use it, but that's probably the only option you have.

like image 178
Spudley Avatar answered Sep 29 '22 03:09

Spudley


Well, after some search, i ended up using this:

if( navigator.userAgent.indexOf("MSIE") != -1 ) {                    
   controls = document.getElementsByTagName('input');
}else{    
   controls = document.querySelectorAll("input,textarea,button");
}

It works. I'll do some more testing hoping that it will work xD.

like image 33
Joao Victor Avatar answered Sep 29 '22 03:09

Joao Victor