jquery ON event not firing in IE8 - javascript

I made this jsfiddle to demonstrate what I am meaning, but unfortunately JSfiddle itself doesn't seem to work with IE8 so you need to test this jsfiddle code in a stand alone page:
http://jsfiddle.net/4Bdbn/
With IE8 the above ON events does not fire, absolutely nothing happens. even adding an alert("hi") to the function does nothing; it doesn't get called, plus no errors are reporting in the console.
On a side note, is e.preventDefault() necessary to prevent a function being executed multiple times when you have multiple events triggering the same function, such as .on("touchstart click",....? In all situations?
jQuery version 1.8.3 so I believe IE8 is a supported browser.
ps. Im using IE10 in Browser Mode IE8.
EDIT: My simple test page which is not working in IE8 (for me):
http://www.personaltrainer.com.au/test.php
The relevant code section is...
<script type="application/javascript">
$(document).ready(function () {
$("body").on("click touchstart",".something",function(e) {
$(this).text($(this).text() + " "+e.type);
e.preventDefault();
});
});
</script>
Thanks!

You're using an invalid type attribute (application/javascript) on your script tag. Change it to text/javascript or simply remove it all together.
This works just fine in IE8 (real version)
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("body").on("click touchstart",".something",function(e) {
$(this).text($(this).text() + " "+e.type);
});
});
</script>

maybe you should remove the touchstart event first to check if it works! IE8 actually dosn't support touch action!
$(function () {
$("body").on("click",".something", function(e) {
$(this).text($(this).text() + " " + e.type);
//e.preventDefault();
});
});

Related

The "document.ready()" function not firing on Chrome Mobile (android)

I have jQuery-2.1.4.min.js called before the tag, but when I write something like:
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
alert('hi, world.');
});
</script>
On my PC it is fired of course, but on ten different Android devices it just does not. This is purely HTML/CSS/jQuery rendered site (no phonegap, or anything).
My goal was to have a button do ajax request after it's being tapped, but I can't even test that, because the .ready() function is not firing at all on mobile chrome.
The jQuery is being served from the official CDN, any help would be very much appreciated.
Tried both:
$(function() {
alert('hi, world.');
});
And
jQuery(document).ready(function() {
alert('hi, world.');
});
Same thing.
As suggested I also tried:
window.onload = function()
{
if (window.jQuery)
{
alert('jQuery is loaded');
}
else
{
alert('jQuery is not loaded');
}
}
And it alerts 'jQuery is loaded'.
As per jQuery docs it says: "Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute" - which would mean that DOM is not ready for JavaScript code to execute? But when I try like:
<script type="text/javascript">
alert('hi world');
</script>
It executes on mobile Chrome.
Okay, after extensive investigation it seems that JS breaks on mobile chrome if you have document.ready() function twice, I had one in my core.js file and one in-line on the page.
It works okay on PC (all browsers), but on mobile it works up to the point of second ready() call and breaks all JS after that.
Hopefully this saves some time to others in the future.
JS breaks on mobile view becouse same js use multiple time in file. Check and remove redundancy.

$(window).load() in IE?

Recently I ran into a mysterious problem that IE (6-8) is keeping throwing me an error. I don't know if this is the problem, but I think it is.
Open up the F12 developer tools in a jQuery included website, enter
$(window).load(function(){
alert("Wont able to see me");
});
And an error will popup:
"Unable to get value of the property 'slice': object is null or undefined"
Did I do anything wrong, or anything else???
I recently found a work-around for IE not recognizing $(window).load()...
window.onload = function() {
alert("See me, hear me, touch me!");
};
This is a little different than $(function(){}) as it executes after all elements are loaded as opposed to when the DOM is ready.
I recently implemented this in another project and it worked wonderfully.
For anyone still running into this, IE11 (only one I tested) does not fire the the load event if the listener is inside of the jquery ready function. So pull the load function outside of the ready function and it will fire in IE11.
//this is bad
$(() => { //jquery ready
window.onload = () => { //wont fire in IE
cosole.log('window loaded');
}
});
//this is good
$(() => { //jquery ready
cosole.log('dom ready');
});
window.onload = () => { //will fire in IE
cosole.log('window loaded');
}
The latest jQuery (1.7.1) with IE10 and IE9 does not produce such an error for me.
As a side note; If you wish to execute something when the dom is ready;
Try this way;
$(function(){
alert("Wont able to see me");
});
I believe this is the standard convention for attaching a function to domready event.
Reference: jQuery Documentation

$(window).focus() runs twice for each focus

