IE11 JQuery error? - javascript

I have code that works fine in Firefox and Chrome but not in IE 11. I'm getting next error messages:
1) SCRIPT5009: '$' is undefined
For this line of code:
$.extend({
)}
2)SCRIPT5009: 'jQuery' is undefined
// Browser globals
factory( jQuery );
3)SCRIPT1010: Expected identifier
.catch( function( error ) {
jQuery.readyException( error );
} );
Here is my header tag with all includes:
<head>
<script type="text/javascript" src="jquery/jquery-3.1.1.js"></script>
<script type="text/javascript" src="jquery/jquery-ui.js"></script>
<script type="text/javascript" src="jquery/JQuery_alert.js"></script>
<link rel="stylesheet" type="text/css" href="jquery/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="jquery/jquery-ui.structure.css">
<link rel="stylesheet" type="text/css" href="jquery/jquery-ui.theme.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
I found that if I open my dev tools in IE and then in the upper right corner click on the Document mode and switch to Edge my code with all the includes above works fine. So my question is what is Edge? How I can make sure that someone else using IE will not have the problems running my page? Is there the way to fix that? Thanks in advance.

Compatibility View
When Internet Explorer runs in compatibility view, it emulates older versions such as IE8 which is incompatible with the latest version of jQuery (only the 1.x versions of jQuery are compatible with older versions of IE).
Checking if Compatibility View is the Problem
When you hit F12 in Internet Explorer, it should bring up the Developer Tools. Near the top right of the toolbar, you should find a drop down that lets you switch between Edge, 10, 9, 8, 7, and 5. Switching it will cause the page to refresh using the new document mode. If you switch to Edge and you still get the jQuery errors, then you can rule out compatibility view as the problem.
Making sure the page won't be displayed in Compatibility View
Check the documentation here regarding specifying document modes for Internet Explorer: https://msdn.microsoft.com/en-US/library/jj676915.aspx
You can also try to force IE11 to display in Edge mode by inserting a <meta> tag into the Header of your HTML (it should be the first tag within the Header) like so:
<html>
<head>
<meta http-equiv="x-ua-compatible" content="IE=edge">
...
This instructs Internet Explorer to explicitly use that document mode.

You can also experience issues if your jquery references are stored in a .jspf file that is referenced as an include. IBM Websphere will cache the jspf's in a temp folder on the server and they will not be replaced even with a ear/war deploy. It is necessary to remove those files from the temp folder.

Related

Zebra Datepicker UI does not pop up on icon click (Internet Explorer 9)

I am trying to use zebra datepicker library in my project. I have followed the instructions here and written the following codes:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="assets/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="assets/Zebra_Datepicker-master/public/javascript/zebra_datepicker.js"></script>
<link rel="stylesheet" href="assets/Zebra_Datepicker-master/public/css/metallic.css" type="text/css"></link>
<script type="text/javascript">
window.onload = function(){
$('#calendarValue').Zebra_DatePicker();
}
</script>
</head>
<body>
<div id="calendarContainer">
<input type="text" id="calendarValue"></input>
</div>
</body>
</html>
This results into a yellow icon attached to a text field with the id 'calendarValue', and the icon loads a calendar when gets clicked. I am getting the expected result in chrome, firefox and internet explorer 10 and 11.
While it is mentioned by the developer (Stefan Gabos) of zebra, that following strict doctype () makes it compatible with IE6+, and the example html's in zebra datepicker package also works fine to load the datepicker on IE9 particularly, my codes does not load the datepicker UI when I test it on IE 9; only the yellow icon gets attached to the text box and the calendar UI does not open when the button is clicked. It can be seen I did use doctype in my code so it should have been a problem to get the UI with old versions of IE, but that is not so in my case. Screenshots are given below:
I am a noob in web developing, and I cant figure out what is wrong here.
Hope everything is explained in detail this time.
Actually the problem was my company has policy to render intranet sites in compatibility view in IE which was causing troubles here. I used edge meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=EDGE">
which is forcing my site to load in default standard mode in IE and fixed my issue.
Hope it would help noob people like me in the dark

window.close not closing window in HTA application

In my HTA application I'm using a JavaScript calendar window, it opens using window.open() and closed using window.close(), when the user clicks on one of the dates. This calendar works fine on multiple browsers and versions over more than 10 years. It even works in HTA applications most of the time.
However on specific workstations running IE11. The window.close() command is simply ignored, resulting in the window left open. On other IE11 workstations it works fine. I figured that turning off the "Enable Protected Mode" checkbox on IE11, Internet Options, Security tab resolves the problem on one of the problematic workstation. However, other workstations works fine with this setting turned on and turning off this setting is not an acceptable solution.
Code sample which reproduces the problem:
HTA application
<HTML>
<HEAD>
<HTA:APPLICATION ID="OpenCloseExample" BORDER="thick" BORDERSTYLE="complex"/>
<TITLE>Open Close HTA container</TITLE>
</HEAD>
<iframe width="1024px" height="768px" src="http://localhost:28080/openclose.html"/>
</HTML>
openclose.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Main Page</title>
<script src="openclose.js"></script>
</head>
<body>
open
</body>
</html>
openclose.js
var win;
function openWindow() {
win = window.open("", "_blank", 'width=250,height=250,status=no,resizable=no,location=no,top=100,left=100');
win.document.writeln("<html><head><script src='openclose.js'></script></head><a href='#' onclick='javascript:window.opener.closeWindow()'>close</a></html>");
}
function closeWindow() {
win.window.close();
}
I can't see this working in any IE with any settings. The problem is this string: <script src='openclose.js'></script>. That is, a literal ending script tag in a string works as an ending script tag on a page, when HTML parser will find it. This means, that your script was never loaded.
To fix this, you've to break the literal tag, for example like so:
<script src='openclose.js'><\/script>
Since you have pointed out that IE11 is causing the JS not to work, you can force IE to render in an older version very easily.
<meta http-equiv="X-UA-Compatible" content="IE=9">
This meta tag is very popular amongst HTA applications for utilizing JS/ActiveX methods/properties within specific IE versions (most of them being deprecated).
For more information, visit the X-UA-Compatible Tag Wiki
Hope this helps
I figured this out eventually.
Changing:
open
to:
open
Has resolved the problem

