We Keep Coding

simple jQuery function not working in some browsers

I'm building a site where a user has to agree to terms and conditions. The checkbox is enabled after scrolling to the end of the box. Here is the code:
<script type="text/javascript">
$(function() {
$('#rules_box').scroll(function () {
if ($(this).scrollTop() >= $(this)[0].scrollHeight - $(this).height() - 15 ) {
$('#iagree').removeAttr('disabled');
}
});
});
</script>
This works in most browsers. However some refuse to work. Even if I just have
$('#iagree').removeAttr('disabled');
by itself without scroll conditions. This page is running many other javascripts that are working.
Some said it didn't work on their Mobile, and one said it didn't work on Firefox although it worked on my Firefox.
Is jQuery too finicky to work? Does this mean I have to do it another way?
EDIT:
you're quick to mark as a dupe, but this question hasn't been answered yet.
Problem persists in same select browsers, see updated code
$(function() {
$('#rules_box').scroll(function () {
alert('something');
$('#iagree').prop("disabled", false);
});
});
Does not fire alert or change checkbox state

For checkbox elements, you should use .removeProp() instead of .removeAttr()
$('#iagree').removeProp('disabled');
Also see: https://api.jquery.com/removeAttr/ and https://api.jquery.com/attr/

Please use
$('#iagree').prop("disabled", false);

Use .prop('disabled',false) instead of removeAttr('disabled').
related question

jQuery return 0 inputs in IE9

I having a strange problem. I am working in Parallels to test a site in IE 9 on Windows 7.
My setup is jQuery 2.1.1, Bootstrap 3.2.
I was validating a form with Parsley which if course worked well in Chrome, but did nothing in IE. When testing further I realized the DOM wasn't even updating at all. So I stripped it out down to just this to see what was happening:
$(document).ready(function()
{
console.log('ready')
/*
The form submit handler
*/
$('.submit').click(function(){
fields = $('#promo-form').find(':input');
console.log($(fields).length)
});
});
Chrome Console:
ready
15
IE 9 Console (with F12 Developer Tools)
LOG: ready
LOG: 0
I can get IE to recognize some simple selectors like $('input'), $('form') but cannot use jQuery methods to find a collection. All works just fine in Chrome on the Mac.
Any ideas here?
Thank you
Rich

Have you tried :
http://jsfiddle.net/dhyjwg4L/
Just tested in IE 10 / 11, don't have an IE9 machine to hand.
$(document).ready(function () {
alert($("#promo-form :input").length);
});
If you didn't want textareas / buttons remove the : before the input, and they wont be counted.
$('#promo-form').find(':input');
//Combine the selector to make
$("#promo-form :input")
UPDATE : Have now tested this on IE 8-11, and is working on all of them.

JQuery UI autocomplete NOT WORKING with Chrome on mac OSX

That's really really weird.
In the web app I did (look here), thanks to cloudant guys for free hosting, I finally implemented Jquery UI Autocomplete widget.
I'm using backbone as a framework.
What is really really weird is that IT WORKS WITH EVERYTHING (even IE9!) except CHROME on apple OS.
What I have is that no dropdown list appears when clicking on the text input field.
Chrome on a different OS wokrs (e.g. on win7).
This is the code I use to implement the widget, I report her ejust for the sake of completeness, even if I suppose that that the problem I have DOES NOT depend on the code.
$(select).on("click",function(){
var valori=["ex1", "ex2", "ex3"];
$(input).autocomplete({
minLength: 0,
source: valori,
focus:function(){
},
select:function(event, ui){
var categoria=$(select).attr('value');
var valore=ui.item.value;
self.model.set({category:categoria, value:valore});
//~ console.log(self.model);
return true;
}
}).focus(function() {
$(this).autocomplete("search", "");
});
});
---- UPDATE ------
I made a comparison btw chrome running on ubuntu and chrome running on macosx.
The result is that under ubuntu, the DOM element gets created (before closing the body tag), while under macosx the DOM element IS NOT created at all.
It looks like under macosx the onclick event is not catched.

