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