From: Richard Worth Date: Thu, 11 Mar 2010 06:31:16 +0000 (+0000) Subject: Fixed #5278 - ui.buttons doesn't visually reset on form "reset" event or input "chang... X-Git-Tag: 1.8~56 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=7799b4ecf9578a9ab059fb13bbfd2c4975862124;p=jquery-ui.git Fixed #5278 - ui.buttons doesn't visually reset on form "reset" event or input "change" event --- diff --git a/tests/visual/button/button_ticket_5278.html b/tests/visual/button/button_ticket_5278.html new file mode 100644 index 000000000..eb516faa2 --- /dev/null +++ b/tests/visual/button/button_ticket_5278.html @@ -0,0 +1,57 @@ + + + + Button Visual Test : Button ticket #5278 + + + + + + + + + + +

#5278 - ui.buttons doesn't visually reset on form "reset" event or input "change" event

+ + + + + diff --git a/ui/jquery.ui.button.js b/ui/jquery.ui.button.js index 14b8a6504..392f96e4e 100644 --- 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 );