I found a really helpful post here
Why does select box on mac chrome doesn't respond to click event?
Basically, it is a bug of chrome under OSX.
As #JamWaffles explains in its answer,"IIRC, the click event works for s in Firefox, however does not work in Chrome. The best, most supported event is change." and it turns out to be completely true!!
So the working code for my webapp is:
$(select).change(function(){//**************CHANGE AND NOT ON('CLICK', ... *******
var valori=["ex1", "ex2", "ex3"];
$(input).autocomplete({
minLength: 0,
source: valori,
focus:function(){
},
select:function(event, ui){
var categoria=$(select).attr('value');
var valore=ui.item.value;
self.model.set({category:categoria, value:valore});
//~ console.log(self.model);
return true;
}
}).focus(function() {
$(this).autocomplete("search", "");
});
});
Hope this answer is useful for somebody else.

Why does ContentFlow fail in Firefox, IE when I try to combine it with jFlickrFeed?

Here's a working example of ContentFlow using three static images hard-coded in HTML: http://dl.dropbox.com/u/27409695/WB-Browser/example.html
It works in FF, IE8, Safari, and Chrome.
I tweaked this page a little to make it pull in a Flickr feed using jFlickrFeed. It works great in webkit browsers (Safari, Chrome), but fails in FF or IE. See below for the specific errors.
http://dl.dropbox.com/u/27409695/WB-Browser/example-jflickrfeed.html
Here is the document.ready handler I'm using:
<script>
jQuery(document).ready(function($) {
$('.flow').jflickrfeed({
limit: 3,
qstrings: {
id: '60829137#N05'
},
itemTemplate:
'<img class="item" src="{{image_b}}" />'
}, function() {
var wbFlow = new ContentFlow('wbContainer', {
circularFlow: false,
startItem: 0
});
});
});
</script>
Any idea why this isn't working?
UPDATE: Just wanted to add some info in case it might help anyone help me. Firefox and IE both seem to choke on line 1652 of contentflow_src.js. Firefox throws the following error when I attempt to move the slider: "this.items[index] is undefined"
IE says of line 1652: "'this.items[...].label' is null or not an object"
Additionally, IE complains about line 1119: "'this._activeItem.index' is null or not an object"
But, again, Chrome and Safari don't throw any errors and the scripts work flawlessly in those two browsers.

I've been working on this for a while now and I hit on a solution.
As shown above, I was creating a new CF object in the jFlickrFeed callback, but that wasn't working.
Instead, I removed the CF tag from the head of the document. And instead of making a new CF object in the callback, I dynamically load the entire ContentFlow script:
function() {
var script = document.createElement('script');
script.setAttribute('src', 'contentflow.js');
script.setAttribute('type', 'text/javascript');
document.getElementsByTagName('head')[0].appendChild(script);
});
See how it works here: http://dl.dropbox.com/u/27409695/WB-Browser/example2-jflickrfeed.html
There are problems to this approach, though. For one thing ContentFlow does a lot of its own dynamic loading (addons, stylesheets, etc). Using my method above, some those functions break (especially in Internet Explorer), requiring alterations to the contentflow.js script.
If you're interested in seeing how I altered the script, take a look here: http://dl.dropbox.com/u/27409695/WB-Browser/contentflow_src_modified.js

Click event not worked in Firefox

I am using a jquery click function:
Button code
<input type="button" id="myButtton">
Jquery code
$(document).ready(function () {
$("#myButtton").click(function () {
alert("Mybutton");
});
});
This code works in Internet Explorer but does not work in Firefox.
What am I doing wrong?

In the code:
$(document).ready(function(){
$("#myButtton").click(function(){
alert("Mybutton");
});
I believe it's missing another closing brace:
$(document).ready(function(){
$("#myButtton").click(function(){
alert("Mybutton");
});
});

My best guess is that you have other input with the same ID? Try using classes instead, or use jQuery's CSS selector like $('input[type=button]') instead.
I'd also recommend installing FireBug plugin for FireFox if you haven't done so already (http://www.getfirebug.com/). It'll help you debug JavaScript issues like this, and a whole lot more.

Are you sure that element has an id attribute? Or does it have only a name attribute with a value of "myButton". In order to work cross browser the id attribute is mandatory, whereas name is optional (only IE and Opera AFAIK).
N.B.: My answer may seem idiot, but it was not the original poster that added the code example in the question (view edit history).