How to fix script after upgrading jQuery to 2.1.4? - javascript

I was using jQuery 1.8.3 and had this piece of script :
$("[src*=plus]").live("click", function () {
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
$(this).attr("src", "../Images/minus.gif");
});
$("[src*=minus]").live("click", function () {
$(this).attr("src", "../Images/plus-sign.png");
$(this).closest("tr").next().remove();
});
After upgrading to jQuery 2.1.4, this no longer works.
I get it that some functions like live is not supported anymore but I am unable to convert this piece to make it work.

When upgrading jQuery you should use jQuery migrate.
This is offically recommended way in finding out what has been deprecated in jQuery.
If you’re upgrading from a version before 1.9, we recommend that you
use the jQuery Migrate plugin and read the jQuery 1.9 Upgrade Guide,
since there have been a lot of changes. It’s easy to use the plugin,
just include it in your HTML file after jQuery and open your browser
console to see the messages it generates:
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.js"></script>
You should also look into the jQuery upgrade guide.

live is deprecated. Use on instead.

Related

Uncaught TypeError: jQuery(...) [duplicate]

I have gridview that is populated by jquery. Below is part of my code thats giving the above error:
var codes = $(this).find("Code").text();
$("td", row).eq(6).html($(this).find("oTotal").text());
if ($(this).find("Stock").text() == 'Y') {
$("td", row).eq(7).html('Y');
$('#' + codes).live('click', function () {
$('#' + codes).tooltip();
});
}
else {
$("td", row).eq(7).html($(this).find("Stock").text());
}
I am getting an error on $('#'+ codes).tooltip(); I have jquery.ui/1.8.22 and jquery/1.8.3.
I think tooltip wasn't part of the file you are pulling in. Are you able to update your CDN reference to jQuery UI to:
http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js
I solved this problem by moving all my Javascript tags above:
< jdoc:include type="head" />
Hope it works for you too.
Try re-arranging your script includes so jQuery is first, jQuery UI is second, then along through the rest.
tooltip() is not a function!!!
I solved the problem by using below steps in angular 4.
install jquery using, npm install jquery command.
add the following code in the path src/typings.d.ts file.
declare var jquery:any;
interface jquery
{
tooltip(options?:any):any;
}
It solved the tooltip() issue.
The tooltip is the part of Bootstrap so including bootstrap should solve the problem.
Quick links to check with bootstrap, you may remove https: from the beginning of the bootstrap links.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
tooltip() has not always existed in jQuery UI. It was added in version 1.9, so it'll work in any version after 1.9. Proof:
version added: 1.9 (Source: API.jQueryUI.com: Tooltip Widget.)
If you don't have a version of jQuery UI at version 1.9 or higher, you'll get the error: tooltip() is not a function().
This is why the accepted answer works: it simply links to version 1.10.3. Ideally, you should be using the most modern version of jQuery UI available (in fact, this rule applies typically to all packages).

On Load Delegation not working with Latest Jquery 3.1

an iFrame is added to my page via javascript somewhere in my page, I want to be notified when it is loaded, but this doesn't work:
$("iframe").load(
function () {
alert(this.name + ": Im loaded!");
});
No alert is shown
Any idea why? any idea how can we achieve this?
With Latest Jquery jQuery 3.1.1, It is not working and JS error occur inderOf is not found as in latest JS lib. it is uses a normal paramter.
"load" method is deprecated since jQuery 1.8.
Use "on" method instead.
$("iframe").on("load", function () {
alert(this.name + ": Im loaded!");
});

How can I load multiple versions of a jQuery plugin on the same page?

