How do I put form field sets in jQuery UI tabs?

Question

I have created a custom form in a module via Form API. The form sits in a page created by hook_menu, which calls a function that renders the form from a form builder function. Also included in my module is a form submit function.

Currently, my form is divided into field sets that can be collapsed and expanded. It would be a lot nicer if the field sets were in tabs. To acheive this I intend to use jQuery UI tabs with the following code snippet:

drupal_add_library('system', 'ui.tabs');
drupal_add_js('
(function($) {
    $(function() {
        $( "#tabs" ).tabs();
    });
})(jQuery);
', 'inline');

I know I can put the other required markup in #prefix and #suffix properties in the $form array to wrap the field sets in tabs - but where does the above code go in the module? Should I be using hook_node_view or hook_view or something to ensure that jQuery UI tabs are initialised on my form page?

Thanks

Answer 1

If you're adding javascript for a specific form, use

$form['#attached']

e.g:

$form['#attached']['library'][] = array('system', 'ui.tabs');
$form['#attached']['js'] = array(
  drupal_get_path('module', 'mymodule') . '/my_module_init.js',
);

You might also be interested in field_group, which provides jquery tabs etc.. for entity forms