IE8 does not support querySelectorAll - javascript

I tried to use document.querySelectorAll(), but IE8 throw error, that
Object doesn't support this property or method
var titleCheckBox = document.querySelectorAll("");
Here http://www.quirksmode.org/dom/w3c_core.html#t13 written, that IE8 support this method.
What I doing wrong?

Check that your page isn't in Quirks mode or Compatibility mode. You can use the F12 dev tools to confirm this. Press F12 and look in the top-right corner of the resulting window. If you see "Compatibility" or "Quirks" in the mode description, then you've found the problem.
Quirks mode: this is usually triggered by a missing or broken Doctype. If this is the case, make sure your page starts with the following:
<!DOCTYPE html>
Compatibility mode (IE7 mode): This may be triggered if you're viewing the page locally (ie running it on your local machine, eg for testing, or on your local network). In this case, you are being hit by an IE config setting that you should disable. Go to the Tools menu, and pick the Comaptibility View Settings option. Untick the compatibility options, and the page should start working.
Compat mode may also be triggered (or avoided) by an X-UA-Compatibility meta tag. If you're having trouble with compatibility mode, this is a good way to avoid it: Add the following line to your code:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Either (or both) of the above could be the problem, but my guess is that the problem is compatibility mode. The compat-mode-on-intranet-sites setting is suprisingly little known, and catches a lot of people out, even some seasoned developers.

IE8 only supports querySelectorAll() in standards mode. From MSDN:
The Selectors API is defined as part of the Selectors API specification and is only available to Web pages displayed in IE8 standards mode.
Chances are your page doesn't have a proper DOCTYPE declaration; you will need to add one.

Related

addEventListener not working with IE 11 based Client Base Application

It says - Object doesn't support property or method 'addEventListener'.
- jquery-1.11.1.min.js
- jquery-migrate-1.4.1.js
I'm using client base application (https://www.clientbaseonline.com), which is supported only by Internet Explorer.
Everything works fine chrome and IE-11 as well but when I run the project in client base application which is kinda i-frame of IE 11, I get the above error.
I have tried this fix but it doesn't work.
Please help me with this. Thanks!
What document mode are you in?
If you press F12 what do you see in the emulation tab?
If you aren't in at least docmode 9, you don't have access to that.
Take a look at this stackoverflow post about addEventListent
So if you are using a XUA Compatible Meta tag, then you need to check to see if you are running in either Compatibility View or EnterpriseMode, as they can take precedence over the meta tag.
The good thing about the emulation tab in the console is it will tell you WHY you are in a specific document mode. If you are in Enterprise mode, you will need an exception to your sitelist.xml. Or if you are in Compatibility View. You will need to edit the settings. Hold alt then click on the tools menu. Then select compatibility view and remove the site from the list.
Thanks Alex for you help! It did helped when I got my mode to turn "Edge" which actually was not default(default was 9). I also added this meta tag <meta http-equiv="x-ua-compatible" content="IE=edge"> before in my site.master.
But Then I read somewhere that I have to put that meta tag at top of the all the meta's and just after the title in . So now its working fine even though I don't turn my compatibility mode to Edge. Obviously the mate tag overrides the mode. Still issue arises when using jquery 3.2.1 (latest) and got working in jquery version 3.2.0.
Strange! If any one has view to share please acknowledge here.

Setting IE9 to edge mode without X-UA-Compatible (d3.js)

I'm developing a data visualization page for an intranet using d3.js. The page needs to render in Internet Explorer, which causes trouble since all the intranet pages are rendered in quirks mode. This makes IE throw an error when loading d3: SCRIPT5009: CSSStyleDeclaration is undefined, which then prevents the rest of d3 from loading.
The page works as intended when rendered by by other modern browsers or by IE9 in standards mode, so I believe quirks mode is the problem.
Other limitations, and things I've tried that don't work:
The page is served by a templating system (IBM Cognos) I don't have control over. Setting <meta http-equiv="X-UA-Compatible" content="IE=edge"> is therefore not an option, since I can't modify the header.
Setting the equivalent tag in the HTTP header is also not possible.
If I add a meta tag to the <body>, the only part of the page I have any control over, IE will ignore it.
IE's F12 tools claims it's in document quirks mode, although the browser itself is in IE9 compatibility mode. Changing the document mode manually causes the intranet site to reload the page and navigate back to the parent page. I have no idea why.
Unchecking "Display intranet sites in Compatibility View" in the compatility view settings does nothing.
At the moment I can think of two ways to solve this: either force IE to render in standards mode, or somehow rewrite d3.js so as to avoid using CSSStyleDeclaration, which causes the crash in the first place. I have no idea how to proceed for either of these.

