Posted 3 years ago #
Hi guys and girls
I really have no clue what I am doing wrong, but I cant get jQuery UI to work in my plugin.
There isn't anyother code in the plugin yet, so it can't be a conflict internally in the plugin.
Could someone point out to me how I include jQuery and the jQuery UI
There is no problem in getting jQuery to work, but when I try to include the jQuery UI it fails.
It properbly has something to do with the http://docs.jquery.com/Core/jQuery.noConflict used in the bundled jQuery.
Anybody?
Posted 3 years ago #
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.)
Posted 3 years ago #
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
http://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?
Posted 3 years ago #
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.
Posted 3 years ago #
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 :(
Posted 3 years ago #
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)
Posted 3 years ago #
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.
Posted 3 years ago #
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.
This topic has been closed to new replies.
