Geek asks and answers

The YUI3 button press event acts as a send type instead of a button type

I use ASP.NET MVC 3with Yahoo API version 3. I am trying to get my YUI3 buttonredirect to another page, when I click on it, this button is my cancel button. The cancel button is a simple button type, but it is treated as a submit button. It does not redirect to the correct page, but acts as a submit button, and it starts checking my page, like what the submit button will do.

I thought it could be with my HTML, but I tested it. He confirmed the correctness of 100%. So I split the whole page to a minimum, but the cancel button still works like a submit button. Here is my HTML markup:

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
     <head>
          <title>Create2</title>
     </head>

     <body class="yui3-skin-sam">

          <h1>Test submit</h1>

          @using (Html.BeginForm())
          {
               <button id="SaveButton" type="submit">Save</button>
               <button id="CancelButton" type="button">Cancel</button>
          }

          <script src="http://yui.yahooapis.com/3.6.0pr4/build/yui/yui-min.js"></script>
          <script>
               YUI().use('button', function (Y) {
                    var saveButton = new Y.Button({
                         srcNode: '#SaveButton'
                    }).render();

                    var cancelButton = new Y.Button({
                         srcNode: '#CancelButton',
                         on: {
                              'click': function (e) {
                                   Y.config.win.location = '/Administration/Department/List';
                              }
                         }
                    }).render();
               });
          </script>

     </body>
</html>

, ? , API? IE8 FireFox.

UPDATE:

, , . , .

+1
2

Y.Button type "". .

. . , JavaScript. :

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

, , Button, - CSS , . Styling elements with cssbutton, <a> , CSS YUI. JavaScript, .

- Y.Button Y.Plugin.Button. kb, . , .

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';
  });
});

, , Y.Button, :

var cancelButton = new Y.Button({
  srcNode: '#CancelButton',
  on: {
  'click': function (e) {
      e.preventDefault();
      Y.config.win.location = '/Administration/Department/List';
    }
  }
}).render();
+2

, . javascript onClick.

<button id="SaveButton" type="submit">Save</button>
<a id="CancelButton" href='/Administration/Department/List'>Cancel</a>

, : http://yuilibrary.com/yui/docs/button/cssbutton.html

+3

More articles:


All Articles