I'm trying to use the latest version of the timepicker addon for jQuery UI.
Another library already loaded it at an earlier version (1.0.4) but I want to use the latest (1.4.5) version.
In the source, the plugin checks to see if it has already been loaded before proceeding:
$.ui.timepicker = $.ui.timepicker || {};
if ($.ui.timepicker.version) {
return;
}
I did a lot of searching for ways to do this but didn't come up with anything helpful. I did see that it might be possible to load multiple versions of jQuery on the page using noConflict and then attach it to a different version of jQuery but I thought there should be an easier way.
I gave this a try it is not working - I think because the variables are getting referenced and they maybe need to be instantiated instead - I'm not a JS expert but at least I'm trying:
// jQuery, jQueryUi, and the 1.0.4 version loaded beforehand
<script>
var _old_jquery_ui_timepicker = jQuery.ui.timepicker;
var _old_jquery_ui_timepicker_function = jQuery.fn.datetimepicker;
jQuery.ui.timepicker = null;
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.min.js"></script>
<script>
jQuery.ui.mytimepicker = jQuery.ui.timepicker;
jQuery.ui.timepicker = _old_jquery_ui_timepicker;
jQuery.fn.mydatetimepicker = jQuery.fn.datetimepicker;
jQuery.fn.datetimepicker = _old_jquery_ui_timepicker_function;
</script>
Writing that code felt dirty, and again, it didn't work. So, after not having any luck with that I tried searching more and still didn't come up with anything. I tried searching for:
loading multiple jQuery plugin versions on the same page
jQuery plugins noConflict
load a jQuery plugins in a different namespace
load a jQuery plugins in a different domain
load a jQuery plugins in a different context
Is this simple to do and I'm just not searching or the right thing or is it impossible?
Why I'm attempting this
I need features from the newer version of the the timepicker, but I don't want my code to break when the other library is updated or replaced.
The web app is using a (non-jquery) plugin with a large codebase that is reliant on the earlier version (1.0.4) of the timepicker addon
It's not my place to update the other plugin's codebase
I don't want to write code that is reliant on the earlier version (1.0.4) of the timepicker addon, as would be reliant on the other codebase to load the older version (and would possibly break when that was updated)
So, I agree that using two versions of a jQuery plugin is not ideal. However, I do need to add in functionality from a later version of the jQuery timepicker plugin. I believe it is possible to do this, maybe with Javascript's prototyping and inheritance, and without having to 'hack it' as #Oliboy50 suggests doing with a find-and-replace to the plugin's sourcecode.
Are there any Javascript pros who could demonstrate how to do this in (even though it is not ideal)?
Please note: yes, we have established that "it is a bad idea" to try and do this, but for principle I would like to know if Javascript's prototypal language would allow this to be done. noconflict (i.e. loading multiple versions of jQuery) was already mentioned in comments and answers. Although this "would work" it's not the answer I'm looking for. Also, modifying the plugin sourcecode with a find-and-replace is not really an elegant solution either.
I think that it's already a bad thing to use two differents version of a plugin. So I think you won't mind if you're solution could be to change the name of the plugin.
In this jsfiddle (http://jsfiddle.net/RVyKM/), I replaced (I think) timepicker with timepickertwo and datetimepicker with datetimepickertwo. So you can use both your old timepicker plugin version 1.0.4 and your new timepickertwo plugin version 1.4.5...
But still, be aware that this is a bad idea, IMHO.
This doesn't appear to be possible, especially with this plugin. For one, the plugin doesn't allow itself to be redefined/overwritten:
/*
* Lets not redefine timepicker, Prevent "Uncaught RangeError: Maximum call stack size exceeded"
*/
$.ui.timepicker = $.ui.timepicker || {};
if ($.ui.timepicker.version) {
return;
}
So you can't simply load the older version, initialize it, and then load the newer version on top of the old one, the newer one won't load.
Secondly, if the plugin is loaded in a separate context, say via RequireJS, then it doesn't have a handle on the jquery ui widgets. In other words you can bring in the plugin and attach it to a separate jQuery instance, but then jquery ui only uses one global div for the datepicker and the separate instance doesn't work with it. I've put together the following example (See full jsfiddle):
HTML
<script src="http://rawgit.com/trentrichardson/jQuery-Timepicker-Addon/v1.0.4/jquery-ui-timepicker-addon.js"></script>
<p><input id="date1" type="text" /></p>
<p><input id="date2" type="text" /></p>
<p><input id="date3" type="text" /></p>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
Javascript
require.config({
paths: {
'jquery': '//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min',
'jquery-ui': 'http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min',
'jquery.timepicker': 'http://rawgit.com/trentrichardson/jQuery-Timepicker-Addon/v1.4.5/dist/jquery-ui-timepicker-addon'
},
shim: {
'jquery.timepicker': {
deps: ['jquery', 'jquery-ui'],
init: function(jquery) {
return jquery.noConflict(true);
}
}
},
});
QUnit.test('global timepicker is 1.0.4', function (assert) {
assert.ok($.timepicker.version == '1.0.4',
$.timepicker.version);
});
$('#date1').timepicker();
require(['jquery', 'jquery.timepicker'], function ($) {
QUnit.test('amd timepicker is 1.4.5', function (assert) {
assert.ok($.timepicker.version == '1.4.5',
$.timepicker.version);
});
// Not working...
$('#date2').datepicker();
});
setTimeout(function() {
QUnit.test('global timepicker is still 1.0.4', function (assert) {
assert.ok($.timepicker.version == '1.0.4',
$.timepicker.version);
});
$('#date3').timepicker();
}, 2000);
The only solution I can see is as #Oliboy50 suggests, clone the source and rename the plugin.
EDIT
Hmm... Maybe this works (fiddle):
// Maybe working...
$.datepicker = jQuery.datepicker;
$.fn.datepicker = jQuery.fn.datepicker;
$('#date2').timepicker();

jQuery selectmenu version 1.10 not triggering change

I've added the jQuery version of 1.10 to my project and the selectmenu widget and I cannot get the change event to fire.
The selectmenu was working fine before i upgraded to the 1.10.
What do I need to do to get this working?
var getProjectInfo=function(){
}
--I've tried this way
var sel = helper.selectMaker.makeSelect(data);
sel.change = getProjectInfo;
$('#projsPH').appendChild(data);
$(sel).selectmenu();
--And this way
**This way throws an error of selectmenu widget does not have a method change.
var sel = helper.selectMaker.makeSelect(data);
$('#projsPH').appendChild(data);
$(sel).selectmenu('change', getProjectInfo);
------------Update
I've got it to work like
$(sel).selectmenu({change:getProjectInfo});
But the selection will not collapse
Got the styles from Google
http://code.google.com/p/jquery-ui/source/browse/branches/labs/selectmenu/ui.selectmenu.css?r=2776
You're using very outdated files. And I guess you are talking about jQuery UI 1.10.
Try the older but updated version: https://github.com/fnagel/jquery-ui/
Not sure of this version will work without problems with UI 1.10, not tested yet
Or, better, use the official but yet unreleased version: https://github.com/jquery/jquery-ui/tree/selectmenu

JQuery: different versions clashing - is there a way I can isolate the versions?

on my site I am using a few of the newish JQuery UI controls like the datepicker and dialog.
I recently found a cool project online showing how to make the google dashboard, which is also used on the bbc.co.uk website.
This allows the user to have widgets that move around nicely when selected.
I created a test solution, it worked.
When I integrated it into my exisitng solution with currect Jquery controls and versions it causes a number of errors shown in firebug.
These are:
$("#menu").mouseleave is not a function
$('#menu').mouseleave(function() {
for this piece of code:
$('#menu').mouseleave(function() {
setSubItemVisibility();
});
for the datepicker JQuery ui control:
$(".startdate").datepicker is not a function
$(".startdate").datepicker({ dateFormat: 'dd/mm/yy' });
for the dialog:
$("#inputupdatecontrol").dialog is not a function
position: 'top center'
These all work fine until I put in the inettuts with cookies dashobard solution in found here: http://james.padolsey.com/javascript/inettuts-with-cookies/
This includes the following JQuery versions and files:
jquery-1.2.6.min.js
jquery-ui-personalized-1.6rc2.min.js
cookie.jquery.js
inettuts.js
Is there any way I can seperate the functionality that comes with these files from my existing JQuery versions?
I am currently using the latest Jquery version out and have no problems, its only when i add this functionality from the old versions that I face problems.
I am only using this old version of Jquery on one page, but ofcourse the new versions are needed to.
Cheers
Okay here is the full pattern, put the following in:
<script src="jQuery1.3.js"></script>
<script>
jq13 = jQuery.noConflict(true);
</script>
<script src="jQuery1.3.1.js"></script>
<script>
jq131 = jQuery.noConflict(true);
</script>
<!-- original author's jquery version -->
<script src="jQuery1.2.3.js"></script>
The variables jq13 and jq131 would
each be used for the version-specific
features you require.
Jquery in the command above returns a reference to its self essentially 'boxing' it in another variable.
So to call a function on 1.3 you would call
jq13('#'+ myId).bind('onclick',function(){});
NOTE : You must load the first version of javascript that was developed last.
Yes you can use jQuery.noConflict.

Categories