Dialog dialog buttons and new split buttons widget

Dialog dialog buttons and new split buttons widget

There is a problem that I came across where having a dialog that has buttons and also contains the new button widget in the button set configuration.

I posted a like to a video demonstrating the issue:
http://www.utipu.com/app/invited/id/969bbbf8

Here is the source from the demo in the video above.
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
     <title>Untitled Page</title>
     <link type="text/css" rel="Stylesheet" href="Content/jquery.ui.css" />
     
     <script type="text/javascript" src="Scripts/jquery-1.4.2.min.js"></script>
     <script type="text/javascript" src="Scripts/jquery-ui-1.8.custom.min.js"></script>
    </head>
    <body>











     <div id="dialog" class="ui-helper-hidden">
     <form>
     <fieldset>
     <h2>Text1</h2>
     <input type="text" />
     <h2>Text 2</h2>
     <input type="text" />
     
     <h2>slider</h2>








     <div id="slider1" class="slider"></div>
     
     <h2>slider 2</h2>
     <div id="slider2" class="slider"></div>
     
     <h2>buttons 1</h2>
     <div class="buttonset">
     <input type="radio" id="one" checked="checked" name="grp1" /><label for="one">one</label>
     <input type="radio" id="two" name="grp1" /><label for="two">two</label>








     </div>
     
     <h2>buttons 2</h2>
     <div class="buttonset">
     <input type="radio" id="three" checked="checked" name="grp2" /><label for="three">three</label>
     <input type="radio" id="four" name="grp2" /><label for="four">four</label>
     </div>
     </fieldset>







     </form>
     </div>
     
     <script type="text/javascript">
     //<![CDATA[
     $( function() {
     $(".slider").slider({
     range: "min",
     value: 5,
     min: 1,
     max: 10,
     });
     
     $(".buttonset").buttonset();
     
     $("#dialog").dialog({
     autoOpen: true,
     height: 325,
     width: 325,
     modal: true,
     buttons: {
     Update: function() { $( this ).dialog( "close" ); },
     Cancel: function() { $( this ).dialog( "close" ); } 
     }
     });
     });
     //]]>
     </script>
    </body>
    </html>