I'm not sure why this happens and I would love to get an explanation.
Using jquery's focus method I bind to the window focus event.
This is a working example (copy paste into a html file and open in a browser. Doesn't work in jsfiddle or jsbin, for some reason)
<!DOCTYPE html>
<html>
<head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script></head>
<body>
<p1>Here:</p1>
<div id="here" >Why</div>
</body>
<script>
$(window).load(function() {
$(window).focus(function() {console.log("focus");});
$(window).blur(function() {console.log("blur");});
});
</script>
</html>
When the browser regains focus the function runs twice and 'focus` is printed into the console twice.
Any idea why this happens?
The end goal, btw, is to stop a timer from running whenever the user leaves the browser to an app or another tab.
UPDATE
Running on the latest (dev) version of chrome. I'll test it on firefox and write if it's different there.
UPDATE 2
Interesting fact - Doesn't happen on firefox. Maybe its a bug with chrome.
I had this same problem. My fix for this was using lodash's debounce() function (https://lodash.com/docs/#debounce). This was my fix:
var debouncedFocus = _.debounce(() => {
console.log('focussed');
}, 250, {leading: true, trailing: false});
$(window).on('focus', debouncedFocus);
live() has been deprecated. Use on() instead.
$(window).on("focus", function(){ alert("focus!"); });
You could try using the live() function.
$(window).live("focus", function(){ alert("focus!"); });
Maybe load() is called twice? You can register these events without .load(). Try this:
<script>
$(window).focus(function() {console.log("focus");});
$(window).blur(function() {console.log("blur");});
</script>
Which browser ? Seems to run fine for me.
As a precaution, you can use a javascript variable to make it run only once.
<script>
var isFocused = false;
$(window).load(function() {
$(window).focus(function() {
if(isFocused)
return;
console.log("focus");
isFocused = true;
});
$(window).blur(function() {
console.log("blur");
isFocused = false;
});
});
</script>
If you're simultaneously using Underscore, you can use the _.debounce() method to clamp down repeated events to a single event.

Dropdownlist change event not working in IE9

I have this piece of code, that just refuses to co-operate, I've tried to look over the syntax, tried .change, .click events, nothing works, I am trying to alert the user, if the function works, nothing.
Heres the Javascript code:
$('#ProductNamesList').change(function () {
alert('JQuery works!');
});
And the HTMLHelper that generates the drop down list
#Html.DropDownList("ProductNamesList", New SelectList(Model.ProductList))
Can someone please help? I can't test it in other browsers, due to our requirements here -.-
For the record, I am using jquery-1.6.4.js and jquery-ui-1.8.16.js
Try this
$(document).ready(function() {
$('#ProductNamesList').live('change', function (event) {
alert('JQuery works!');
});
});
Looking at your live demo, it seems the problem is with the use of name="#sel". The correct notation is id="sel".
If you insist on use of name attribute, use jQuery selector [name="sel"]. Also note that the hash sign is redundant in attribute value.
I don't see anything wrong with it, the following worked for me in Firefox and IE8 (don't have IE9 available here).
#Html.DropDownList("ProductNamesList", new SelectList(Model.ProductList))
<script type="text/javascript">
$('#ProductNamesList').change(function () {
alert('JQuery works!');
});
</script>
Is the masterpage hooked up properly, and the reference to jquery correct?
I have tried the following code and it works.
<form action="">
<select id="sel">
<option>AUDI</option>
<option>Axel</option>
<option>BCS</option>
<option>BIBO</option>
</select>
</form>
<p id=result>
And the javascript:
$(document).ready(function() {
$("#sel").change(function () {
alert("JQuery works!");
});
});
When I try it at your live demo, I am getting error $ is not defined. I have created a jsfiddle which also works fine.
http://jsfiddle.net/rtFUs/
So all you have to do is to make sure that you are adding jquery correctly and the id of the select box is "mySelectBoxId" and you reference it using #, for example $("#mySelectBoxId"), that's it.

jQuery .hover not working in Safari or Chrome

I am currently trying to make some jQuery hover effects render correctly in all browsers. For the moment, firefox, IE, opera all do what they are supposed to. However, Safari and Chrome do not.
The code looks like this:
<div id="button1">
<div id="work_title" class="title_james">
WORDS
</div>
</div>
<div id="button2">
<div id="work_title" class="title_mike">
MORE WORDS
</div>
</div>
and the script effecting it looks like this
<script>
$(function() {
$("#button2").hover(
function() {
$("#james").css('z-index', '100')
$(".title_mike").css('width', '590px')
}, function() {
$("#james").css('z-index', '')
$(".title_mike").css('width', '')
});
});​
$(function() {
$("#button1").hover(
function() {
$(".title_james").css('width', '785px')
}, function() {
$(".title_james").css('width', '')
});
});​
</script>
what I am trying to get it to do is change the css styles two elements on hover over two large areas of text..
I have tried the mouseenter .addClass and mouseleave .removeClass thing and that didn't work at all.. so when I got this to work in firefox I was all happy... then I did cross browser checking and I got sad again..
You can see it live in action at:
http://roboticmonsters.com/who
Using the dev tools in Chrome it says there is an invalid token at the end of each of the javascript functions. The IE dev tools shows an invalid token too, but it seems to ignore this and render correctly. Check your source and remove the token, if you can.
IE:
Chrome:
$.css takes an object:
$("#james").css({'z-index': '100'});
Note the curly braces and colon (not comma).
This is so you can specify several css rules in one:
$("#james").css({'z-index': '100', 'height': '100px'});
If you are getting the value of a css rule, just pass in the name as a string:
$("#james").css('z-index'); // returns 100
It's possibly because you are trying to bind to those events before the DOM has loaded.
I didn't have much time to give you an answer as to why it was broken, but the following works for me in chrome.
$(document).ready(function() {
$("#button2").hover(function() {
$("#james").css('z-index', '100');
$(".title_mike").css('width', '590px');
},
function() {
$("#james").css('z-index', '');
$(".title_mike").css('width', '');
}
);
$("#button1").hover(function() {
$(".title_james").css('width', '785px');
},
function() {
$(".title_james").css('width', '');
}
);
});
if just use the code below it works fine:
$("#button2").hover(
function() {
$("#james").css('z-index', '100')
$(".title_mike").css('width', '590px')
}, function() {
$("#james").css('z-index', '')
$(".title_mike").css('width', '')
});
Otherwise Chrome reports: Unexpected token ILLEGAL. To see this yourself, right-click on the page and choose inspect element. Click the small red x in the bottom right.
Update: actually your code works fine if you remove the illegal character as shown in #anothershubery's answer

Categories

Resources