jQuery and jQuery UI

You’ll probably need to replace the $ references in the ui.*.js files you include with jQuery ones. Worked for me. Not the best solution, but until the jQuery authors change things…

I’ve noticed a few jQuery libraries mix up their references with jQuery interspersed with $ and it doesn’t hurt if you have no conflicting JavaScript but as soon as you do, bam!

You’ll need to edit the js files, search for $. or $( or $[ (basically any $ not followed by a-z) and replace with jQuery. jQuery( jQuery[ etc…

Then in your code, use jQuery not $.

See this post: using jQuery in own plugins

(This is a bit fresh in my mind since I have been integrating jQuery into my upcoming real estate plugin and encountered these issues on the weekend. I was using ui.tabs.js, ui.datepicker.js, validate.js, and ui.core.js. And I managed to get them working both in the admin panels and the site itself.)

Hello Roger,

I’m working together with Thomas on the a project. I just tried your advice with replacing all ($). I’m trying to use the “draggable” module from jQuery UI. It loads perfect, but when I try to drag one of items I made “draggable”, my Firebug outputs an error:

———-
this.helper.offsetParent is not a function
https://playr.dk/(…)/jQuery/ui.draggable.js
Line 77
———-

Line 77 in ui.draggable.js:
———-
this.offsetParent = this.helper.offsetParent(); var po = this.offsetParent.offset(); //Get the offsetParent and cache its position
———-

As far as I can se, it doesn’t even use any of ($) or my replaced (jQuery). So you have any idea what the problem is?

If I rename the bundled jquery.js file in WordPress it works perfectly.

I also noticed that in docs it says that jquery is with lowercase Q
wp_enqueue_script(‘jquery’, EVENTREG_WP.’/wp-content/plugins/event-registration/3rdparty/jQuery/jquery-1.2.6.js’, false, ‘1.2.6’);

But when I use jquery my jquery.js doesn’t get included the bundled does.
If I use jQuery, it overwrites the bundled and my jquery.js is included and the bundled isn’t. or so it seems.

As I wrote, renaming the bundled jquery.js file resolves the issue.
So my conclusion is that the bundled jquery.js must be included some were I can’t see…

Why is this so hard to get to work ??

PS. Thanks Roger, as far as I can see, all the UI .js file we are using is fixed with (jQuery) at the end.

This is what we are using right now: `add_action(‘admin_print_scripts’, ‘eventreg_jquery’);
add_action(‘admin_head’, ‘eventreg_jquery_drag’);
add_action(‘admin_head’, ‘eventreg_jquery_alert’);

function eventreg_jquery() {
wp_enqueue_script(‘jquery’, EVENTREG_WP.’/wp-content/plugins/event-registration/3rdparty/jQuery/jquery.js’, FALSE, ‘1.2.6’);
wp_enqueue_script(‘jquery-ui-core’, EVENTREG_WP.’/wp-content/plugins/event-registration/3rdparty/jQuery/ui/ui.core.js’, array(‘jquery’), ‘1.5’);
wp_enqueue_script(‘jquery-ui-drag’, EVENTREG_WP.’/wp-content/plugins/event-registration/3rdparty/jQuery/ui/ui.draggable.js’, array(‘jquery-ui-core’), ‘1.5’);
}

function eventreg_jquery_drag() {
?>
<script type=”text/javascript”>
jQuery(document).ready(function(){
jQuery(“.drag-me”).draggable();
});
</script>
<?php
}

function eventreg_jquery_alert() {
?>
<script type=”text/javascript”>
jQuery(document).ready(function(){
alert(‘Testing common jQuery’);
});
</script>
<?php
}`

The alert works fine, just not the draggable.
We are clueless, this really sucks ??

The offsetParent method is only defined in jQuery 1.2.6 (from a quick code inspection of 1.2.3 and 1.2.6). So your Draggable depends on 1.2.6 I guess.

The lowercase q jquery as the first argument to your wp_enqueue_script is just a “handle” or identifier used by WordPress to track multiple requests for the same item. You seem to be using it correctly.

I have seen other plugin developers force WordPress to load their own version of the base jquery.js with the following:

wp_deregister_script('jquery');
wp_enqueue_script('jquery', MYURL .'js/jquery.js', FALSE, '1.2.6');

That said, I wouldn’t recommend it unless you have to to avoid a bug (or missing features, such as not working with Draggable). It’s also possible that by overriding it with a newer version, you might break something in someone else’s plugin. Then again, the next WP release might break those plugins too ??

The whole javascript include system is not well documented and I’m not even sure I have figured out how to use it properly… but it appears that WordPress doesn’t really pay attention to your version information. The idea seems to be to only load one copy – so if a few plugins all call wp_enqueue_script(‘jquery’); only one loads. It appears, though, that if there’s already a jquery handle, WordPress just ignores your plugin. The deregister stuff wipes out the jquery record and then it pays attention to your path information and registers and enqueues your version.

(By the way, I recommend you use a fully qualified path so your plugin doesn’t break if someone puts it somewhere you didn’t expect (ie renames the directory, installs WordPress in a deep subdir). MYURL above is a define statement which replaces the URL to the plugin as determined by the current environment; you just need to put something defining MYURL in your main plugin code)

I encounter this problem quite often. One thing I noticed that may help others:

Let’s say I am trying to include a script called colorpicker.js

The “proper” way of including scripts is using “wp_enqueue_script”, like this:

wp_enqueue_script(‘colorpicker’, “/js/colorpicker.js”,array(‘jquery’));

HOWEVER, doing this will cause various problems, the reason behind this is WordPress decides to load the prototype library since “colorpicker” is associated with it.

Keep your eye open for this, it’s best to use a standard such as:

wp_enqueue_script(‘jquery.colorpicker’, “/js/colorpicker.js”,array(‘jquery’));

Good luck.

Another thing to consider – update your jQuery (or whatever your library of choice is) files.

Download the latest jquery library, ui, effects, etc. and unpack them into wp-includes/js/jquery

This fixed a number of my compatibility issues with different plugins.