Call a javascript loading function and a controller action

Question

I am trying to display a "loading" page when doing an action.

In a view I have the following form:

<div>
    <label class="bold center">
        Payment options
    </label>
    <div class="center">
        <div class="float-left">
            <label class="center bold">PayPal</label>
            <form id="payPal" action="@Url.Action("PaypalMethod")">
                <input type="image" name="submit"
                       src="~/Images/Functional/Icons/PayPal Pay.gif"
                       alt="PayPal — The safer, easier way to pay online." onclick="needToConfirm = false" />
            </form>
        </div>
        <div class="float-left">
            <label class="center bold">Credit Cards</label>
            <form id="credit" action="@Url.Action("CreditCardMethod")">
                <input type="image" name="submit"
                       src="~/Images/Functional/Icons/Credit cards.png"
                       alt="CreditCards" onclick="needToConfirm = false"/>
            </form>
        </div>
    </div>
</div>

And I have those javascript method available:

var spinnerVisible = false;

function ShowProgress() {
    if (!spinnerVisible) {
        $('div#spinner').fadeIn("fast");
        spinnerVisible = true;
    }
}
function HideProgress() {
    if (spinnerVisible) {
        var spinner = $('div#spinner');
        spinner.stop();
        spinner.fadeOut('fast');
        spinnerVisible = false;
    }
}

So when I click on the first form, for example, I would like to call the ShowProgress() method first, then the action, and lastly the HideProgress() after the results are in or simply load the next view.

How could I do that?

Romain B. · Accepted Answer · 2014-02-27 14:11:52Z

2

You can use the onsubmit attribut of form element.

<form onsubmit="ShowProgress()">

answered Feb 27, 2014 at 14:11

Romain B.

2662 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

hsim Over a year ago

Oh! Haven't thought about that. I will try it.

hsim Over a year ago

Haha, thanks a lot! Say, would you happen to know how I could put a kind of layer to stop my user from clicking elsewhere while the loading is shown?

Romain B. Over a year ago

You can do it with just styling your spinner div like a css overlay div.

hsim Over a year ago

I do not know how to do that.

Romain B. Over a year ago

You can find many way to do it in css, like : #overlay { z-index:1000; position:absolute; top:0; bottom:0; left:0; width:100%; background:#000; opacity:0.45; -moz-opacity:0.45; filter:alpha(opacity=45); visibility:hidden; }

Collectives™ on Stack Overflow

Call a javascript loading function and a controller action

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related