We Keep Coding

How to fix script after upgrading jQuery to 2.1.4?

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.

Trouble getting bootstrap tooltips to work on Joomla 3.0 with Gantry 4 Framework

I am trying to enable the bootstrap tooltips in Gantry 4.
The bootstrap javascript is loaded, as bootstrap.min.js as is jquery.
I added the following to the index.php file just before the closing body tag
<script type="text/javascript">
$(document).ready(function () {
$("[rel=tooltip]").tooltip();
});
</script>
I seem to have a conflict as I get the following error:
TypeError: 'undefined' is not a function (evaluating '$(document).ready(function () {
$("[rel=tooltip]").tooltip();
})')
The text that is supposed to trigger the tooltip is:
le cas d’un mariage de longue durée
Can someone please point out what I need to do to resolve this? Thanks.
Sorry, I forgot to add the link to the site and page where the tooltip is not functioning.
http://gobet.ergonomiq.net/divorce-séparation/divorce/26-requérir-seul-le-divorce-après-deux-ans-de-séparation#

You have MooTools active on the website, so the $ selector doesn't work like it would if jQuery were the primary $ selector agent. You'll need to convert the uses of $ where jQuery is expected to use jQuery instead.
Example:
$(selector here)
should be:
jQuery(selector here)
And everything else will work fine.

Ensure that you have only 1 jQuery library being loaded and that it is at the top of the list. If not, then your bootstrap.min.js file won't work.
If this is done and it's still not working, try adding the code like so:
$document = JFactory::getDocument(); //remove is this line is already being used
$js = "$(document).ready(function(){
$('[rel=tooltip]').tooltip();
});";
$document->addScriptDeclaration($js);
Hope this helps.

Add the bootstrap framework to the component.php of your template:
JHtml::_('bootstrap.framework');
This should solve the ".tooltip is not a function" error

In your Joomla Project, open templates/<your-template-name>/index.php.
find JHtml::_('behavior.framework', true); and comment it out.
OR You can just replace the word behavior with bootstrap.

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.

jQuery conflict in WordPress Plugin - jQuery vs. WordPress Core

