Skip to content

Instantly share code, notes, and snippets.

@juandopazo
Created August 2, 2012 00:01
Show Gist options
  • Save juandopazo/3231693 to your computer and use it in GitHub Desktop.
Save juandopazo/3231693 to your computer and use it in GitHub Desktop.

The Button widget is removing the type attribute from the Cancel button. This makes that button behave like a submit button.

There are many possible paths to make this work. I'll start from simple to complex. The first is to avoid the issue entirely and not use JavaScript at all. Just use a link:

<form action="/Administration/Department/Create2" method="post">
    <button class="yui3-button">Save</button>
    <a class="yui3-button" href="/Administration/Department/List">Cancel</a>
</form>

After all, all that the Button widget is doing is adding a couple of css classes to each tag and a lot of other stuff that makes more complex widgets possible that simple buttons don't need. As you can see in the Styling elements with cssbutton example, even <a> tags can look like nice buttons using just the YUI css styles. So after all, if you don't have to use JavaScript, better not to use it.

A second option is to avoid the Y.Button widget and use the Y.Plugin.Button plugin. It's more lightweight in both kb and processing power. And it doesn't touch the tag attributes, so your location code will work.

YUI().use('button-plugin', function (Y) {
  Y.all('button').plug(Y.Plugin.Button);
  Y.one('#CancelButton').on('click', function () {
    Y.config.win.location = '/Administration/Department/List';
  });
});

And finally you can hack around the behavior of the Y.Button widget by preventing the default action of the button:

var cancelButton = new Y.Button({
  srcNode: '#CancelButton',
  on: {
  'click': function (e) {
      e.preventDefault();
      Y.config.win.location = '/Administration/Department/List';
    }
  }
}).render();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment