In D6 (jquery_ui was separate from jquery_update) we needed to call jquery_ui_add (and execute a script to trigger whatever we wanted). For example, we might do something like

<?php
/** Load tabs and execute **/
jquery_ui_add('ui.tabs'); 
?>
<script type="text/javascript">
$(document).ready(function(){
	$('#tab-content').tabs();
}); // end jQuery
</script>

How do we go about doing this now? There is no jquery_ui_add defined in the .module. The README.txt is not at all helpful. It's almost empty. I promise that I will update it if somebody answers this question.

Comments

vegantriathlete’s picture

Title: How do we use jquery_ui? » Javascript not begin added to the page
Component: Documentation » Code
Category: support » bug

I've worked on this more and what I think is happening is that the javascript just isn't being added to the page. I see that the intention is that it will be searched for in a CDN specified in the Performance settings for the site and if not found there, then it will use the module's. However, when I view the page source, I don't see the scripts being added anywhere.

I'm on D7.8 and I'm using 7.x-2.2. I've tried this with the Garland theme and still have the same problem. I am choosing to load the scripts from Google's CDN in the configurations. I have also tried it with selecting None in the configurations.

If I add

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>

to my .tpl file that needs the jquery_ui scripts, then my

<script type="text/javascript">
$(document).ready(function(){
	$('#tab-content').tabs();
}); // end jQuery
</script>

works as expected.

p.s. Once this issue is resolved, I will write a patch to add hook_help() and update the README.txt file.

vegantriathlete’s picture

bump?

pandaPowder’s picture

Same problem here. Do we have to configure the module to include jquery_ui?

Tony Stratton’s picture

I just tested the latest 7.x-2.x-dev (using jQuery 1.7), and I only see jquery-ui.js included if I'm logged in as an administrator (w/administrator role). Otherwise, it's missing.

spanac’s picture

Simple solution to add jQueryUI to any page is by using PHP filter module and drupal_add_library('system','ui.slider') for example.

Steps:

  1. Enable Drupal Core module: PHP filter (enable it in admin/modules)
  2. Add PHP coded block via: admin/structure/block/add
  3. Under Text format chose PHP Code
  4. Under Body, enter
  5. <?php
    drupal_add_library('system','ui.slider');
    ?>
  6. Put that module in a place that exists on pages you need jQueryUI

That block will force jQueryUI to load on pages that contain that block.

vegantriathlete’s picture

@spanac - Thanks for coming up with a workaround. I think your approach is much better than the way I have addressed it by adding the script entries to the .tpl file. I'll have to try your suggestion; it is similar to the way I did this in D6.

Nonetheless, I think that the root of the problem needs to be addressed in the module so that we don't need a workaround. Or, if this is, in fact, the correct way to be doing things, then we need to update the hook_help and the README.txt.

I haven't taken the time to dig through the code and do more testing to see if I can come up with a patch or a better understanding of the intention of how the module is to be used.

spanac’s picture

@vegantriathlete this is only a quick workaround, not the "right Drupal way" :)

vegantriathlete’s picture

@spanac - Actually, thinking about this more, I will see how things work if I place the drupal_add_library('system', 'ui.tabs'); call to my .tpl file.

General FYI for people reading this thread: You can look in system.module at the system_library hook to see which libraries are available.

Update: "no go" on adding drupal_add_library to the .tpl file. The classes are not being added to the tab divs (and thus the whole tab styling is blowing up). And, yes, I did clear my cache after making the change to the .tpl.

c0ldfury’s picture

Add drupal_add_library to a hook_init() function in a custom module.

lindsayo’s picture

I got this working.

- Installed jQuery Update module.
- In my template.php:

function mythemename_process_page(&$vars) {
   //Enable jQuery UI Library
  drupal_add_library('system', 'ui.slider');
  drupal_add_library('system', 'effects.slide');
  drupal_add_library('system', 'ui');
}

- In my scripts.js file, I was able to run

Drupal.behaviors.functionName = {
    attach: function (context, settings) {
      $('.selectorname').click(function(){
        $(this).hide('slide', {direction: 'left'}, 2500);
      });
    }
};

To see the list of available libraries, go here: http://api.drupal.org/api/drupal/modules%21system%21system.module/functi...

vegantriathlete’s picture

@lindsayo - thanks for the information. I have taken what you suggested and put it together as follows:


<?php
function mythemename_alpha_preprocess_page(&$vars) {
  $path_parts = explode('/', $_GET['q']);
  if ($path_parts[0] == 'product') {
    drupal_add_library('system', 'ui.tabs');
    $js = '(function($) {';  
    $js .= '$(document).ready(function(){';
    $js .= '$(\'#tab-content\').tabs();';
    $js .= '});';
    $js .= '})(jQuery);';
    drupal_add_js($js, array('type' => 'inline', 'scope' => 'footer'));
  }
}

Note: I am using this in an Omega 3.x subtheme, that's why it has the unusual prepended part. Also, I didn't bother installing jQuery Update at all. You won't always need to install this module. It depends on what you are doing in your jQuery (and/or if you need the updated version of the jQuery UI).

It seems that the net outcome of this thread is that jQuery update doesn't actually have anything (directly) to do with using the different jQuery UI stuff. It looks like that comes shipped with D7 at this point; there is no longer any need for the jquery_ui contributed module.

By the way, the default styling of the tabs is actually pretty nice!

vegantriathlete’s picture

Issue summary: View changes

Adding just a bit more text.

markhalliwell’s picture

Category: Bug report » Support request
Issue summary: View changes
Status: Active » Closed (works as designed)

Use proper Drupal APIs