Question

I have 2 fields:

1. Username

2. Email

When ether field is focused out, I would like to display a loader while ajax call
is checking if username or email already exists (depends on focused out field)

This is the jquery code I wrote:

$().ready(function () {
    $("#Username, #Email").bind('focusout', processCheck);
});

function processCheck() {
    if ($(this).val() == '')
        return;
    $(this).next().find('img').bind('ajaxStart', loading);
    $.ajax({
        type: "POST",
        url: 'Is' + $(this).attr("id") + 'Exists',
        data: "{'" + $(this).attr("id") + "':'" + $(this).val() + "'}",
        contentType: "application/json; charset=utf-8",
        async: true,
        dataType: "json",
        success: function (msg) {

        }
    });
}

function loading() {
    $(this).show().unbind('ajaxStart').bind('ajaxStop', loadingStop);
}

function loadingStop() {
    $(this).hide().unbind('ajaxStop');
}

Well, it’s not working as expected 🙂

The first focus out works fine. Then, second one not fires until first one is done.

I need that to work async for both fields.

Any ideas how to make it happen?

Thanks in advanced!

Answer 1

I’m not certain jquery register the ajaxStart and ajaxStop custom
events in the dom, but anyway, $.ajaxStart() and $.ajaxStop() don’t
really work that way. They are like event code “wrappers”. I could
propose you a solution with these two functions, but you don’t need
them.

function processCheck() {
    var $this = $(this);
    if ( $this.val() == '' ) return;
    $img = $this.next().find('img');
    $img.show();
    $.ajax({
        type: "POST",
        url: 'Is' + $this.attr("id") + 'Exists',
        data: "{'" + $this.attr("id") + "':'" + $this.val() + "'}",
        contentType: "application/json; charset=utf-8",
        async: true,
        dataType: "json",
        success: function (msg) {
            // stuff
            $img.hide();
        }
    }).always(function () { 
        $img.hide(); 
    });
}