Skip to content
Permalink
Browse files

Fixed #5278 - ui.buttons doesn't visually reset on form "reset" event…

… or input "change" event
  • Loading branch information...
rdworth committed Mar 11, 2010
1 parent c2ed8ff commit 7799b4ecf9578a9ab059fb13bbfd2c4975862124
Showing with 125 additions and 23 deletions.
  1. +57 −0 tests/visual/button/button_ticket_5278.html
  2. +68 −23 ui/jquery.ui.button.js
@@ -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>
@@ -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 );

0 comments on commit 7799b4e

Please sign in to comment.
You can’t perform that action at this time.