Question

108

Show loader on Ajax.BeginForm submit

rated 0 times [ 112] [ 4] / answers: 1 / hits: 28306 / 11 Years ago, tue, july 16, 2013, 12:00:00

What is the best way to show a loader and disable the button when we submit a 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>

}

The loader image file is

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

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

Any sugestion to find nice quality free loaders?

Thanks

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

charity

Add To Favorites

Follow

Total Points: 503

Total Questions: 98

Total Answers: 125

Location: Mali

Member since Fri, Dec 3, 2021

3 Years ago

charity questions

1 Generating UUID in react using crypto api

Tue, Feb 15, 22, 00:00, 2 Years ago

1 How to remove event listener from Vue Component

Sat, Jan 15, 22, 00:00, 2 Years ago

1 Using create-react-app and connecting it to my git repository?

Fri, Apr 23, 21, 00:00, 3 Years ago

1 How to continue scrolling the page after the last slide of the slick slider in the both direction up and down?

Fri, Jul 17, 20, 00:00, 4 Years ago

1 How to execute a function before and after each class method call?

Sun, Feb 23, 20, 00:00, 4 Years ago

View All

answered 11 Years ago diontajm · Accepted Answer

Put your loading image tag inside 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>