Show bootloader on Ajax.BeginForm submit

Question

What is the best way to show the loader and disable the button when submitting the form:

@using (Ajax.BeginForm(MVC.Account.Login(), new AjaxOptions { OnSuccess = "onLoginSuccess" }, new { @id = "loginForm" })) { <div id="logbtn"> <input type="submit" name="invisible" class="subinvisible"/> <p>@HeelpResources.AccountLoginViewLoginButtonLabel</p> <img src="~/Content/Images/ui-symb-arrow-right-white-15x15.png" width="13" height="12" /> </div> } 

Bootloader image file

 <img src="~/Content/Images/ui-loader-white-16x16.gif" /> 

Perhaps using OnBegin from BeginForm to show the loader and OnComplete to hide? But how can I change the image?

Any sugestion to find good quality free downloaders?

thanks

Answer 1

Put your boot image tag in a div tag like this:

 <div id="loading"> <img src="~/Content/Images/ui-loader-white-16x16.gif" /> </div> 

In your CSS file:

 div#loading { display: none; } 

And in your form:

 @using (Ajax.BeginForm(MVC.Account.Login(), new AjaxOptions { OnSuccess = "onLoginSuccess", LoadingElementId = "loading", OnBegin = "onLoginBegin" }, new { @id = "loginForm" })) { <div id="logbtn"> <input type="submit" name="invisible" class="subinvisible"/> <p>@HeelpResources.AccountLoginViewLoginButtonLabel</p> <img src="~/Content/Images/ui-symb-arrow-right-white-15x15.png" width="13" height="12" /> </div> } 

And add a script to your view:

 <script type="text/javascript"> function onLoginBegin() { // Disable the button and hide the other image here // or you can hide the whole div like below $('#logbtn').hide(); } </script>