jQuery UI Selectmenu question

jQuery UI Selectmenu question

I am using jQuery UI Selectmenu.  I am not sure if this plugin is an "official" UI plugin and belongs here, but hope it does.

I have a table with multiple rows, and a select menu in each row.

Upon change of the select menu, I store some info in the DB.  As such, I want to prompt the user to confirm that the change should be made, and if not, revert to the original select menu status.  My plan was to use a click event to always store the original select value.
  1. $('.className').click(function() { select_cache=$(this).val(); });
  2. $('.className').change(function() {
  3.  if(confirm('Are you sure?')) {alert('post data to server');}
  4.  else {alert('change back to value'+select_cache);}
  5. });
This approach seems to work only if the user selects the menu by clicking on the up/down arrows, and not by clicking on the menu text.  Any suggestions?


By the way, selectmenu doesn't appear to work correctly with current jQueryUI.  To get it working, I had to make the following changes to ui.selectmenu.js.

Replace
  1.     _init: function() {
With
  1.     widgetEventPrefix: "selectmenu",
  2.     options: {
  3.         transferClasses: true,
  4.         style: 'popup',
  5.         width: null,
  6.         menuWidth: null,
  7.         handleWidth: 26,
  8.         maxHeight: null,
  9.         icons: null,
  10.         format: null,
  11.         errorClass: 'ui-state-error ui-selectmenu-error'
  12.     },    
  13.     _create: function() {
Replace
  1. this.newelement.prepend('<span class="'+self.widgetBaseClass+'-status">'+ selectOptionData[this._selectedIndex()].text +'</span>');
With
  1. this.newelement.prepend('<span class="'+self.widgetBaseClass+'-status">'+ this._selectedIndex() +'</span>');       
Add the following line at the end of destroy().
  1. $.Widget.prototype.destroy.call( this );
Replace
  1. _setData: function(key, value) {
With
  1. _setOption: function(key, value) {
Replace
  1. $.extend($.ui.selectmenu, {
  2.     getter: "value",
  3.     version: "@VERSION",
  4.     eventPrefix: "selectmenu",
  5.     defaults: {
  6.         transferClasses: true,
  7.         style: 'popup',
  8.         width: null,
  9.         menuWidth: null,
  10.         handleWidth: 26,
  11.         maxHeight: null,
  12.         icons: null,
  13.         format: null
  14.     }
  15. });
With
  1. $.extend($.ui.selectmenu, {
  2.     version: "@VERSION",
  3. });