jQuery return 0 inputs in IE9 - javascript

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.

Related

Object Expected - Javascript/Jquery IE8 Error

I know this questions has been asked alot and I checked few of them but none worked for me.
I have a drop down menu using simple Jquery functions. It works perfectly fine in all other brothers , but I get "Object Expected Error" in IE8 and lower.
Here is my JS:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
$(function() {
$('#CLink').on('mouseover', function() {
$('.CContent').fadeIn('slow');
('.PContent').fadeOut('slow');
return false;
});
$('#nav-wrapper').on('mouseleave', function() {
$('.CContent').fadeOut('slow');
return false;
});
});
Tried to place my Jquery at header of the site, still no effect.
Any help is highly appreciated.
Thanks,
jQuery 2.0 (and above) do not support Internet Explorer 6, 7, and 8 (read more).
Anyway, you can use jQuery 1.x or jQuery migrate plugin.

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

Internet Explorer 7 + alert() doesn't work

Can some of you please tell me why a simple alert() isn't working using jQuery 1.4 in Internet Explorer 7, when it's working in all other browsers? It's been driving me crazy now for the last half an hour..!
$(document).ready(function(){
alert("wtf?");
})
This simple example doesn't show an alert in IE7. See for yourself at http://jsfiddle.net/8HQdp/.
Ensure your console doesn't show any errors and correct them if there are any.
Be sure you didn't disable browser prompts on IE
Try using window.alert() - it's possible (though improbable) that another alert() is conflicting with window's.
If you have console support, try console.log(alert); and see what it says. It should be something like:
function alert() {
[native code]
}
I'm using IE8 but with IE7 mode, the alert on http://jsfiddle.net/8HQdp/ still triggers.
Try changing $ to jQuery and host your own jquery.js.
And also try console.log('wtf') before alert so u know whether it's alert or document.ready is broken.
It works in IE 7 mode in IE 8 form me. Takes a while but it does trigger.
I noticed that there is a semi colon missing from the ready function. should be...
$(document).ready(function(){
}); //missing semicolon here
Also, try using the shortcut for the DOM ready function...
$(function(){
// code here
});
Try using window not document.

How can I make Jquery code work in IE

I have a script for display of Google suggestions. The script also allows to come down in the suggested list using the arrow keys. When you do so the "text" is filled within the input field. The code for this is:
$("#inp").live("keyup", function(e) {
var search_terms = $("li.current").text();
if(e.keyCode==40)
{
$("#inp").val(search_terms);
}
if(e.keyCode==38)
{
$("#inp").val(search_terms);
}
});
The complete script is over here: jsbin
The problem is that IE8 does not support "oninput" so first of all please test this in IE and replace "oninput" with "onpropertychange" which is an IE only event (so it seems) After doing that you will notice that the script does not respond proper when coming down in the suggestion list. However if you remove the above code than all works very well. But I really need the above code to function in IE, so what should I change in order to make it work properly?
update jquery to latest version :P

Categories