Question

I have the following JS code

<script type="text/javascript">
    $(document).ready(function () {
        $("#innerDiv1").ajaxStart(function () {
            alert($(this).attr("id") + " ajaxStart");
        });

        $("#innerDiv2").ajaxStart(function () {
            alert($(this).attr("id") + " ajaxStart");
        });

        $("#button").click(function () {
            $.post("test.aspx");
        });

        $("#button1").click(function () {
            $.post("test.aspx");
        });
    });
</script>

My problem is that whenever I click the “button” or “button1” both ajaxStart events are invoked even though the ajaxStart handlers are bound with unique elements

I would like to invoke only one ajaxStart, the one according to which button I click on, is this possible?

UPDATE…

After reading the answers and also finding out that it is not possible…can anyone explain the reason why the ajaxStart can be bound with an element??

Thanks

Answer 1

ajaxStart is a global Ajax event.. that means that all ajaxStart events you bind will be triggered in each Ajax call you make..

quoting from http://api.jquery.com/ajaxstart/

Whenever an Ajax request is about to be sent, jQuery checks whether there are any other outstanding Ajax requests. If none are in progress, jQuery triggers the ajaxStart event. Any and all handlers that have been registered with the .ajaxStart() method are executed at this time.

If you want something different for each call then just do what you want in the button click..

something like

<script type="text/javascript">
    $(document).ready(function () {
        $("#button").click(function () {
            $("#innerDiv1").html('start of 1');
            $.post("test.aspx");
        });

        $("#button1").click(function () {
            $("#innerDiv2").html('start of 2');
            $.post("test.aspx");
        });
    });
</script>

---

update

how about

<script type="text/javascript">
    function showProgress(elementId){
      $('#' + elementId).append('<div class="progress"></div>');
    }
    function hideProgress(elementId){
      $('#' + elementId).find('.progress').remove();
    }

    $(document).ready(function () {
        $("#button").click(function () {
            var id = 'innerDiv1';
            showProgress( id );
            $.post("test.aspx", function(){hideProgress( id );});
        });

        $("#button1").click(function () {
            var id = 'innerDiv2';
            showProgress( id );
            $.post("test.aspx", function(){hideProgress( id );});
        });
    });
</script>