Drupal 6 jQuery UI Tabs in customised node.tpl.php

HI All,

Long time reader, first time caller.

I'm failing to get a jQuery tab widget working within a customised Drupal node template.

What I get in my browsers is normal rendered HTML; i.e. no widget & no error messages in any of the browser debug consoles.

I've tested in IE8 / Firefox 3.6 & Chrome 7 all with the same result.

I'm using Drupal 6 / jQuery 1.2.6 / jQuery UI 1.6

In order to try and diagnose if the problem is a Drupal 6 file path setup issue, I've tried a jQuery Accordion and Draggable. The accordion renders as HTML like the Tabs (fail), however the Draggable block works. That indicates to me, that Drupal is building the correct scripts in the HTML header.

I have also stuck alert's in the Drupal.behaviors block to try to confirm that they do get executed; i.e. that Drupal is properly assembling and calling the jQuery Document.ready function.

Here's the guts of my node-custom.tpl.php using examples from the jQuery documentation. As

    <?php 
        jquery_ui_add('ui.tabs');
        jquery_ui_add('ui.draggable');
        jquery_ui_add('ui.accordion');
      ?>

      <script>
      Drupal.behaviors.nodeCourse = function(context) {
        alert("before");
        $( "#tabs" ).tabs();
        $( "#accordion" ).accordion();
        $( "#drag-me" ).draggable();
        alert("after");
      };
      </script>
<div id="tabs">
    <ul>
        <li><a href="#fragment-1"><span>One</span></a></li>
        <li><a href="#fragment-2"><span>Two</span></a></li>
        <li><a href="#fragment-3"><span>Three</span></a></li>
    </ul>
    <div id="fragment-1">
        <p>First tab is active by default:</p>
        <pre><code>$('#example').tabs();</code></pre>
    </div>
    <div id="fragment-2">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
    <div id="fragment-3">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod开发者_JAVA技巧 tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
</div>

<hr />

<div id="accordion">
    <h3><a href="#">Section 1</a></h3>
    <div>
        <p>
        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
        ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
        amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
        odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
        </p>
    </div>
    <h3><a href="#">Section 2</a></h3>
    <div>
        <p>
        Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
        purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
        velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
        suscipit faucibus urna.
        </p>
    </div>
    <h3><a href="#">Section 3</a></h3>
    <div>
        <p>
        Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
        Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
        ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
        lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
        </p>
        <ul>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
        </ul>
    </div>
    <h3><a href="#">Section 4</a></h3>
    <div>
        <p>
        Cras dictum. Pellentesque habitant morbi tristique senectus et netus
        et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
        faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
        mauris vel est.
        </p>
        <p>
        Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
        inceptos himenaeos.
        </p>
    </div>
</div>      

<div id="drag-me" style="size: 100px 100px 100px 100px; background-color:#286762">&nbsp;</div>

Here's the HTML headers excerpt from the rendered page:

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>Test | demo</title> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="shortcut icon" href="/drupal6/themes/tenfifteen/favicon.ico" type="image/x-icon" /> 
  <link type="text/css" rel="stylesheet" media="all" href="/drupal6/modules/cck/theme/content-module.css?3" /> 
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/modules/date/date.css?3" /> 
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/modules/date/date_popup/themes/datepicker.css?3" /> 
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/modules/date/date_popup/themes/jquery.timeentry.css?3" /> 
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/modules/filefield/filefield.css?3" /> 
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/modules/node/node.css?3" /> 
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/modules/system/defaults.css?3" /> 
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/modules/system/system.css?3" /> 
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/modules/system/system-menus.css?3" /> 
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/modules/user/user.css?3" /> 
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/modules/cck/modules/fieldgroup/fieldgroup.css?3" /> 
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/modules/views/css/views.css?3" /> 
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/themes/tenfifteen/framework/reset.css?3" /> 
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/themes/tenfifteen/framework/text.css?3" /> 
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/themes/tenfifteen/framework/960.css?3" /> 
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/themes/tenfifteen/framework/debug.css?3" /> 
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/themes/tenfifteen/messages.css?3" /> 
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/themes/tenfifteen/block-editing.css?3" /> 
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/themes/tenfifteen/styles.css?3" /> 
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/themes/tenfifteen/css/structure.css?3" /> 
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/themes/tenfifteen/css/typography.css?3" /> 
<!--[if IE]>
<link type="text/css" rel="stylesheet" media="all" href="/drupal6/themes/tenfifteen/ie.css?3" />
<![endif]--> 
  <script type="text/javascript" src="/drupal6/misc/jquery.js?3"></script> 
<script type="text/javascript" src="/drupal6/misc/drupal.js?3"></script> 
<script type="text/javascript" src="/drupal6/modules/google_analytics/googleanalytics.js?3"></script> 
<script type="text/javascript" src="/drupal6/modules/jquery_ui/jquery.ui/ui/minified/ui.core.min.js?3"></script> 
<script type="text/javascript" src="/drupal6/modules/jquery_ui/jquery.ui/ui/minified/ui.tabs.min.js?3"></script> 
<script type="text/javascript" src="/drupal6/modules/jquery_ui/jquery.ui/ui/minified/ui.draggable.min.js?3"></script> 
<script type="text/javascript" src="/drupal6/modules/jquery_ui/jquery.ui/ui/minified/ui.accordion.min.js?3"></script> 
<script type="text/javascript"> 
<!--//--><![CDATA[//><!--
jQuery.extend(Drupal.settings, { "basePath": "/drupal6/", "googleanalytics": { "trackOutgoing": 1, "trackMailto": 1, "trackDownload": 1, "trackDownloadExtensions": "7z|aac|arc|arj|asf|asx|avi|bin|csv|doc|exe|flv|gif|gz|gzip|hqx|jar|jpe?g|js|mp(2|3|4|e?g)|mov(ie)?|msi|msp|pdf|phps|png|ppt|qtm?|ra(m|r)?|sea|sit|tar|tgz|torrent|txt|wav|wma|wmv|wpd|xls|xml|z|zip" } });
//--><!]]>
</script> 
</head> 

---

After much digging around, the cause of this problem was due to the jQuery UI CSS's not being included in the rendered HTML file.

I figured this out by noticing that the only jQuery widget that worked was the DatePicker and that was because I had installed the Date module that was including it's own CSS. The other widgets for Accordions, Sliders and Dialogs didn't work either.

The jQuery UI dupal module doesn't add the jQuery CSS's. I've tested this by adding the following:

  $jquery_ui_css_path =  drupal_get_path('module', 'jquery_ui') . '/jquery.ui/themes/default/ui.all.css';  
  watchdog('MyMsg', 'Path to jquery ui css: ' . $jquery_ui_css_path);  // debug
  drupal_add_css( $jquery_ui_css_path ); 

Thanks for the following blog entry by Houen for pointing out the drupal_add_css function call.