Using jQuery in own Plugins

Resolved mephistobs
(@mephistobs)

16 years, 5 months ago

I’m developing a plugin for WordPress. I want to use Ajax for an administration page. Although I know the prototype library (a little), it seems more clever to me to use the jQuery library which is used by WordPress itself. If you don’t know something, you must learn this something: so I started to read the introduction tutorial on the jQuery website. However, the examples there don’t work with WordPress.

What did I do and what does I mean with “don’t work”:

I put the most current version of the jQuery library (1.2.1) in my plugin directory and registered it with wp_register_script using the handle ‘jquery’. When checking the HTML source code of my administration page, I see that the jQuery library from the wp-includes/js directory was included (version 1.1.4). I guess that this is the version used by WordPress using the same handle. It’s from August 2007.

However, trying the first example of the introduction tutorial (http://docs.jquery.com/Tutorials:How_jQuery_Works), it don’t work:

$(document).ready(function(){
alert(‘Hi world’);
});

Has the library changed so much from 1.1.4 to 1.2.1 that this basic example don’t work with 1.1.4? If I include the most current version of jQuery on my administration page, the example works. Anyway, my aim is to write a “clean” plugin and the current workaround of loading the new version directly is a somehow dirty way from my point of view.

Why does the example above not work with the jQuery version from WordPress and how can I get it work? Is it ok to replace the jQuery library of WordPress with version 1.2.1 or are there probably other incompatibilities which may take place?

Ciao, Meph

Viewing 10 replies - 1 through 10 (of 10 total)

Moderator Samuel Wood (Otto)
(@otto42)

WordPress.org Admin

16 years, 5 months ago

I cannot explain to you why your example would not work with 1.1.4, however I would recommend against including any later versions of jQuery in your plugin. It’s almost certain to break something, somewhere.

Thread Starter mephistobs
(@mephistobs)

16 years, 5 months ago

May be I did something wrong when loading the jquery library.

What is the “official” way to load/initialize the jquery library delivered with WordPress when I want to use it in an own plugin?

Moderator Samuel Wood (Otto)
(@otto42)

WordPress.org Admin

16 years, 5 months ago

Just use this code somewhere:
wp_enqueue_script('jquery');

Done. That will load the jquery code into the header. You need to do it right before any output from your page occurs, but not every time the plugin is loaded. Only when the output is to be displayed.

If you really do want to load your own, this is how to do it:
wp_enqueue_script( 'jquery', '/path/to/your/jquery.js', false, '1.2.1');

That will load it into the script loader system and enqueue it correctly with the given version number.

Thread Starter mephistobs
(@mephistobs)

16 years, 5 months ago

Hmm… even if I put the second wp_enqueue_script command into the plugin initialization WordPress still loads the own version:

wp_enqueue_script( ‘jquery’, get_bloginfo( ‘wpurl’ ) . ‘/wp-content/plugins/’ . dirname( plugin_basename( __FILE__ ) ) . ‘/jquery-1.2.1.js’, false, ‘1.2.1’)

The checked that the path evaluated is the right one. Using this statement in the plugin initialization makes WordPress to load its own version (1.1.4) on all pages, without the statement the start page comes without jquery. Says me that the line triggers the inclusion but still the “old” version.

And again: with the old version, the example above does not work. Could be there any interference with the prototype library used by another plugin (not from me)?

Janis Elsts
(@whiteshadow)

16 years, 5 months ago

Hey MephistoB, I actually ran into the same problem ($(…) not working) when trying to use jQuery in one of my plugins. I believe in my case it was because both jQuery and Prototype were loaded, and Prototype got the $ function first. I solved the conflict like this –
$j=jQuery.noConflict();

// Use jQuery via $j(...)
$j(document).ready(function(){
//do something...
});

You can read more about this here – Using jQuery With Other Libraries.

Oh, and I eventually figured out that plugin didn’t really need DOM manipulation anyway.

Thread Starter mephistobs
(@mephistobs)

16 years, 5 months ago

Strike! Your solutions works also here.

Thanks a lot to both of you.
shiftthis
(@shiftthis)

16 years, 2 months ago
If you want to use the WordPress bundled jQuery it’s not that hard. After you include wp_enqueue_script('jquery');
Just add your jQuery code using ‘jQuery’ instead of ‘$’ like so:
```
jQuery(document).ready(function() {
	jQuery('#togglediv').hide();
	jQuery('a#toggle').click(function() {
		jQuery('#togglediv').toggle(400);
		return false;
  	});
});
```
carnevalle
(@carnevalle)

16 years, 1 month ago

Thank you very much!

After dealing with loads of frustration $j=jQuery.noConflict(); did the trick for me

honewatson
(@honewatson)

15 years, 11 months ago

Thanks for the tip shift this

Roger Theriault
(@rogertheriault)

15 years, 10 months ago

FYI…

Some jQuery modules are being fixed so this problem doesn’t occur. For example, the latest jQuery Validate release, 1.4, has been fixed.

http://dev.jquery.com/view/trunk/plugins/validate/

You’ll notice the code in the file starts with ($) but down at the end, it ends with (jQuery). And throughout the file it references only $

Now in WordPress you should be able to just include that file without touching it, and use the jQuery() as shown by shiftthis above.

Hopefully some of the other modules will get a similar fix soon.