i am sure i will be embarrassed at having missed something obvious. but i am trying to use a few basic jquery ui components (dialog, tabs). i see that jquery ui is provided as part of backdrop core, but i cannot figure out how to load the actual library. if i simply try to access a dialog (eg), i get the "...dialog is not a function" javascript error. the jquery javascript file is included by default in my pages, but jqueryui is not, and i don't know how to get it correctly included. if i add a <script> tag to pull in the file "/core/misc/ui/jquery.ui.core.min.js" i get this javascript error:

ReferenceError: define is not defined

i know i am missing something obvious, but could someone be kind enough to point out to me what it is i am missing? how do i access jquery ui?

thanks in advance!

 

 

Comments

i also cannot seem to use jquery-ui, did you ever figure this out?

BWPanda's picture

I haven't done this myself, but after looking through the code it seems that jQuery UI is included as a library (https://github.com/backdrop/backdrop/blob/1.x/core/modules/system/system.module#L1439). There are different libraries available depending on how much of jQuery UI you want to use - e.g. jQuery UI Accordion is included here: https://github.com/backdrop/backdrop/blob/1.x/core/modules/system/system.module#L1468

To use this, you'd just add the library you want (e.g. jQuery UI Accordion) like so:

backdrop_add_library('system', 'ui.accordion');

That should get you on the path to getting this working. Check out the following resources for more info:

Hope that helps!

@BWPanda thanks for your help!

In the meantime I've found out a similar but different way to do this. For anyone trying to do the same thing, I'll post this here.

Inspiration came from Drupal documentation: https://www.drupal.org/docs/7/howtos/how-to-add-jquery-ui-libraries-to-a...

In my case I just wanted to add jQueryUI Accordion to one single block, and didn't want to write a custom module for this, so I included it in the theme. So I added this to my template.php:

/*
 * Implements hook_block_view_MODULE_DELTA_alter().
 */
function MY_THEME_block_view_BLOCK_ID_alter(&$data, $block) {
  $data['content']['#attached'] = array(
    'library' => array(
      array('system', 'ui.accordion'),
    ),
    'js' => array(
      array(
        'data' => path_to_theme() . '/js/CUSTOM_SCRIPT.js',
        'type' => 'file',
      ),
    ),
  );
}

Works like a charm! Of course for other use cases you'd have to implement different hooks.