Why isn't jQuery $('.classname') working in IE? - javascript

With valid HTML the following finds the object as expected in all browsers but gets NULL in IE (6 & 7).
$(document).ready(function() {
alert( '$(.rollover):\n' + $('.rollover'));
});
I've tried by switching it to something simpler like $('a') but I always get NULL in IE.
Update:
After running the page through the W3C validator (and ignoring what my Firefox validator plugin was telling me) it appears there are actually quite a lot of validation errors (even with HTML 4 Transitional defined), which I can't easily fix, so my guess is that is the cause of my issues. As trying on a very simple document works as expected in IE.

If you're having $ conflicts there are many way to avoid this as documented here.

It seems that it is AjaxCFC's JavaScript includes that are causing a problem, more specifically the ajaxCFC util.js which seems to define it's own $.
Moving those includes before that of the JQuery lib fixed the above issues I was having.

I think we'd have to see the HTML. I've never had a problem with class selection in jQuery/IE. You should get [object Object] for the jQuery object in the alert. Also, are you using an old version of jQuery?

Related

IE 11 showing error when i clicking with jquery function

IE so much confusing me with some errors like this,
SCRIPT1002: Syntax error
File: jquery-2.1.4.min.js, Line:2 Column 2538
The weird thing is , on firefox and chrome running well and no error.
And some button with jquery click function is working.
I'm Using IE 11
Before this i'm using jquery-1.1.13.min.js and when i use jquery 2.0 it still running properly on firefox and chrome
I'm really new with cross browser so any info will helping me very much, thanks :)
For the record I had this error which only showed itself on IE when doing cross-browser testing of a big Javascript code change.
In my case the problem was a function definition which included what would be a default in any other language:
i.e. Function Foo(param1, param2, param3=false)
.. clearly this was a stupid bit of code .. but it took me a while to track down so this might help someone out there. Doesn't show up in Chrome, FF, or even Edge.
Mostly these errors are not problems of jQuery itself. The problem situates in code using jQuery or inserted into jQuery (callbacks or event functionalities). In my case I used $.ajax to load a remote page in a div element. In the page I loaded there where // comment tags in the javascript part. As IE is putting this content on one line, more code that as I wanted was commented and this created the error.
So if in our case us are using $.ajax maybe this can be an issue. Otherwise best thing to do is debugging the code that generates this error and look for code that is not supported by IE (the version you use). Look for functions passed trough to jQuery.

jQuery 1.11.1 appendChild error IE8 (Unexpected call to method or property access)

