I have created widget which is using jquery latest version 1.11.1.
When i adding my widget into 3rd party website.
And 3rd party website have lower version jquery e.g. 1.5 in my case (it could be any version). 3rd party website jquery don't have the latest function.
e.g
Latest version function
jQuery(document).on("click", function(e) {
...
});
So i am getting error function is undefined. How to resolve this type of issue.
Or did i have created the widgets wrong way that depend on jquery?
If anyone know how to implement java script widget that don't depend on 3rd party library like jquery different version.
If you are using event delegation, only then this answer applies
In jQuery 1.5, you have the .delegate() method, you can use that
$( "table" ).delegate( "td", "click", function() {
$( this ).toggleClass( "chosen" );
});
Don't use .live() as it is removed in verions >= 1.9
The on method is not known in version 1.5
You should use this syntax instead:
jQuery(document).click(function(e) {
...
});
jQuery(document).click(function(e) { here as there is no delegation
And for dynamic HTML use live event as it works in old jquery version and you Must use deprecated syntax as its using old jQuery.
if you have to deal with dynamically data use live()
Jquery .on() is added in version 1.6+. for previous versions you need to use .live()
As you are not delegating the event, you can simply use .click() to attach the click event:
jQuery(document).click(function(e) {
...
});
I don't think there is any direct/dynamic way to resolve your problem.
Even if you resolve the problem with 'click' function. You may face problem with another function which is either not supported in lower version of JQuery or have different syntax/behavior.
e.g. few animations like 'fadeOut(1000)' may not be supported in lower version of JQuery(this is just example. You need to check whether these kind of APIs are supported or not.)
So practically you might have to just do trail and error. Test your JQuery widget/plugin with all available JQuery versions.
You could figure out the Jquery version of the WebSite where you are deploying your widget. See if this is helpful to get the version. https://api.jquery.com/jquery-2/
Depending on version you could use appropriate supported API e.g., live() for v1.5 and below AND .click() for higher versions.
You are good to go when everything works.
Related
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.
I am using a program that requires jQuery 1.3.2 and haven't been able to get the .click() function to work, but I am able to get function like .hover() to work.
This works fine:
$(document).ready(function() {
$("#alert_button").hover(function(){
alert("The monitor has been notified - please wait in your room and they will be by shortly");
});
});
But this does not:
$(document).ready(function() {
$("#alert_button").click(function(){
alert("The monitor has been notified - please wait in your room and they will be by shortly");
});
});
Did 1.3.2 not support .click()? And if not was there an alternative event handler to use?
.click() will work in any case... demo
Rather, .hover() will not work in Chrome for action elements like <button> demo
If you're fine with the above mentioned than your error lies somewhere else,
open Firebug or any Developer console and see if you have some other JS errors.
working fine, your code may be facing some conflicts. Kindly check your browser console for errors.
Update your jQuery to 2.03 and change .click to .on('click', function...
Your version is very old, and have many deprecated code.
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
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
I have lots of links on my page with class="popup".
I want all of these to open in a new window.
Any nice way to define this with JavaScript?
I am using .live() to support links that might be added later to the DOM. If you are not adding links from event handlers, Ajax callbacks, etc., you can simply use .click().
$('a.popup').live('click', function (e) {
window.open(this.href);
e.preventDefault();
});
Please note, that according to the current HTML5 spec, you can also use:
as you previously could in HTML4. This way, you do not need Javascript. Using target is not recommended though on an XHTML doctype, because it is not considered a valid attribute.
UPDATE: From the jQuery documentation
As of jQuery 1.7, the .live() method is deprecated. Use .on() to
attach event handlers. Users of older versions of jQuery should use
.delegate() in preference to .live().
If you need help changing your code, be sure to check previous StackOverflow questions. Using the SO search [jquery] live deprecated is a good start.
You can put this in your $(document).ready()
$('a.popup').attr('TARGET', '_BLANK');