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!

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