Conditional Doc Type for Internet Explorer

I have an issue with my application as it's working on IE 8 and IE 11, as few of my customers are using IE8 and few are using IE 11. I am getting some layout related issues which are coming because of doctype tag.
When I add this doctype tag in my master page my layout distorted in IE 8, but works fine with IE 11
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Similarly when I remove this tag it works fine for IE 8 but not in IE 11.
Firstly, check the mode that the browsers are using to show the page. All versions of IE from IE8 come with a dev tools window that can be opened by pressing F12. This will show you what mode the browser is using. If it's anything other than "IE8 Standards" (for IE8) or "Edge" (for IE11) then you need to ask yourself why.
Knowing what mode the browser is in will help you a lot in deciphering the problem.
Regarding the doctype, there is only one rule here: always always always include a doctype. You should not be writing HTML pages on today's web that don't have a doctype at all.
If you don't have a doctype, then IE (all versions, and other browsers too) will put the page into "Quirks mode". This will cause issues with your page layout, and will cause it to work differently across different browsers (even across different versions of the same browser). Quirks mode should be avoided wherever possible, and thus you should always have a doctype.
If you have a choice of which doctype to use, consider using the HTML5 doctype: <!DOCTYPE html>.
In theory, pretty much any (valid) doctype you use should work the same: ie to put the page into standards mode. The doctype you're using is the XHTML Transitional doctype. This should be fine, but equally the HTML5 doctype should also work fine too, and the simpler doctype string lowers the possibility of a typo making it invalid and breaking the page.
The doctype must be the very first thing on the page. No comments or white space before it. This can cause some versions of IE to see the doctype as invalid.
With a valid doctype in place, you should no longer be getting Quirks mode showing as the mode in the dev tools.
The next thing to do is run your HTML code through the W3C Validator. This will return details of any HTML syntax errors you may have in your code. Errors that show up here are often the kinds of things that cause cross-browser weirdness, so you should fix anything that is reported in the validator.
If IE's browser mode is showing as Compatibility mode, there are a number of reasons why this could happen, but you can generally deal with that by making sure your HTML <head> contains the following line:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
The 'edge' setting tells all versions of IE to use their best available rendering mode. You should never need to use any other value for this flag unless you have a very specific reason to use a particular compatibility mode.
For further reading, I've written a detailed article explaining how to keep IE in standards mode and why that's a good thing.
I hope this helps.
Try to put X-UA-Compatible meta tag on <head>. It will make IE render html with the lastest layout engine.
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

IE testing Javascript "Browser Mode" "Document Mode" Driving me NUTZ! Is it a browser compatibility issue or what is going on

