Plone Dexterity RelationChoice widget clashes with jQueryUI?

Question

A RelationChoice widget in my custom type works fine until collective.js.jqueryui autocomplete is enabled and then it stops working ie stops doing relation lookups; nothing happens when you type in the field.

(In another part of the site I use collective.js.jqueryui autocomplete with Google Maps API to return address suggestions as the user completes an address field.)

The current workaround is to disable collective.js.jqueryui autocomplete when i want to use the RelationChoice widget (and re-enable afterwards). Not a good solution.

• Plone 4.2.1.1
• collective.js.jqueryui 1.8.16.9 (also tried 1.10.0.1 - same clash)
• plone.app.dexterity 1.2.1

Independantly:

• If i only enable plone.formwidget.autocomplete/jquery.autocomplete.min.js my Google maps lookup doesnt fire (see code below) but the RelationChoice widget works
• If i only enable collective.js.jqueryui autocomplete my Google maps lookup works but the RelationChoice widget doesnt fire

Code sample:

---

    $(document).ready(function() {
        initialize();

        $(function() { // Google maps lookup
            $("#address").autocomplete({
                //This bit uses the geocoder to fetch address values
                source: function(request, response) {
                geocoder.geocode( {'address': request.term}, function(results, status) { ...

---

    ... <input type="text" name="address" id="address" autocomplete="off" class="ac_input">

Is it possible I could re-use plone.formwidget.autocomplete/jquery.autocomplete.min.js in the above code instead? I don't know how to get it to fire my Google maps lookup...? (collective.js.jqueryui autocomplete successfully activates the above function when enabled.)

Answer 1

OK, I have done It. At least on Plone 4.3

The first part was, to fully enable the jQuery ui effects in the package. There is a namespace problem and a missing file, that results in .effects() is not a function.

First, download the correct jQueryUI version cd into it and

jquery=/buildout_dir/parts/omelette/collective/js/jqueryui

cp jquery.ui.effect.min.js $jquery/js/jquery.ui.effect.core.min.js

then cd into the $jquery directory and convert all effect packages to correct namespace. Eg:

mv js/jquery.ui.effect-highlight.min.js js/jquery.ui.effect.highlight.min.js

Then replace all occurrences of effects with effect $jquery/config.py. In vim use

:1,$s/effects/effect/g

Secondly, to enable the jQuery based autocomplete widget, cd into the src directory of your buildout and

 git clone https://github.com/plone/plone.formwidget.autocomplete.git plone.formwidget.autocomplete
 git checkout jqueryui-autocomplete

then edit your versions.cfg. For me

plone.formwidget.autocomplete >= 2.0

works. Then edit your buildout.cfg and add the package under zcml and develop. I did a buildout, but it may be enough to restart Zope. The last step is obviously, to visit the portal installer and reinstall the product.

Update

As described in the comments, it was not fully functional. I further had to modify one .js file, namely autocomplete.js from the plone.formwidget.autocomplete package. Here is the result

http://pastebin.com/RPaLk80H

This all together makes the RelationChoiceWidget and the AutocompleteWidget work together in one form. I like it.

I also filed a bug report on github for the jQueryUI package.

Answer 2

Contenttree widget is based on autocomplete widget.

Autocomplete widget conflict with jqueryui autocomplete plugin.

Using collective.js.jqueryui you can unactivate the autocomplete plugin using the portal_registry.

It makes years that ploneformwidget.autocomplete is broken with jqueryui. There is a branch of plone.formwidget.autocomplete which is based on jqueryui (the branch 2.0) but I don't have already test it with contenttree widget.

So to fix your issue: go to jqueryui controlpanel and uncheck autocomplete plugin.

Answer 3

Update (according to the question's update):

Referring to Martin's tutorial and the section about relations, Dexterity pulls plone.formwidget.contenttree, which pulls plone.formwidget.contenttree, which pulls plone.formwidget.autocomplete.

The latter includes jQuery's autocomplete-sources, so does collective.js.jqueryui, pulled by your map-product. A conflict is very likely.

Try this:

• Go to http://yourhost.org:8080/yourSiteId/portal_javascripts/manage_workspace

• Uncheck '++resource++plone.formwidget.autocomplete/jquery.autocomplete.min.js' and hit save at the bottom. Make sure debug-mode is on (checkbox is in the very top for that).