Skip Navigation

jQuery UI 1.8.11 in Reason - a few notes on use

April 13, 2011 at 2:10 pm
By nwhite

As of April 14, 2011, jQuery UI 1.8.11 is distributed in Reason, and can be added as a head item and used in a module in a similar way to jQuery.

As with jQuery, we package a file called jquery_ui_latest.js into reason_package - it can most easily be referenced by using the new constant JQUERY_UI_URL.

Throughout Reason we want to use a consistent URL and version of jQuery and jQuery UI. Doing this ensures we benefit as much as possible from caching, and also that we will not create conflicts by loading various versions of jQuery and JQuery UI. This means that the best practice is to always use the JQUERY_URL, JQUERY_UI_URL, and JQUERY_UI_CSS_URL constants.

Specifically, these should be properly included in a reason module like this:

$head =& $this->get_head_items();
$head->add_javascript(JQUERY_UI_URL, true);
$head->add_javascript(JQUERY_URL, true);

The Reason 4 Beta 8 to Beta 9 upgrade script specifies default values for the above constants. A couple things to note about the above code:

  • We pass the 2nd parameter - add to top - to the add_javascript calls to force these jQuery files to load before other head items.
  • We add the file JQUERY_URL after JQUERY_UI_URL - this will ensure that JQUERY_URL loads before JQUERY_UI_URL, since the add to top parameter puts the file on top of the current stack.

The downside of what we are doing:

  • The dark side of our approach is that we cannot really use custom built (thus smaller) jquery ui distributions, or reliably use diverse jQuery UI themes in Reason modules - if various modules used different custom flavors of jQuery UI things would crash and burn.

If the version of these tools in the reason_package is updated in a way that breaks your custom code that relies on these tools, you can change the URLs in package_settings.php to reference an older working version of jQuery UI and/or jQuery (of course it is possible something in the reason core needs the latest functionality so you should update your old code).



Add a comment

The following fields are not to be filled out. Skip to Submit Button.
(This is here to trap robots. Don't put any text here.)
(This is here to trap robots. Don't put any text here.)
(This is here to trap robots. Don't put any text here.)