IE8 site keeps going into Quirk mode with JS added into the page

We have a site that's running perfectly in all browsers except IE8.
What happens is that it falls into Quirks mode forcefully by the browser due to the reason unknown to me.
And yes, it breaks the site really bad.
What's more weird is that it adds somekind of JS on its own to the code (when checked through View Source.
This is what it's showing:-
<SCRIPT language="JavaScript">
<!--
document.cookie = "IV_JCT=%2Fapchannel-lop; path=/";
//-->
</SCRIPT>
<!DOCTYPE html>
<html lang="en">
<head profile="http://www.w3.org/1999/xhtml/vocab">
<meta http-equiv="x-ua-compatible" content="IE=Edge"/>
...
The <SCRIPT> in the start is not added by me and is being added by IE8.
I have tried the following
First line <!DOCTYPE html> and then right after <head>, I wrote <meta http-equiv="x-ua-compatible" content="IE=Edge"/>
Adding respond
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
Nothing works.
Any idea how I can stop this and just force it to load with IE8 standard mode?
Thanks
The problem is that you're adding the script before the <!DOCTYPE>.
The doctype must be the very first thing on the page, otherwise IE will go into quirks mode. (even blank lines at the top of the page have been known to affect this)
Move your script somewhere else in the page, ideally inside the <head> element, and ensure that you have valid HTML markup, and the problem will resolve itself.
IE 8 will not mangle HTML like that. Something else must be responsible.
From AJAX techniques within a Tivoli Access Manager WebSEAL Environment:
Junction cookies
Issue
When you create a WebSEAL junction using the -j option to enable
junction cookies, special HTML code is inserted at the beginning or
end of the HTTP response that sets the correct cookie path in the
browser (the location determined by the -j option). Generally, the
returned page will look similar to that in Listing 11.
Listing 11. Example of junction cookie insertion
<SCRIPT>
document.cookie = "IV_JCT=%2Fjunction_name";
</SCRIPT>
<html>
<title>Example page </title>
<body>
Rest of the document...
.
.
.
That's a pretty specific bit of JavaScript (Debugging tip: When weird variable names show up in your code and you don't know where they came from: Type them into Google), so its a reasonable bet that this is what is responsible.
It doesn't sound like there is a work around, so your options seem to come down to:
Stop using IE 8. It is unsupported by Microsoft and no supported operating system that can run it can't be upgraded to a newer version of IE (they could also be upgraded to a non-IE browser).
Stop using WebSEAL (or at least WebSEAL junctions using the -j option) since it invalidates your HTML.

Tryied window.open with Ajax, window.print not working (IE9)

I'm trying to open new window and send form data with javascript and jquery-1.8.3.
With Bernhard's help I succeeded to call a new window with page for print.
(Thank you so much Bernhard. window.open and sending form data not working)
But, window.print() function does not working in IE9! (FF, Chorme do well)
I refreshed the page, then IE9 calls window.print()
Here is source code.
Print this
<script type="text/javascript" src="/common/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function printPage(){
$.post('/common/print.jsp', {view:$("#ctn").html()}).success(function(response){
var oWindow = window.open('', "printWindow", "width=700px,height=800px");
oWindow.document.write(response);
oWindow.print(); // I added this line. But IE9 not working.
});
}
</script>
Is there something I missed?
Try this one:
$.post('/common/print.jsp', {view:$("#ctn").html()}).success(function(response){
var oWindow = window.open('', "printWindow", "width=700px,height=800px");
oWindow.document.write(response);
oWindow.document.close();
oWindow.focus();
oWindow.print(); // I added this line. But IE9 not working.
});
checkout this:
Using HTTP Headers to Force Standards View in Internet Explorer 8 and Above
You can also use meta tags to force standards mode. The X-UA-Compatible meta tag tells Internet Explorer what view mode to use or emulate.
By setting this meta tag, you tell IE to use standards mode even if there are comments or an XML declaration above the DOCTYPE. You determine what version of Internet Explorer can best view the page, and then set the meta tags to define that version.
IE 7:
<meta http-equiv="X-UA-Compatible" value="IE=7">
IE 8:
<meta http-equiv="X-UA-Compatible" value="IE=8">
IE 9:
<meta http-equiv="X-UA-Compatible" value="IE=9">
If a customer comes to a page with a view mode higher than it supports
(e.g. an IE 7 browser viewing a page asking for IE8 view mode), it
will ignore the tag and render the page the the mode it would have
without the tag.
More info find here: http://webdesign.about.com/od/internetexplorer/qt/force-compatibility-view-in-ie.htm

Update IE Doc Mode to latest version using script/ Tag

I have a requirement to update IE mode to latest version. How to know the latest version of IE using script?
I can use META tag but in meta tag we need to mention the browser version. If i mention the browser version as IE9, what if the end user user browser version is IE8?
<meta http-equiv="X-UA-Compatible" content="IE=9" />
I want to know the end user browser version and set the doc mode (If the user browser version is IE8/IE9, set doc mode as IE8/IE9)
how to achieve this?
Thanks in advance :)
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
The value edge means "using as recent a version as possible".

Categories

Resources