jQuery is adding a strange attribute to html elements - javascript

In internet explorer 8, emit strange jquery attributes that sometimes can cause problem and when I need to select them, the selector won't work.
I don't know if this is related to my rendering problem, but I've never noticed it before, in IE8 or any other browser. Can someone explain what these attributes are?
sizzle-1377765392290 ="[object Object]"
also it creates unique id for each element
i.e: jQuery110201441698622493836
https://www.dropbox.com/s/e5l0r9weht23mhn/Ie8.PNG
Thanks You

See the answer here, jQuery uses it to attach event handlers etc in IE.: https://stackoverflow.com/a/16341470/1371408

As i can see in this bugs.jquery.com/ticket/8539 that sizzle cache bug was fixed in 1.7 version of jquery .
And as per your comment you included older version of jquery 1.1.0 so updating it to latest release of jquery will solve your issue .

You can remove this by,
var re = /\s*(sizset|sizcache)\d*="[^"]*"/gi;
source = source.replace(re,'');
http://jsfiddle.net/mblase75/fMdVc/
Alternatively, jQuery has a .removeAttr() method, but you'll have to apply it to specific tags:
jQobj.removeAttr('sizset').removeAttr('sizcache');
Have a look

Related

jquery version conflict in 1.8 to 1.11

i want to use a plugin in my website. but in website already used 1.8 version of jQuery and my plugin is 1.11 version. now its conflicting. please tell me what should i do. there is some types of error message come up
it says $. something is undefined
and it also says $.() is not a function.
so that it the problem please anybody help me.
You should update your website to use v1.11.2 and only load that version. There are virtually no API-breaking changes from v1.8 to v1.11, the only thing that was actually removed was the toggle(function,function) event hookup (not the toggle show/hide function, which is still there).
There were deprecations:
In 1.8
In 1.9
In 1.10
...so best to check those lists and see if you're using any of those, but they haven't been removed yet (with the exception I mentioned above).
jQuery is mostly backwards compatible. Instead of loading v1.8 and v1.11, just load v1.11. You're plugin will probably still work.

Issue with IE8 and querySelectorAll() returning an element with only the opening HTML tag

My webpage is not rending the content in the <main class="page-content"></main> tag in IE8. I am using the backbone.js framework, and I have a view appending elements onto the page. I also using html5shiv.
The first elements append just find (a navigation bar and all its elements); however, IE8 throws an error when it tries to append the .page-content element. I have traced the issue to an inconsistency in jQuery's find method. In IE8 only, when performing a .find('.page-content') on a DOM containing the tag, the method returns an element with the .outerHTML property set to <MAIN class=page-content>. Notice that the closing tag (and all the inner elements) is missing. This only happens in IE8 (I haven't tested >IE8 yet), and when it happens, it causes appendChild() method to fail inside jQuery's append() method.
I dug deeper into the jQuery's find method, and found that the source of the problem was when jQuery uses the Web API method querySelectorAll(). In jQuery's code, the developers commented the following:
// qSA works strangely on Element-rooted queries
// We can work around this by specifying an extra ID on the root
// and working up from there (Thanks to Andrew Dupont for the technique)
// IE 8 doesn't work on object elements
However, I don't really know what this means...
I have created a jsFiddle example to demonstrate this issue: http://jsfiddle.net/VHL7Q/6/
If you open up the jsFiddle link in IE8, an alert will display:
<MAIN class=page-content>
Alternatively, if you open the jsFiddle link in Chrome or Firefox, an alert will display:
<main class="page-content">
<div class="help-toggle">
<i class="icon-info-sign"></i>
</div>
</main>
Short of righting my own find method for traversing the DOM tree, I don't know how to begin solving this problem.
NOTE: a "band-aid" type solution that seemed to work was to replace the <main></main> tag with a <div></div> tag. I cannot use this solution permanently however; I need help finding a way to use the <main></main> tag.
The trouble is that IE8 does not fully support HTML5. In particular, it has no idea what the element main is.
Some of these issues can be resolved by using an HTML5 Shim, but I don't know if it is 100% compatible.
Link explanation:
(The shim, in short, runs a document.elementCreate for all of the new HTML5 elements to kickstart the IE8 into realizing they exist.)
After six days of digging, I did what I should have done on day one. I updated my html5shiv and modernizr to their newest versions. Specifically I updated html5shiv from 3.6.1 to 3.7.0, and I updated modernizr from 2.5.3 to 2.7.1.
This does not directly answer my questions about the detailed functionality of jQuery and Web API, but it can be assumed that the newest version of a library might fix your problems with a five year old software product.
Thank you Jeremy and cookie monster for your help.

jQuery/Mootools issue in IE8

I'm working on a page that has both Mootools 1.4 and jQuery 1.5.1 running. I know this isn't ideal but I don't really have an option. The page works fine in most every browser, but not in IE8. I get the following error:
Object doesn't support this property or method
when attempting to add a click event, despite putting my jQuery-specific code in a noConflict block. Here's a fiddle that reproduces the issue: http://jsfiddle.net/p7rFV/1/
Thanks for any ideas on what's going on.
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
document.getElementById('button').addEvent('click', function(){
document.getElementById('tester').hide();
});
Two issues with your fiddle:
When you do, you should use jQuery.noConflict();, not $.noConflict();
MooTools can't enhance DOM elements at the prototype level in IE like it can in other browsers, so you have to always be sure to pass them through $() or document.id() before using MooTools-specific functions on them. So this line fails:
document.getElementById('tester').hide();
...because the DOM element has no hide method. Instead, just use $() or document.id():
$('tester').hide();
document.id('tester').hide();
...which will both look up the element and extend it.
Updated fiddle

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

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?

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