jQuery conflict in WordPress Plugin - jQuery vs. WordPress Core

Question

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!

Matt van Andel · Accepted Answer · 2011-01-10 22:19:20Z

1

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.

edited Jan 10, 2011 at 22:19

answered Jan 10, 2011 at 22:13

Matt van Andel

6577 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Brian Over a year ago

That was it. Thanks a million you saved my arse!

prilldev · Accepted Answer · 2011-01-10 22:06:19Z

1

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...

answered Jan 10, 2011 at 22:06

prilldev

3042 silver badges4 bronze badges

Comments

polarblau · Accepted Answer · 2011-01-10 22:15:46Z

1

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);

edited Jan 10, 2011 at 22:15

answered Jan 10, 2011 at 22:04

polarblau

17.8k8 gold badges66 silver badges84 bronze badges

4 Comments

polarblau Over a year ago

Could you explain how your script fails in detail? How do you figure it's a conflict? And a conflict between what — Prototype and jQuery? See also my edit…

polarblau Over a year ago

Ha! I'm typing to slowly. So… after including the line in question, you only have the one version of jQuery in the final source code included?

Brian Over a year ago

See @Matthew's response above. He demonstrated how to load jQuery only IF it's not already loaded which resolved the conflict. I knew that was what I wanted but wasn't sure how to achieve it!

Brian Over a year ago

For the record, your observation was 100% correct because I found out that I actually needed BOTH your revision as well as @Matthew's in order to get the code working properly.

Collectives™ on Stack Overflow

jQuery conflict in WordPress Plugin - jQuery vs. WordPress Core

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related