1
votes

In an application with over 400 pages, I am modifying some common code to change all select fields on each page to the jquery ui selectmenu. I have successfully done so with this code:

$(function() {
 $("select").each(function(){
   $( this ).selectmenu({ style: 'dropdown', width : 'auto' });  
  });
});

this works - however the event handlers for onchange and onfocus for the previously existing select object that are not firing for the new selectmenu.

I tried the following to save them but it doesn't work:

 <script language="JavaScript" type="text/javascript">
 <!--
  $(function() {
     $("select").each(function(){
     changeH = this.onchange;   // save the event handler 
     alert(changeH);  // this shows the correct handler 
     $( this ).selectmenu({ style: 'dropdown', width : 'auto' });  

     $( this ).selectmenu().change = changeH;     // this line does not work
   });
   });
  //-->
  </script> 

Perhaps there is a better way to do this, such as an option on selectmenu to fire the events of the previous object. I am going to look at the selectmenu code now but I wanted some thoughts on this, given I have hundreds of select fields on an existing set of pages I want to change in a common place with jquery. thanks..

I solved it. $(function() { $("select").each(function(){ changeH = this.onchange; focusH = this.onfocus; $( this ).selectmenu({ style: 'dropdown', width : 'auto' }); $( this ).on('selectmenuchange', changeH ); $( this ).on('selectmenufocus', focusH ); }); }); - vosdev