0

我正在使用 mvc 使用弹出表单与 jquery 一起发布帖子。在我看来，我使用向导 mvc 列表创建器列出了我的数据中的内容。当我在没有弹出窗口的情况下提交时，它可以正常工作并且页面会刷新，但是当我使用弹出窗口进行提交时，我必须手动 F5 刷新才能看到结果。我错过了什么？

$('#my-modal form').live('submit', function () {
    clearErrors();

    $.post($(this).attr('action'), $(this).serialize(), function (data, status) {
        $('#my-modal').modal('hide');               

    }).error(function (error, status) {
        writeError('msgError', 'Error processing request. Please check errors and      
                                try again!');
        $('.modal-body p.body').html(error.responseText);

    });
    return false;
});
4

1 回答 1

0

试试下面的代码。它适用于 jquery 模型表单。只需复制并粘贴到您的视图

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Test</title>
    <meta charset="utf-8" />
  <title>jQuery UI Dialog - Modal form</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <style>
    body { font-size: 62.5%; }
    label, input { display:block; }
    input.text { margin-bottom:12px; width:95%; padding: .4em; }
    fieldset { padding:0; border:0; margin-top:25px; }
    h1 { font-size: 1.2em; margin: .6em 0; }
    div#users-contain { width: 350px; margin: 20px 0; }
    div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
    div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
    .ui-dialog .ui-state-error { padding: .3em; }
    .validateTips { border: 1px solid transparent; padding: 0.3em; }
  </style>
  <script>
      $(function() {
          var name = $( "#name" ),
            email = $( "#email" ),
            password = $( "#password" ),
            allFields = $( [] ).add( name ).add( email ).add( password ),
            tips = $( ".validateTips" );

          function updateTips( t ) {
              tips
                .text( t )
                .addClass( "ui-state-highlight" );
              setTimeout(function() {
                  tips.removeClass( "ui-state-highlight", 1500 );
              }, 500 );
          }

          function checkLength( o, n, min, max ) {
              if ( o.val().length > max || o.val().length < min ) {
                  o.addClass( "ui-state-error" );
                  updateTips( "Length of " + n + " must be between " +
                    min + " and " + max + "." );
                  return false;
              } else {
                  return true;
              }
          }

          function checkRegexp( o, regexp, n ) {
              if ( !( regexp.test( o.val() ) ) ) {
                  o.addClass( "ui-state-error" );
                  updateTips( n );
                  return false;
              } else {
                  return true;
              }
          }

          $( "#dialog-form" ).dialog({
              autoOpen: false,
              height: 300,
              width: 350,
              modal: true,
              buttons: {
                  "Create an account": function() {
                      var bValid = true;
                      allFields.removeClass( "ui-state-error" );

                      bValid = bValid && checkLength( name, "username", 3, 16 );
                      bValid = bValid && checkLength( email, "email", 6, 80 );
                      bValid = bValid && checkLength( password, "password", 5, 16 );

                      bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
                      // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/

          bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );

          if ( bValid ) {
              $( "#users tbody" ).append( "<tr>" +
                "<td>" + name.val() + "</td>" +
                "<td>" + email.val() + "</td>" +
                "<td>" + password.val() + "</td>" +
              "</tr>" );
              $( this ).dialog( "close" );
          }
        },
          Cancel: function() {
              $( this ).dialog( "close" );
          }
      },
        close: function() {
            allFields.val( "" ).removeClass( "ui-state-error" );
        }
    });

      $( "#create-user" )
        .button()
        .click(function() {
            $( "#dialog-form" ).dialog( "open" );
        });
  });
  </script>
</head>
<body>
   <div id="dialog-form" title="Create new user">
  <p class="validateTips">All form fields are required.</p>

  <form>
  <fieldset>
    <label for="name">Name</label>
    <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
    <label for="email">Email</label>
    <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
    <label for="password">Password</label>
    <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
  </fieldset>
  </form>
</div>


<div id="users-contain" class="ui-widget">
  <h1>Existing Users:</h1>
  <table id="users" class="ui-widget ui-widget-content">
    <thead>
      <tr class="ui-widget-header ">
        <th>Name</th>
        <th>Email</th>
        <th>Password</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>john.doe@example.com</td>
        <td>johndoe1</td>
      </tr>
    </tbody>
  </table>
</div>
<button id="create-user">Create new user</button>


</body>
</html>
于 2013-07-18T06:37:33.557 回答