3 Replies - 1217 Views - Last Post: 29 March 2013 - 04:50 AM Rate Topic: -----

#1 fisicx  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 37
  • Joined: 24-February 12

WordPress and jQuery - loading but not working

Posted 28 March 2013 - 01:55 PM

This is strange WordPress issue.

If I enqueue jquery off my own server everything works fine:
add_action('init', 'setup');
function setup() {
wp_enqueue_script('jquery_script', plugins_url('js/jquery-1.8.3.min.js', __FILE__));
wp_enqueue_script('anotherscript', plugins_url('js/anotherscript.js', __FILE__));
}

The 'anotherscript' does what it supposed to do.

But if I enqueue jquery using the wordpress hook (as detailed in the codex) the script loads but 'anotherscript' doesn't work:
add_action('init', 'setup');
function setup() {
wp_enqueue_script('jquery');
wp_enqueue_script('anotherscript', plugins_url('js/anotherscript.js', __FILE__));
}


You can see the link to jquery in the source code and the the file exists but 'anotherscript' just doesn't work.

Is This A Good Question/Topic? 0
  • +

Replies To: WordPress and jQuery - loading but not working

#2 Duckington  Icon User is offline

  • D.I.C Addict

Reputation: 170
  • View blog
  • Posts: 608
  • Joined: 12-October 09

Re: WordPress and jQuery - loading but not working

Posted 28 March 2013 - 02:48 PM

Have you checked your javascript error console for any messages?
Was This Post Helpful? 0
  • +
  • -

#3 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,991
  • Joined: 08-June 10

Re: WordPress and jQuery - loading but not working

Posted 28 March 2013 - 07:51 PM

Did you take into account that WordPress loads jQuery in no-conflict mode? If not, that link shows you what you need to do to work with the WP version of jQuery.

In short, to allow multiple libraries like jQuery and Prototype to be loaded side by side into the same page - both of which use the global $ shortcut by default - WP uses jQuery's .noConflict() function by default, so the $ global no longer refers to the jQuery object itself. jQuery then needs to be used by calling the actual jQuery object instead.
// This will fail
$(function() {
    $("#myElem").fadeIn(500);
});

// You'd have to do
jQuery(function() {
    jQuery("#myElem").fadeIn(500);
});



A common way to allow WP scripts to reuse existing jQuery code is to wrap it into an IIFE wrapper, like so:
(function($) {
    $(function() {
        $("#myElem").fadeIn(500);
    });
}(jQuery));


Any code within the outer function will then use $ to reference jQuery, like you normally get with jQuery code.

P.S.
Just because WP allows multiple libraries to be loaded at the same time, doing so is still a bad idea. It's more or less a waste of resources to load multiple libraries for different purposes when one of them would work just fine for both.

It's unfortunately way to common to see WP sites that loads multiple versions of jQuery and/or other libraries into the page, because the designer just copied and pasted snippets from various online examples to get a few different JS effects running, without considering that each of them is referencing a library on it's own. - It's even more unfortunate that WP seems to encourage this behavior.
Was This Post Helpful? 3
  • +
  • -

#4 fisicx  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 37
  • Joined: 24-February 12

Re: WordPress and jQuery - loading but not working

Posted 29 March 2013 - 04:50 AM

Thanks Ali,

A brilliant reply. It works perfectly now.

The next thing is to test to see if jQuery is already running on the site and if so just run the plugin script.

Even better would be test to see if the script is even needed on the page. I prefer to only load what is absolutely necessary - much better for those out and about on a 3G network. But I'm just a hobby developer and am over the moon if something actually works. Getting it to be efficient is a whole new level of skill that I don't really have.

Thanks once again
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1