jQuery UI Tabs and wp_enqueue_script

  • Resolved Drew Baker

    (@dbaker)


    15 years, 4 months ago

    I’m trying to use some jQuery Tabs in my sidebar as per this website.

    If I call the jQuery script in my header.php like this first example it works fine:

    <link type="text/css" href="https://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />

<script type="text/javascript" src="https://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="https://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="https://jqueryui.com/latest/ui/ui.tabs.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tabs").tabs();
});
</script>
<?php wp_head(); ?>

    But if I call it like this (which is the supposed proper way) then it doesn’t work. The .js files seem to get loaded into the head, but the tabbed content just displays inline. Is there something different between the WP jQuery files and those from jQuery’s site?

    <link type="text/css" href="https://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />

<?php
	wp_enqueue_script('jquery');
	wp_enqueue_script('jquery-ui-core');
	wp_enqueue_script('jquery-ui-tabs');
 ?>
<script type="text/javascript">
$(document).ready(function(){
$("#tabs").tabs();
});
</script>
<?php wp_head(); ?>

    If anyone is curious to the HTML that goes with this, here it is:

    <div id="tabs">
    <ul>
        <li><a href="#fragment-1"><span>Shoutbox</span></a></li>
        <li><a href="#fragment-2"><span>Latest Comments</span></a></li>
        <li><a href="#fragment-3"><span>Poll Jam</span></a></li>
    </ul>
    <div id="fragment-1">
        Shoutbox goes here.
        <div>If you can see this it works with DIVS</div>
    </div>
    <div id="fragment-2">
        Latest Comments go here.
    </div>
    <div id="fragment-3">
        Polls Go here.
    </div>
</div>

    Thanks for the help!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter Drew Baker

    (@dbaker)

    Bumping because I still can’t work this out.

    The version of jquery that WordPress calls doesn’t automatticly use $ for jquery. If you replace

    $(document).ready(function(){

    with

    jQuery(document).ready(function($){

    your script should function as expected

    Thread Starter Drew Baker

    (@dbaker)

    Hey Jorbin,
    Thanks for this. Although I still get issues with it.
    If i put this code in:

    <?php
	wp_enqueue_script('jquery','','','',true);
	wp_enqueue_script('jquery-ui-core','','','',true);
	wp_enqueue_script('jquery-ui-tabs','','','',true);
 ?>

<script type="text/javascript">
jQuery(document).ready(function($){
$(".tabs").tabs();
});
</script>

    The code scripts get loaded in my BODY. I think it’s because of the Event calender 3 plugin I have, as they scripts are loaded right above that plugin. But I though the last ‘true’ attribute forced the scripts into the header?

    Thread Starter Drew Baker

    (@dbaker)

    Working!!!

    It would only work if I do this:

    <?php wp_enqueue_script('jquery'); ?>
<?php wp_enqueue_script('jquery-ui-core'); ?>
<?php wp_enqueue_script('jquery-ui-tabs'); ?>
<?php wp_head(); ?>
<script type="text/javascript">
jQuery(document).ready(function($){
$(".tabs").tabs();
});
</script>
</head>

    This is because <?php wp_head(); ?> actually calls the script within it. So the jQuery(document).ready(function($){ ends up being called before the script is loaded.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘jQuery UI Tabs and wp_enqueue_script’ is closed to new replies.