jquery - Ajax.BeginForm does not show bootstrap modal by onBegin function after post -
i have login view in mvc ajax.beginform. want display bootstrap modal dialog on te onbeing method , once action completes want close bootsrap dialog. problem when submit form dialog doesn't show. action controller works fine! wrong?
<!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@viewbag.title - b.bring</title> @styles.render("~/content/css") <link href="@url.content("~/content/login/login.css")" rel="stylesheet" type="text/css"/> <script src="~/scripts/jquery-1.11.1.min.js"></script> <script src="~/scripts/respond.min.js"></script> <script src="~/scripts/bootstrap.min.js"></script> <script src="http://ajax.aspnecdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.js"></script> <script src="~/scripts/jquery.validate.min.js"></script> <script src="~/scripts/jquery.validate.unobtrusive.min.js"></script> <script src="~/scripts/bootswatch.js"></script> <script type="text/javascript"> function openprogressdialog() { //alert('xczc'); $('#progressmodal').modal({ keyboard: true, show: true, backdrop: true }) return true; } function closeprogressdialog() { $('#progressmodal').modal({ show: false }) return true; } function onbegin() { $("#btnlogin").button('loading'); } //$(document).ready(function() { // $('#form0').submit(function() { // openprogressdialog(); // //var form = $(this); // //var url = form.attr('action'); // //var formdata = form.serialize(); // //$.post(url, formdata, function(result) { // // // result // //}); // return false; // }); //}); </script> </head> <body> @*<div id="fullscreen_bg" class="fullscreen_bg"></div>*@ <div class="container"> <button class="btn btn-primary" onclick="openprogressdialog()">test call modal (work!)</button> <div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2"> <div class="panel panel-info panel-default"> <div class="panel-heading"> <div class="panel-title"><span class="glyphicon glyphicon-globe"></span> @bbring.shared.globalvariables.applicationname - login</div> </div> @using (ajax.beginform("login", "account", null, new ajaxoptions { httpmethod = "post", insertionmode = insertionmode.replace, onbegin = "return openprogressdialog();", oncomplete="return closeprogressdialog();" loadingelementid = "divloading", loadingelementduration = 1000 })) { @html.validationsummary(true, "", new { @class = "text-danger" }) @html.antiforgerytoken() <div class="panel-body" style="padding-top:30px"> <div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"> </div> @html.validationmessagefor(m => m.username, "", new { @class = "text-danger" }) <div style="margin-bottom: 25px" class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> @html.textboxfor(m => m.username, new { @class = "form-control", @placeholder = "username" }) </div> @html.validationmessagefor(m => m.password, "", new { @class = "text-danger" }) <div style="margin-bottom: 25px" class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span> @html.passwordfor(m => m.password, new { @class = "form-control", @placeholder = "password" }) </div> <div class="input-group"> <div class="checkbox"> <label> <input id="login-remember" type="checkbox" name="remember" value="1"> ricordami l'account </label> </div> </div> </div> <div class="panel-footer"> <div class="bs-component text-right"> <div id="divloading" style="display:none"> <img src="~/content/image/dx-spinner.png" /> </div> <button id="btnlogin" type="submit" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="accedi bbring" data-loading-text="login..."><span class="glyphicon glyphicon-log-in"></span> login</button> <button type="reset" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" data-original-title="ripulisci campi"><span class="glyphicon glyphicon-refresh"></span> reset</button> </div> </div> } </div> </div> <div id="progressmodal" class="modal" role="dialog" tabindex="-1" style="display:none"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-body"> <div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"> <span class="sr-only">45% complete</span> </div> </div> </div> </div> </div> </div> </div> </body> </html>
make sure 2 tags on page.
script
<script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
css link
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" rel="stylesheet">
jquery
$(document).ready(function () { $("#progressmodal").modal({ keyboard: true, show: false, backdrop: 'static' }); function openprogressdialog() { $('#progressmodal').modal("show"); return true; } function closeprogressdialog() { $('#progressmodal').modal("close") return true; } $("input").click(function () { openprogressdialog(); }); });
Comments
Post a Comment