Need an intervention here, as I am pretty much losing my mind on this 0_o
I am using IE 9 and am using IE's F12 developer tools, trying to test for IE8.
I am performing a pretty simple task with JavaScript.
I am grabbing some inner html - using it as a sting for whatever reason.
Like this:
<div id="Some_Container_div">
<div class="Some_Inner_Div_Class">sometext</div>
<div class="Some_Inner_Div_Class">sometext</div>
<div class="Some_Inner_Div_Class">sometext</div>
</div>
<script>
var Div_Contaiers_Inner_Html_As_String = document.getElementById('Some_Container_div').innerHTML;
alert(Div_Contaiers_Inner_Html_As_String);
Array_Of_Divs = Div_Contaiers_Inner_Html_As_String.split("</div>");
alert(Array_Of_Divs);
</script>
The above code properly alerts:
First:
<div class="Some_Inner_Div_Class">sometext</div><div class="Some_Inner_Div_Class">sometext</div><div class="Some_Inner_Div_Class">sometext</div>
Then the second alerts the proper array:
<div class="Some_Inner_Div_Class">sometext,<div class="Some_Inner_Div_Class">sometext,<div class="Some_Inner_Div_Class">sometext,
If I now use the developer tools (f12) and switch to "Browser Mode" IE8 and I switch the "Document Mode" also to IE8 the browser now alerts :
First:
<DIV class=Some_Inner_Div_Class>sometext</DIV><DIV class=Some_Inner_Div_Class>sometext</DIV><DIV class=Some_Inner_Div_Class>sometext</DIV>
Notice the missing quotes now?
Notice the capitalization of the words 'DIV' now?
And next it alerts the same thing:
<DIV class=Some_Inner_Div_Class>sometext</DIV><DIV class=Some_Inner_Div_Class>sometext</DIV><DIV class=Some_Inner_Div_Class>sometext</DIV>
So it looks like it is not even splitting the string into an array now - not sure why, like it was not a string anymore.
If I now use the developer tools (f12) and keep "Browser Mode" IE8 and I switch the "Document Mode" also to IE9 - it works fine again....
So thanks so much for confusing me again Bill Gates 0_O
Anyway - so I looked through here for help - I see some people saying you should switch both "Browser Mode" to IE8 and "Document Mode" also to IE8 when testing with developer tools - but I do not see an explanation I understand as to why. and what is the difference if you switch just one or both.
In the mean time:
Can anyone tell me if this is going to work properly in IE8?
Why it is stripping the quotes out?
Why is it not creating the array in developer tools testing mode?
Thanks to all : )
Short answer:
It's a compatibility issue. The JScript 5 engine (IE7/IE8) was severely flawed, and this is one of the things it does (stripping the "s from attributes and altering capitalization when generating an innerHTML string). As well, because innerHTML screws with capitalization, it's trying to match your .split("</div>"); against a string containing </DIV> and failing.
Try using .split(/<\/div>/i); instead. This won't solve the loss of "s from your attributes, but it's a partial fix. See this answer for a function that appears to fix missing quotes and capitalization if the quotes are necessary.
In the larger issue of how to test against older versions of IE:
In essence, the Browser Mode doesn't do anything to how Internet Explorer renders the page1. Browser mode influences how IE acquires the page, changing the UserAgent sent to the server.
Document Mode changes which version of the Trident rendering engine, and whether the IE9 Chakra Javascript engine or the IE8/IE7 variants of the JScript engine are used.
TL;DR, for testing purposes you should change the Browser Mode to IE8, then observe whether the Document Mode defaults to IE8 Standards or Quirks. If the code is not working, toggle between the two. If the code then works, make sure you're setting an appropriate DOCTYPE for whichever mode works (Transitional for Quirks mode, Strict for Standards mode).
[1] Browser Mode also influences how the browser interprets conditional comments, and the default Document Mode (makes it match the Browser Mode), so changing only this is a good way of figuring out how IE8 will interpret the page... but this behavior breaks quickly if you have X-UA-Compatible Meta tags, so if you're using those, just set Document Mode to match.
It's a pity but "IE8 Browser Mode" and IE8 are realy different things :/
I think that this code will work fine in IE8.
By the way, you can use free IETester tool, that is much better then "browser modes".

Incorrect DIV height in IE only if app accessed with server name

I have very strange problem specific to IE (confirmed in v8 and v9).
When using jquery to determine div height with:
$('#sys_MainPage').height()
This code returns cca. 260 in Chrome, Firefox and IE (only if I access application using IP address). But, if I access application using server name and IE 8/9, calculated height is 853?
I'm using jquery 1.4.2.
What could be the cause? Is there any proper reason for this weird behaviour?
EDIT:
Problem is caused with different compatibility modes:
Site is accessed using IP address:
Browser mode: IE8
Document mode: IE8 standards
Using server name:
Browser mode: IE8 compat view
Document mode: IE7 standards
I solved this with web.config edit but I still don't understand why is browser/document mode different depending on entered url?
Your site is switching to compatability mode when it is being viewed from one of these locations.
You can find a way here Force IE8 *not* to use Compatibility View to force it not to switch. However I would still test this in IE7 and make sure that it is not broken for that.
Pretty much what you need to specify is this:
You can override this behavior by using a meta element to specify an X-UA-Compatible http-equiv header, like so:
<meta http-equiv="X-UA-Compatible" content="IE=edge" > or
<meta http-equiv="X-UA-Compatible" content="IE=8" />
As for why it is broken - we would need to look at the site to do that there are hundreds of reasons why.
Hard to tell without your CSS/HTML, but try:
.outerHeight()
http://api.jquery.com/outerHeight/
It is difficult to say without source code.
First use the ie's debbuger and check why the height is so big.
Maybe a css bug of ie is causing this.
Second try setting your height on windows load event
$(window).load(function(){
alert($('#sys_MainPage').height());
});

Categories

Resources