SOLVED: I was appending to SECTION tag, whereas IE8 doesn't support this tag, parsing it as text/non-closed html tag, infamous cause to halt append! so I added a condition that creates HTML5 elements for IE versions below 9, as portrayed here and the problem went away, it actually fixed a bunch of other bugs as well! http://tatiyants.com/how-to-get-ie8-to-support-html5-tags-and-web-fonts/
Sorry everyone. :(
Testing a new website I built on IE8, using jQuery v1.x (1.11.1). Using HTML5, code is validated.
I have this snippet inside a success function of an ajax function:
$('.product_details_contact_form_wrapper').detach().appendTo('#primary');
For some reason, under Chrome and Firefox it's all dandy, IE11 as well. Problem occurs when I set IE11 to emulate IE8. Then, I get a script pause and IE is complaining over appendChild in the jquery library code:
IE11(8) Inspector directs to b.appendChild(a), marked with yellow and:
"Unexpected call to method or property access." marked with red, beneath it.
Sorry for the time it took me to update this question. Ok, so the ultimate solution to this problem was adding html5shiv to my project. That's it. Ignore my previous comments.

Best way to locate source of Warning: Empty string passed to getElementById()

Warning: Empty string passed to getElementById().
Source File: chrome://browser/content/browser.xul
Line: 0
Some days ago I started getting the above message while developing my site. Things are working as they should (or at least I think they are), but I want to find out where this is coming from. I use jQuery so do not use getElementById() directly. Plus I have Firebug and the Web Developer extension for Firefox running.
I could laboriously put in code to check for an empty string being given to a jQuery selection or maybe look into jQuery itself, but my skills are minimal, so I'm asking here if anyone has offhand a good idea for quickly locating the source of the warning messages.
Source File: chrome://browser/content/browser.xul
This means that the error is in a Firefox extension, not in your code.
Was receiving this warning in Firefox.
I just came across this warning and found that there were labels for input fields but the labels for attribute was not set/empty so just completing the for attribute fixed this issue for me.
// Label's for attribute not set which caused the warning in FF
e.g. <label for=''>Text</label><input type="text" name="text" id="text" value="" />
If you are querying by '#' selector -- ensure the selector is unique (as it should be) or you will end up with this error in ff
In my case this was caused by Firefox performing HTML5 checks on the input fields on my form.
Once the "required" property was removed from the form elements everything seemed to work fine again.
This was something brought about by the MVC framework I use which generates these properties based on the model validation rules that require a field to be non-empty.
This answer was really helpful to me in finding why it was happening so I decided to share.
I've placed the following code OUTSIDE document.ready and got this error.
// Enable Line Items ONLY AFTER general info is filled out!
$( "#client_estimate_continue_next" ).click(function(e) {
//e.preventDefault();
console.log(this.id + ' click event fired.');
// DO SOMETHING...
});
I was able to fix the error by simply placing it INSIDE document.ready
Additional info:
I got the error but in my case it was coming from my own script according to FireFox.
I believe I got the error because I made a reference to the id of an element that was not yet fully rendered eg. NOT ready.
Warning: Empty string passed to getElementById().

Jquery Error in ie8 and ie9 with Wordpress theme. (Object doesnt support this property or method)

I recently launched a website for a client http://www.bridgechurch.us/ only to recieve complaints of it not displaying correctly on ie8 or ie9. I have confirmed this to be true. IE is pointing to this line of Javascript:
jQuery(function () {
jQuery(".scrollable").scrollable({circular: true}).navigator().autoscroll({interval: 7000});
[...]
Can anyone help me figure out what is wrong with this line of code?
Thank you
UPDATE - FIXED
I figured out that there was a comment before the Doctype Declaration that forced IE into quirks mode.
You have a lot of 404's on that page, mainly related to ie-specific css and border images, which is probably why the page doesn't look like it should. Files like /images/internet_explorer/borderBottomRight.png and /wp-content/themes/Moses/styles/default.css aren't loading.
That being said, looking at the scrollable documentation, there is no .navigator() function off of the return value of scrollable(); and I'm getting the same error in Chrome.
Well, visually, the site doesn't appear to work well at all in IE9 (compared to Chrome). But just looking at the code that adds scrollable() to jQuery, you can see that that function doesn't always return the original element. In your code, if you split the call into two, you might be ok:
jQuery(".scrollable").scrollable({circular: true});
jQuery(".scrollable").navigator().autoscroll({interval: 7000});
I blame the plug-in on this one: functions that extend jQuery are supposed to always return the original elements found by the selector.

Why do jQuery selectors sometimes not work in Internet Explorer

I have a very strange problem. Under some elusive circumstances I fail to apply any jQuery selector on my pages under IE. It's OK under Firefox though. The jQuery function simply returns empty array.
Any suggestions?
Page is too complex to post it here. Practically any selector, except "#id" selectors, returns a zero element array. The jQuery version is 1.2.3
What version(s) of IE is it failing under? Is it failing for a specific complex selector? I think we need an example.
Edit: Does the problem go away if you upgrade to 1.2.6? 1.2.6 is primarily a bug-fix release according to this page.
Failing that, the best way to find the problem is to create a minimum page that can reproduce the bug. Without that, it's just about impossible to troubleshoot.
Try upgrading to jQuery 1.2.6, you should be on the latest release of jQuery if you are having problems first ensure you are on the latest and greatest.

Categories

Resources