Integrating jQuery UI 1.8 with Plone 4

We had some problems integrating jQuery UI to Plone 4.

Looks like jQuery UI wants to define jQuery.tabs() and Plone 4 wants to do this also (form_tabbing.js).  After loading jQuery UI, Edit page tabs stopped working.

The solution is to build a custom jQuery UI download bundle without Tabs feature includes. Then you should be able to simple drop jQuery UI to any page:

 <metal:head define-macro="javascript_head">    
 <link rel="stylesheet" tal:attributes="href string:${context/portal_url}/jquery-ui-1.8.9.custom/css/ui-lightness/jquery-ui-1.8.9.custom.css" type="text/css" />
 <script type="text/javascript" tal:attributes="src string:${context/portal_url}/jquery-ui-1.8.9.custom/js/jquery-ui-1.8.9.custom.min.js"></script>
 <script type="text/javascript" src="yourjqueryuiscript.js"></script>
 </metal:head>

Maybe jQuery object is the next battlefield of namespace conflicts…

\"\" Subscribe to RSS feed Follow me on Twitter Follow me on Facebook Follow me Google+

3 thoughts on “Integrating jQuery UI 1.8 with Plone 4

  1. Pingback: Tweets that mention Integrating jQuery UI 1.8 with Plone 4 | mFabrik - web and mobile development -- Topsy.com

  2. You can use a simple workaround to use both tabs libraries:
    1 – load jqueryui right after jquery. Using for example (jsregistry.xml):

    2 – create a script that renames the jqueryui tabs plugin (name jquery-ui-tools.compat.js for example):

    jQuery.fn.uitabs = jQuery.fn.tabs;
    delete jQuery.fn.tabs;

    3 – the script must run after jqueryui and before jquerytools:

    In this way we have the jQueryUI tabs under the name of jQuery.uitabs while jQuery.tabs remains the jQuerytools tabs plugin.

  3. We should discuss this. I’m trying to maintain collective.js.jqueryui to have a good history between Plone and JQueryui. It is hard when nobody report issues.

    For the tab issue we have removed the tabs plugin from the build. Please try to use this add-on instead and report me issues, we will try to find good solutions.

Leave a Reply

Your email address will not be published. Required fields are marked *