]> source.dussan.org Git - jquery-ui.git/commitdiff
projects / jquery-ui.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: c2ed8ff)
Fixed #5278 - ui.buttons doesn't visually reset on form "reset" event or input "chang...
authorRichard Worth <rdworth@gmail.com>
Thu, 11 Mar 2010 06:31:16 +0000 (06:31 +0000)
committerRichard Worth <rdworth@gmail.com>
Thu, 11 Mar 2010 06:31:16 +0000 (06:31 +0000)
tests/visual/button/button_ticket_5278.html [new file with mode: 0644] patch | blob
ui/jquery.ui.button.js patch | blob | history

diff --git a/tests/visual/button/button_ticket_5278.html b/tests/visual/button/button_ticket_5278.html
new file mode 100644 (file)
index 0000000..eb516fa
--- /dev/null
+++ b/tests/visual/button/button_ticket_5278.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+       <title>Button Visual Test : Button ticket #5278</title>
+       <link rel="stylesheet" href="../visual.css" type="text/css" />
+       <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css">
+       <script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
+       <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
+       <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
+       <script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script>
+       <script type="text/javascript">
+       $(function() {
+
+       $('#id1, #id2, #id3, #id4').button();
+
+       $('#r1, #r2, #r3, #r4').button();
+
+       });
+       </script>
+</head>
+<body>
+       
+<h1 class="ui-widget-header"><a href="http://dev.jqueryui.com/ticket/5278">#5278 - ui.buttons doesn't visually reset on form "reset" event or input "change" event</a></h1>
+
+<form>
+               
+<input name="a1" id="id1" type="checkbox"/>
+<label for="id1">Checkbox</label>
+
+<input name="a2" id="id2" type="checkbox"/>
+<label for="id2">Checkbox</label>
+
+<input name="a3" id="id3" type="checkbox" checked="checked" />
+<label for="id3">Checkbox</label>
+
+<input name="a4" id="id4" type="checkbox"/>
+<label for="id4">Checkbox</label>
+
+<input type="reset"/>
+
+<input name="r" id="r1" type="radio"/>
+<label for="r1">Radio</label>
+
+<input name="r" id="r2" type="radio"/>
+<label for="r2">Radio</label>
+
+<input name="r" id="r3" type="radio" checked="checked" />
+<label for="r3">Radio</label>
+
+<input name="r" id="r4" type="radio"/>
+<label for="r4">Radio</label>
+
+
+</form>
+
+</body>
+</html>
diff --git a/ui/jquery.ui.button.js b/ui/jquery.ui.button.js
index 14b8a65047934a5f3a4e8caf434ee23b9bb9793f..392f96e4ef869fade54e53ed3230038fcbb6c41b 100644 (file)
--- a/ui/jquery.ui.button.js
+++ b/ui/jquery.ui.button.js
@@ -16,7 +16,31 @@
 var lastActive,
        baseClasses = "ui-button ui-widget ui-state-default ui-corner-all",
        otherClasses = "ui-state-hover ui-state-active " +
-               "ui-button-icons-only ui-button-icon-only ui-button-text-icons ui-button-text-icon ui-button-text-only";
+               "ui-button-icons-only ui-button-icon-only ui-button-text-icons ui-button-text-icon ui-button-text-only",
+       formResetHandler = function(event) {
+               $(':ui-button', event.target.form).each(function() {
+                       var inst = $(this).data('button');
+                       setTimeout(function() {
+                               inst.refresh()
+                       }, 1);
+               });
+       },
+       radioGroup = function(radio) {
+               var name = radio.name,
+                       form = radio.form,
+                       radios = $([]);
+               if ( name ) {
+                       if ( form ) {
+                               radios = $( form ).find( "[name='" + name + "']" );
+                       } else {
+                               radios = $( "[name='" + name + "']", radio.ownerDocument )
+                                       .filter(function() {
+                                               return !this.form;
+                                       });
+                       }
+               }
+               return radios;
+       };
 
 $.widget( "ui.button", {
        options: {
@@ -28,6 +52,8 @@ $.widget( "ui.button", {
                }
        },
        _create: function() {
+               this.element.closest('form').unbind('reset.button').bind('reset.button', formResetHandler);
+               
                this._determineButtonType();
                this.hasTitle = !!this.buttonElement.attr( "title" );
 
@@ -66,6 +92,13 @@ $.widget( "ui.button", {
                        .bind( "blur.button", function() {
                                $( this ).removeClass( focusClass );
                        });
+                       
+               if ( toggleButton ) {
+                       var self = this;
+                       this.element.bind('change.button', function() {
+                               self.refresh();
+                       });
+               }
 
                if ( this.type === "checkbox") {
                        this.buttonElement.bind( "click.button", function() {
@@ -83,27 +116,14 @@ $.widget( "ui.button", {
                                $( this ).addClass( "ui-state-active" );
                                self.buttonElement.attr( "aria-pressed", true );
 
-                               var radio = self.element[ 0 ],
-                                       name = radio.name,
-                                       form = radio.form,
-                                       radios;
-                               if ( name ) {
-                                       if ( form ) {
-                                               radios = $( form ).find( "[name='" + name + "']" );
-                                       } else {
-                                               radios = $( "[name='" + name + "']", radio.ownerDocument )
-                                                       .filter(function() {
-                                                               return !this.form;
-                                                       });
-                                       }
-                                       radios
-                                               .not( radio )
-                                               .map(function() {
-                                                       return $( this ).button( "widget" )[ 0 ];
-                                               })
-                                               .removeClass( "ui-state-active" )
-                                               .attr( "aria-pressed", false );
-                               }
+                               var radio = self.element[ 0 ];
+                               radioGroup( radio )
+                                       .not( radio )
+                                       .map(function() {
+                                               return $( this ).button( "widget" )[ 0 ];
+                                       })
+                                       .removeClass( "ui-state-active" )
+                                       .attr( "aria-pressed", false );
                        });
                } else {
                        this.buttonElement
@@ -200,6 +220,32 @@ $.widget( "ui.button", {
                $.Widget.prototype._setOption.apply( this, arguments );
                this._resetButton();
        },
+       
+       refresh: function() {
+               if ( this.type === "radio" ) {
+                       radioGroup( this.element[0] ).each(function() {
+                               if ( $(this).is(':checked') ) {
+                                       $(this).button('widget')
+                                               .addClass('ui-state-active')
+                                               .attr('aria-pressed', true);
+                               } else {
+                                       $(this).button('widget')
+                                               .removeClass('ui-state-active')
+                                               .attr('aria-pressed', false);
+                               }
+                       });
+               } else if ( this.type === "checkbox" ) {
+                       if ( this.element.is(':checked') ) {
+                               this.buttonElement
+                                       .addClass('ui-state-active')
+                                       .attr('aria-pressed', true);
+                       } else {
+                               this.buttonElement
+                                       .removeClass('ui-state-active')
+                                       .attr('aria-pressed', false);
+                       }
+               }
+       },
 
        _resetButton: function() {
                if ( this.type === "input" ) {
@@ -276,5 +322,4 @@ $.widget( "ui.buttonset", {
        }
 });
 
-$.fn.log = function() { console.log(this); return this; };
 })( jQuery );
The official jQuery user interface library: https://github.com/jquery/jquery-ui