Question

In my form where this code resides, the spinner functions fire each time the optionForm div is clicked. The first click works fine and fires the alerts once. Click again, and they fire twice. Third click fires three time, etc. Where is the problem?

<script type="text/javascript">

$("#optionForm").click(function() { 

    $("#process").hide().ajaxStart(function() {
        alert("show")
        $("#process").fadeIn('100');    
    })   
    .ajaxStop(function() {
        alert("hide")
        $("#process").hide();
    });

    $.post('post_requests.php', {

        scenario: ($('#scenario:checked').length ? 1 : 0 ),
        toolkit: ($('#toolkit:checked').length ? 1 : 0 ),
        newsletter: ($('#newsletter:checked').length ? 1 : 0 ),
        scenarios: $('#scenarios').val(),
        tools: $('#tools').val(),
        news: $('#news').val(),
        submit: 'yes'}, function(data) {

            $("#optionResponse").html(data).fadeIn('100');

            FadeMsg();

        }, 'text');

    function FadeMsg() {

        waiting = setInterval(function() {
            $('#optionResponse').fadeOut(500);
            },3000);    
    };

    clearInterval(waiting);
    return false; 

});         
</script>

Answer 1

You should place the ajaxStart and ajaxStop calls outside of the click handler.

If you keep them in the click handler you are adding a new callback to be executed each time a new ajax request starts or stops.

The documentation even has an example similar to what you’re trying to do that says:

Show a loading message whenever an Ajax request starts (and none is
already active).