Ajax Loader on Login (ASP.NET MVC)

Question

I have used an ajax-loader.gif with success in the past, but it was on a filtering for users.

I am now trying to use it on the login form but it doesn't work (loader is not showing)

Here's my code:

@model Models.Login

@using (Ajax.BeginForm("Index", "Login", new AjaxOptions { UpdateTargetId = "ajaxUpdatedPanel", LoadingElementId = "loader" }))
{

<div id="box_login">
    <div class="editor-label">
        @Html.LabelFor(m => m.Username)
    </div>
    <div class="editor-field">
        @Html.TextBoxFor(m => m.Username)
        @Html.ValidationMessageFor(m => m.Username)
    </div>
    <div class="editor-label">
        @Html.LabelFor(m => m.Password)
    </div>
    <div class="editor-field">
        @Html.PasswordFor(m => m.Password)
        @Html.ValidationMessageFor(m => m.Password)
    </div>
    <br />
    <div class="mask roundedCorners" style="float:left;">
        <input type="submit" class="btn" value="Logg inn" />
    </div>
    <div id="loader" style="display:none;float:left;width:100px;margin: 8px 0 0 10px;">
        <img src="~/Content/images/loader16.gif" />
    </div>
</div>

@Html.ValidationSummary(true)
}

Answer 1

This should do

$(document).ready(function() {

    $('form').submit(function() {
        if (!someValidations()) {
            return false;
        } else {
            $('form #loader').show();
        }
        return true;
    });

    function someValidations() {
        return true;
    }

});