Refresh JQuery UI Multiselect Widget - jquery-ui

Question

I'm actualilly trying tu use this nice widget : http://quasipartikel.at/multiselect_next/
I have two of this Widget in the same page, and what i'm trying to do is refreshing the second one when i select or deselect item in the first one.
For exemple, at the beggining, i only have this :
<select id="crc" class="multiselect" multiple="multiple">
</select>
Then, on select and deselect event, I'm creating some more nodes and add them to this (and it works, it create something like this :
<select id="crc" class="multiselect" multiple="multiple">
<option>test1</option>
<option>test2</option>
</select>
The problem is that I'm not able to refresh the second widget after adding the new options.
I fount an usefull post with similar problem and tried this :
$("#crc").multiselect("destroy").multiselect();
But it didn't work, does anyone have an idea?

Answer 1

I had exactly the same problem. Here's what worked for me:
To fix problem with destructor of ui.multiselect make the following change inside of the destroy function:
destroy: function() {
this.element.show();
this.container.remove();
if ($.Widget === undefined)
$.widget.prototype.destroy.apply(this, arguments);
else {
$.Widget.prototype.destroy.apply(this, arguments);
return this;
}
}
The old version was:
destroy: function() {
this.element.show();
this.container.remove();
$.widget.prototype.destroy.apply(this, arguments);
}
The reason of such changes is a new $.Widget introduced in jQuery 1.8. I also made the following changes/additions so that it would be compatible with IE9 and also provides a function to get selectedTexts as well.
// get all selected values in an array
selectedValues: function() {
return $.map( this.element.find('option[selected]=selected'), function(item,i) { return $(item).val(); });
},
selectedTexts: function () {
return $.map(this.element.find('option[selected]=selected'), function (item, i) { return $(item).html(); });
}