asp.net mvc - MVC page not refresh with jquery -
i using mvc doing post jquery using popup form. in view list contents data using wizard mvc list creator. when submit without popup, works fine , page refreshes, when popup, have manually f5 refresh see results. missing?
$('#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 , try again!'); $('.modal-body p.body').html(error.responsetext); }); return false; });
try below code.it's working fine jquery model form. copy , paste view
<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 between " + min + " , " + 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 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 letter." ); // jquery.validate.js (by joern), contributed scott gonzalez: http://projects.scottsplayground.com/email_address_validation/ bvalid = bvalid && checkregexp( password, /^([0-9a-za-z])+$/, "password field allow : a-z 0-9" ); if ( bvalid ) { $( "#users tbody" ).append( "<tr>" + "<td>" + name.val() + "</td>" + "<td>" + email.val() + "</td>" + "<td>" + password.val() + "</td>" + "</tr>" ); $( ).dialog( "close" ); } }, cancel: function() { $( ).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 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> 
Comments
Post a Comment