Trigger Select on AutoComboboxSelectMultipleWidget

[Chad Files]

I am using the AutoComboboxSelectMultipleWidget and I have setup Ajax calls to add a new element to the list the widget uses. When the add is complete I would like to select the new item. How does one do that?

I have successfully set the value of the input box to the new value using...

$("#id_of_field").val(new_value);

However, it will not add it to the selected deck. Here are a few things I have tried...

$('#id_of_field').trigger("autocompleteselect"); // trigger the select with jQuery

$('#id_of_field').djselectable("select"); // use the djselectable select event

$($('#id_of_field').data('autocomplete').menu.active).find('a').trigger('click'); // trigger click in the ui-list

None of these have worked, and an entire morning of searching has not turned up an answer. Any help will be greatly appreciated.

[Mark Lavin]

This sounds similar to how the 'Add Another' popup works in the admin. You can see the code which handles adding the item when the popup is dismissed here: https://bitbucket.org/mlavin/django-selectable/src/810af7f933d9/selectable/static/selectable/js/jquery.dj.selectable.js#cl-307

Essentially you need an associative array with 'id' and 'value' keys then you call $('#id_of_field').djselectable('select', {'id': myid, 'value': myvalue});

This assumes you are using django-selectable >= 0.4

[Chad Files]

The item array was the piece I was missing. My post events now return json that I parse to make the object to pass to djselectable. Thank you for the information.

Yes, setup is similar to the django admin "Add Another" except it is all based on jquery UI dialogs and ajax.

Nice work on this plugin by the way, it is very nice.

[Mark Lavin]

Thanks! If you get something working I'm sure other people using django-selectable would love to hear more about it. There is a feature request for something like but it's never been a priority for me. https://bitbucket.org/mlavin/django-selectable/issue/30/ It might be simple enough to give people a starting point in the docs.

[Chad Files]

I will try to write up a detailed solution when I am finished with this project. At a high level here is what I did that make it work...

1. When adding the form fields to the template I check the widget type. If I get an Auto* type I add an "Add" link to the template.
2. Embed the new item form that matches the "Add" link into the current template. This is done in a fashion that adhears to jquery UI dialog format http://jqueryui.com/demos/dialog/
3. Add some javascript that overrides the click action on the "Add" link to open the jquery dialog
4. Add some javascript to make a jquery ajax call when the form in the dialog is submitted. When the post is successful it returns a json representation of the object to the caller. I parse this json with jquery to make the object that djselectable needs, and call djselectable to set the object.

There are some other javascript methods to do some setup, cleanup, and other housekeeping but that is the deal in a nutshell. I also use django-ajax-forms (http://code.google.com/p/django-ajax-forms/) to handle validation