How to show the ajax loader image while remote val

Question

in my asp.net mvc3 application i am doing remote validation if a user already exist using data annotation . it is working perfectly . i was wondering if there is any why i can show the ajax loader image beside the input field in the form while remote validation(ajax request) is taking place.

please help me

Thanks

Answer 1

If that was me, I would want to stop user from entering data into any other fields until this is validated, therefore I would use AjaxOptions to specify animation and duration of that animation.

I'd have something on the lines of:

@{
    AjaxOptions ajaxOpts = new AjaxOptions
    {
        UpdateTargetId = "updateDiv",
        LoadingElementId = "myImg",
        LoadingElementDuration = 2000,        
        HttpMethod = "GET"        
    };    
}

Answer 2

I don't think you can do it without writing the validation code yourself.

See this article: http://www.highoncoding.com/Articles/767_Remote_Validation_in_ASP_NET_MVC_3.aspx

Within the AJAX call you would have to add a beforeSend to display the image, then hide it on complete.

Answer 3

You can use $.ajaxStart .ajaxStop for this purpose:

$("#yourRegisterFormToValidate")
          .ajaxStart(function () { $(".loader").show(); })
          .ajaxStop (function () { $(".loader").hide(); });