I have a custom developed WordPress plugin that is using jQuery 1.4 and for some reason it is conflicting with the core of the WordPress js code... not sure, but I think it's also jQuery, no?
Anyway, I assumed it was this datepicker script I was using called "anytime.js" however, after debugging it turns out that the conflict was still happening after removing the link within the plugin to "anytime.js" but finally resolved when I got rid of the link to jquery.1.4.min.js ...
So, Any ideas for how to avoid the conflict? Is WordPress jQuery-based and that's the cause or is it something else?
Here's the relevant code found within the plugin:
function datepicker_header(){
$theme_dir = get_bloginfo('wpurl').'/wp-content/plugins/postevents/js/';?>
<link rel="stylesheet" type="text/css" href="<?=$theme_dir?>anytime.css" />
<link rel="stylesheet" type="text/css" href="<?=$theme_dir?>ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type='text/javascript'></script>
<script src="<?=$theme_dir?>anytime.js" type='text/javascript'></script>
<script type="text/javascript">
$(function(){
AnyTime.picker( "startdate", { format: "%m-%d-%Y", firstDOW: 1, baseYear: '<?=date('Y')?>', earliest: '<?=date('m-d-Y')?>' } );
AnyTime.picker( "enddate", { format: "%m-%d-%Y", firstDOW: 1, baseYear: '<?=date('Y')?>', earliest: '<?=date('m-d-Y')?>' } );
});
</script>
EDIT
I think I may have caused some confusion. I should explain functionality. There is a plugin called "Post Events" that has a jQuery based datepicker. The datepicker relies on jQuery to run. The specific and unusual problem is that while the plugin is active, it causes the new WordPress 3.0 draggable menus to fail from the WP admin panel. All other functionality is working, however, disabling the datepicker does not result in the menus becoming draggable. Instead, only deleting the link to "/libs/jquery/1.4.2..." in the code above causes the menus to become draggable again.
EDIT #2
While I can only indicate one correct answer, both #Matthew as well as #polarblau's corrections below were required to fix the problem!

This code will check to see if jQuery is already loaded... then loads it if it's not already (this code loads from Google code - you can update the URL to a local file if you like).
if(typeof(jQuery)=='undefined'){
var loadjQuery = document.createElement("script");
loadjQuery.setAttribute("type","text/javascript");
loadjQuery.setAttribute("src","http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js");
document.getElementsByTagName("head")[0].appendChild(loadjQuery);
}
I do have to note, however, that this will only work if loaded AFTER another potential instance of jQuery (there's no guarantee that an instance of jQuery won't be loaded later, unless it performs this same check).
This is useful in situations where jQuery is loaded SOMETIMES and you need it to ALWAYS be loaded, no matter what. In that case, place this code at some point after the original would have loaded, but before you use any jQuery functionality.
One more thing: I sometimes WordPress gets fussy with the $ in jQuery code. You can get around this by simply typing out 'jQuery' (or performing a find/replace) instead of $ anywhere the $ is needed.

See this link about properly adding scripts to Wordpress:
http://weblogtoolscollection.com/archives/2010/05/06/adding-scripts-properly-to-wordpress-part-1-wp_enqueue_script/
And yes, Wordpress uses JQuery for some of it's functionality...

Try:
jQuery(function(){
AnyTime.picker( "startdate", { format: "%m-%d-%Y", firstDOW: 1, baseYear: '<?=date('Y')?>', earliest: '<?=date('m-d-Y')?>' } );
AnyTime.picker( "enddate", { format: "%m-%d-%Y", firstDOW: 1, baseYear: '<?=date('Y')?>', earliest: '<?=date('m-d-Y')?>' } );
});
Generally it's a good practice to wrap your scripts and plugins which are using jQuery into their own scope:
(function($){
//... your plugin, etc. here
})(jQuery);

jquery autocomplete this.source is not a function error

I've implemented autocomplete on an input field, but the box does not show up and firebug returns "this.source is not a function". I've used autocomplete on other fields of the same page without any problems. (two textarea's).
I'm using the following code to debug, same effect if I run from script file or Firebug command line.
var fakedata = ['test1','test2','test3','test4','ietsanders'];
$("#omschrijving").autocomplete(fakedata);
running jquery 1.4.2 and jquery ui 1.8.2, both minified versions.
Does anyone have an idea how autocomplete works fine on the textareas but causes this malfunctioning on inputs?
Error & Stack trace:
this.source is not a function
http://facturatie.autodealers.nl/dev/resources/js/jquery-ui-1.8.2.custom.min.js
Line 570
close(Object { name="a"})jquery....min.js (regel 570)
close(Object { name="a"}, Object { name="c"})jquery....min.js (regel 570)
response()

Answer is that the first parameter of the autocomplete should be an object containing the "source" property. This works
var fakedata = ['test1','test2','test3','test4','ietsanders'];
$("#omschrijving").autocomplete({source:fakedata});

If you were trying to use autocomplete from http://www.devbridge.com/projects/autocomplete/jquery/#demo, it now collides with the autocomplete method in jQuery UI. I had the same problem and later noticed that I could just use the jQuery UI implementation.
(NOTE: It appears that this page's documentation is wrong: http://docs.jquery.com/Plugins/Autocomplete#Setup)

If you use it with jQuery UI library it also has plugin named autocomplete. In this case you can use plugin alias devbridgeAutocomplete:
$('.autocomplete').devbridgeAutocomplete({ ... });
This solve the problem with jQuery UI collision

As Shelton stated, the version from devbridge.com (1.1.3) collides with jQuery UI (1.8.4). Got it working by making sure the devbridge version loads after jQuery UI's version.

Had similar problem for tagedit/autocomplete. It seems you also want to disable the autocomplete. Setting the source to false avoids these errors.
Solution:
options.autocompleteOptions.source = false;

Search at the end of jquery.autocomplete.js the following section:
Create chainable jQuery plugin:
$.fn.devbridgeAutocomplete = function (options, args) {....
This devbridgeAutocomplete is an alternative plugin to access to the same functionality using this lines:
if (!$.fn.autocomplete) {
$.fn.autocomplete = $.fn.devbridgeAutocomplete;
}
So.. you can use devbridgeAutocomplete instead of autocomplete or any name by changing this $.fn.devbridgeAutocomplete

in my case I had a second import of jquery which I didn't realize.
Something like:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.2.27/jquery.autocomplete.min.js"></script>
// More code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
So be sure to import the autocomplete script after you initialized jquery.