Show only one Ajax Indicator in a Page with a lot of them

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

The only way that will run on multiple items is if you have multiple items with the same id.

Is it possible that your "<%=partido.PartidoId.ToString()%>" is not being turned into the right id, and is instead being interpretted literally?

If you could post either a link, or some code to help us know what's happening, that would be helpfull.

Answer 2

I think the jquery ajaxStart event is raised for every ajax request made on that page. What your code is doing is attach several event handlers to the same event, and for each ajax request, all handlers are called.

I think you have to handle those events yourself, you can't use ajaStart for them.

Answer 3

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.