Plone Dexterity RelationChoice collision widget with jQueryUI?

Question

The RelationChoice widget in my custom type works fine until collective.js.jqueryui autocomplete is turned on and then stops working, i.e. stop doing relationship searches; nothing happens when you enter a field.

(In another part of the site, I use collective.js.jqueryui autocomplete with the Google Maps API to return suggestions for addresses when the user fills in the address field.)

The current workaround is to disable collective.js.jqueryui autocomplete when I want to use the RelationChoice widget (and enable it again). Bad decision.

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

Independantly:

• If I included only plone.formwidget.autocomplete/jquery.autocomplete.min.js , my search in Google maps does not work (see code below), but RelationChoice widget works
• If I enabled only collective.js.jqueryui autocomplete , my google maps search works, but the RelationChoice widget does not start

Code example:

---

  $(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 that I could reuse plone.formwidget.autocomplete/jquery.autocomplete.min.js in the above code? I don’t know how to make it run my Google search ...? ( collective.js.jqueryui autocomplete successfully activates the above function when turned on.)

Answer 1

Ok, I did it. At least on Plone 4.3

The first part is to fully incorporate the jQuery ui effects in the package. There is a problem with the namespace and the missing file, which leads to .effects() is not a function .

First load the correct jQueryUI cd version 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 to the $jquery directory and convert all effect packages to fix the namespace. For instance:

 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 . When using vim

 :1,$s/effects/effect/g 

Secondly, to include a jQuery-based cd autocomplete widget in the src directory of your assembly 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 buildout, but that might be enough to restart Zope. The final step, obviously, is to visit the portal installer and reinstall the product.

Update

As described in the comments, it was not fully functional. I also 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 allows RelationChoiceWidget and AutocompleteWidget to work together in one form. I like it.

I also posted a github bug report for the jQueryUI package.

Answer 2

Contenttree widget is based on autocomplete widgets.

Autocomplete widget conflicts with jqueryui autocomplete plugin.

Using the collect.js.jqueryui command, you can disable the autocomplete plugin using portal_registry.

This causes ploneformwidget.autocomplete to break into jqueryui. There is a plone.formwidget.autocomplete branch that is based on jqueryui (branch 2.0), but I have not tested it with the contenttree widget yet.

So, to fix your problem: go to the jqueryui control panel and uncheck the autocomplete plugin.

Answer 3

Refresh (as updated by the question):

Referring to Martin's tutorial and links section, Dexterity pulls out plone.formwidget.contenttree, which pulls plone.formwidget.contenttree, which pulls plone.formwidget.autocomplete.

The latter includes jQuery autocomplete-sources, so the .js.jqueryui team pulled by your card product. Conflict is very likely.

Try the following:

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

• Uncheck "++ resource ++ plone.formwidget.autocomplete / jquery.autocomplete.min.js" and click "Save" at the bottom. Make sure that debugging mode is enabled (the checkbox is in the very top corner).