I am loading jQuery UI from google's cdn. It works in every browser that I have to support (IE8+) except IE9. I'm getting a strange error on page load in the jQuery UI code at this line (line 249 in the unminified version):
$.support.selectstart = "onselectstart" in document.createElement( "div" );
The error is:
SCRIPT438: Object doesn't support property or method 'createElement'
The code to include it is
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js">
</script>
I've looked at the 'document' object in the debugger, and it appears to have createElement defined (as expected).
I finally discovered the problem. I have no idea why it's happening, but for some reason there is a scoping issue document in IE9 isn't the document you'd expect it to be.
The behavior can be seen here: http://jsfiddle.net/esn2v/8/
with(block = document.createElement('div')) {
with(detaildiv = document.createElement('div')) {
alert('test');
}
}
It works fine in any browser except IE9. If you open it in IE9 no alert happens, and you can look at the console to see an error regarding document.
It doesn't happen if you just include jquery and jquery UI like here: http://jsfiddle.net/uRFz5/
<script src=
"//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
My app must just be a perfect storm that causes this issue to happen.
Related
Using the latest version of the FireFox (40.0.3) on Mac:
Run the following code:
$(function() {
var $sc = $('<script id="tempScript" type="text/template"/>');
$("body").append($sc);
$("<div><h3>Hi</h3></div>").appendTo($sc);
});
Then in the console run:
$("#tempScript").html()
Actual result:
result is "undefined"
Expected result:
It should have returned: "<div><h3>Hi</h3></div>"
This is very serious problem and has effected a lot of our web applications functionality. Basically has broken a lot of pages of our applications.
Is there a workaround for this?
We would have to use Javascript to generate the dynamic content.
UPDATE:
I changed the script tag to a hidden DIV and Firefox started to respond. This is a good workaround for the time being, but I am surprised why Firefox would not handle the situation correctly when script template is used.
Turns out Firefox does not handle dynamically added script text/template tag and cannot return its HTML content in Javascript (Chrome and Safari work fine).
I changed the script tag to a hidden DIV and Firefox started to respond. This is a good workaround for the time being, but I am surprised why Firefox would not handle the situation correctly when script template is used.
I have got the below error when loading in Safari 5.1.7 for windows.
The error is as below:
TypeError: 'undefined' is not a function (evaluating 'div.cloneNode( true ).click()')
When drill deeper down to jquery 1.11.0 source code, it was pointing to the code below in bold:
// IE9-10 clones events bound via attachEvent, but they don't trigger with .click()
support.noCloneEvent = true;
if ( div.attachEvent ) {
div.attachEvent( "onclick", function() {
support.noCloneEvent = false;
});
**div.cloneNode( true ).click();**
}
I am using ASP.NET MVC 5.2. It seems that the JQuery failed to be loaded in Safari.
Any idea on why? Thanks!
This is weird. This error only happened in Safari 5.1.7 for Windows.
For some reason, I need to put JQuery script before other scripts even though that other scripts do not use JQuery.
This is resolved by putting JQuery script on top before other scripts.
Thanks.
I have the same problem, but I resolved with simulate.
Sample:
// Triggering a native browser event using the simulate plugin
$( "a" ).simulate( "click" );
Simulate events to help unit test user interactions. I try putting JQuery script on top, but not work for me.
I've an anchor in an Asp.Net user control. I've wired some code to the onclick event. For some reason in Internet Explorer 10, the event is not firing. The markup is structured as
where myFunction is a simple JavaScript function. For those who want to see the page in action, here is the link:
http://alt.thedominion.ca/TheBrokerAdvantage/LocateABroker.aspx
Any help is greatly appreciated!
The problem is with your server side code, not the browser or JavaScript.
If you check the JavaScript console in IE10 you will see the following error when clicking the link:
SCRIPT5009: 'ValidatorValidate' is undefined
Which points to the second line in the function:
function doSearch() {
var regExValidate = document.getElementById("ctl00_BrokerSearchMiddle_ctl00_ValidPostalCode");
ValidatorValidate(regExValidate);
var postalCode = $find("ctl00_BrokerSearchMiddle_ctl00_PostalCode").get_value();
if (regExValidate.isvalid && postalCode.indexOf("e.g") == -1) {
document.location.href = "?postalCode=" + postalCode;
}
}
This means the onclick is working just fine, you simply have JS error.
Now the question is why ValidatorValidate exists in other browsers (even IE9) but not in IE10. Well, in IE10 the script where it's being defined is not included, meaning the server never put the line <script src="..."> with that URL as part of the output to the browser.
I can only guess that the server side code is checking the browser version and according to that include certain scripts. Check that code and get rid of such things as it's never a good idea.
After some research I found what's going on. You are using Sitefinity version 3.7 to build your site (according to this question of yours) and as officially stated here:
I want to inform you that unfortunately Sitefinity 3.7 does not support Internet Explorer 10 and your Sitefinity 3.7 might not work properly with this browser version. Apologies for the inconvenience
You will have to upgrade your Sitefinity if you want IE10 support.
The below code works on every major browser (I just tested it on IE10, IE9, Chrome 26.0.1410.64, and the latest firefox release).
click me
<script type="text/javascript">
function myFunction(){
alert("Anchor was clicked");
}
</script>
In other words, your syntax is fine, but the anchor tag simply will not appear without inner text unless you use CSS to force a width and height.
CSS option:
a{
display: block;
width: 100px;
height: 20px;
}
Working CSS Example
Okay, this is by far the weirdest bug I have ever encountered. It's pretty straightforward though. If I load jQuery and then jQuery mobile dynamically in any version of Internet Explorer, the actual IE window minimizes. This happens in all versions of IE through IETester, however, if I run the full version in IE9, it kicks compatibility mode and for some reason doesn't minimize.
I've tried various ways of loading the scripts (commented in the example code), all resulting in the same behaviour.
Why is this happening? Is there a way around it?
http://jsfiddle.net/Xeon06/RCsuH/
This is a known issue in jQuery mobile. The offending line is jquery.mobile.navigation.js:913.
// Kill the keyboard.
// XXX_jblas: We need to stop crawling the entire document to kill focus. Instead,
// we should be tracking focus with a live() handler so we already have
// the element in hand at this point.
// Wrap this in a try/catch block since IE9 throw "Unspecified error" if document.activeElement
// is undefined when we are in an IFrame.
try {
$( document.activeElement || "" ).add( "input:focus, textarea:focus, select:focus" ).blur();
} catch(e) {}
There's the call to blur() that's sending IE windows to the back of the stack.
As a workaround, you can avoid this by placing the script tags physically in the <head> of the HTML.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery-1.6.2.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
...
Placing the script tags elsewhere in the document or inserting them via script triggers the bug.
This Fiddle demostrates the workaround in action. Note that this only works in a top-level document. If the document is in an <iframe>, the bug will still appear. Thus, if you open the JSFiddle editor in IE 7/8, it will still get sent to the back; but if you open just the rendered HTML, it will not.
My attempt at "fixing" it: http://jsfiddle.net/RCsuH/6/
#josh3736 was almost exactly right, somewhere in the code it is firing off a document.body.blur() which causes the minimization of the window.
My fix simply replaces that function with a no-op function. I was unable to get the script tags to fire an onload when they finished loading, so replacing the function (if necessary) is left up to you.
However all of this seems to be a bug in the jQuery Mobile library, and thus you should probably file a bug report with them. However, I'm not sure it will bother them too much that there is a bug on IE for a framework that is intended for mobile phones/tablets.
Note: This is horrible, horrible code that replaces native functions. If it is possible, don't use this.
Here is a site which I am designing http://ogunsteel.com/eurotech-new/
I am designing this site for last 3 weeks and almost I checked it in 5 browsers Firefox, IE, Chrome, Opera and Safari. All things were going well but today IE stopped showing the main slideshow of the homepage which shows in all other browsers.
IE shows some javascript errors which I am not understanding.....
Addition:
A strange things happening here when I tried with IE8.....when I load the page using IE8 sometimes it shows nothing and sometimes it shows that the page is loaded but some error and the error is " 'imagearray[...].3' is null or not an object" in tab-home.js Line: 41, Char:1
and here is the error code line of tab-home.js file....
if(setting.imagearray[i][3]&&setting.imagearray[i][3].length>setting.longestdesc.length)
setting.longestdesc=setting.imagearray[i][3]}
var slideshow=this
jQuery(document).ready(function($){var setting=slideshow.setting
setting.$wrapperdiv=$('#'+setting.wrapperid).css({position:'relative',visibility:'visible',background:'#444',overflow:'hidden',width:setting.dimensions[0],height:setting.dimensions[1]}).empty()
The error I m seeing in IE8 is
Error: jQuery is undefined
and the error is caused by hoverIntent.js
I've see the source code of your site and I see the hoverIntent.js is included before the jQuery library JS, and it could be a potential problem.
Place the jQuery before all the scripts which uses the jQuery object