Disable ajaxStart on specific request

Question

I have an email field which has a remote validation call attached to it in order to validate if the email entered exists in the system. Once the user types, the controller method is called and it passes back a flag.

I also have a global ajaxStart event attached to all ajax requests which shows a loading spinner and blocks the page. I want to prevent ajaxStart from executing on this particular function. As far as I can tell, no objects are passed into the ajaxStart event and I am unsure how to suppress it on this particular request.

This is the rendered html:

<input class="form-control" data-val="true" data-val-remote="Email already exists" data-val-remote-additionalfields="*.Email" data-val-remote-type="POST" data-val-remote-url="/account/emailexists" id="Email" name="Email" placeholder="Business Email" type="email" value="" />

Model view:

public class RegisterViewModel
{
    [Remote("EmailExists", "Account", HttpMethod = "POST", ErrorMessage = "Email already exists")]
    public string Email { get; set; }
}

Account controller:

[AllowAnonymous]
[HttpPost]
public JsonResult EmailExists(string Email)
{
   var exists = Email.UserExists();
   return Json(exists, JsonRequestBehavior.AllowGet);
}

Javascript:

$(function () {
    $(document).ajaxStart(function () {
         // Return if this is '/account/emailexists'
         blockUI();
    }).ajaxStop($.unblockUI);

    //...

For all other ajax functions, I am using the global: false parameter to suppress the global event listener - unsure how to do this with Unobtrusive Javascript.

score 0 · Accepted Answer · answered Apr 11 '19 at 20:39

After learning about .ajaxSend(), I decided to try that instead of .ajaxStart(). See the differences of these two events here:

What's the difference between : 1. (ajaxStart and ajaxSend) and 2. (ajaxStop and ajaxComplete)?

.ajaxSend() and .ajaxComplete() fire once per request as they send/complete. This is why these handlers are passed arguments and the global/batch ones are not:

I used the ajax object argument to see if the request url is from the remote validation call in order to suppress the loading icon. So far this approach works fine.

$(document).ajaxSend(function(e, xhr, settings) {
    if (settings.url == '/account/emailexists') return;
    blockUI();
});

$(document).ajaxStop(function () { $.unblockUI(); });

Disable ajaxStart on specific request

1 Answers1