Question

I have a lot of Ajax indicators in a Page. Now I use

$(document).ajaxStart(function () {
    $('#ajaxBusyIndicator_<%=partido.PartidoId.ToString()%>').css({ display: "inline" });
}).ajaxStop(function () {
    $('#ajaxBusyIndicator_<%=partido.PartidoId.ToString()%>').hide();
});

The problem with this is that I get all the indicators to show Any way to Show only one?

I use asp.net MVC

UPDATE: The Problem is how in the $(document).ajaxStart(function() { know what indicator to show

Answer 1

Since you’re using Asp.net MVC, you should use the AjaxOptions object to specify functions that will be called when you request initiates/completes/succeeds/fails. Inside those functions you can show/hide your indicator.

We do it like this (enabling/disabling the “loading” indicator using OnBegin/OnComplete):

<%= Ajax.ActionLink(..., new AjaxOptions { ..., 
    UpdateTargetId = 'blabla', 
    OnBegin = "msg_activate", 
    OnComplete = "msg_hide", 
    OnSuccess = "funcOnSuccess", 
    OnFailure = "funcOnFailure" })
%>

Then inside your msg_activate/msg_hide you can have something like this:

function msg_activate(response) { 
    $('#ajaxBusyIndicator_<%=partido.PartidoId.ToString()%>').css({ display: "inline" });
}

function msg_hide() {
    $('#ajaxBusyIndicator_<%=partido.PartidoId.ToString()%>').hide();
}

EDIT: You can do it with jQuery as well, but only if you’re doing an ajax request with jQuery. In this case you can use beforeSend, complete, success, and error options. Just look at the examples.