Multiple AJAX (jquery) calls causing extreme slowness and crashing

Question

Hello,

I wrote some code that asks for a user to enter a date range and click the next button. This triggers an AJAX call to a file that figures out what dates are included within those days and prints them out onto the screen.

If the user changes the dates and presses "next" again, it does the calculation again. After doing this several times in a row it starts to run really slowly and eventually it will crash the browser all together.

Does anyone know why this is happening and what I can do to fix it?

Thanks very much for your time.

$("#list").ajaxComplete(function(request, settings){
     $('#addNewDays').bind('submit', function() {
            $(this).ajaxSubmit(function() {
                  $('#dateDisplay').load('calculateDays.php?employeeId=' + $('#employeeId').val() + '&fromDay=' + $('#fromDay').val() + '&toDay=' + $('#toDay').val());
            });
            return false; // <-- important!
     });
});

Answer 1

You can disable the button when the request starts, and then re-enable it when the request is finished.

Answer 2

function enableMyButton(){
    $("#myNextButton").attr('disabled','false');
}

$("#myNextButton").click(function(){
    $("#myNextButton").attr('disabled','true');
    // do ajax stuff, set the callback function to enableMyButton
});

Something like that should do you right.

Answer 3

Why are you re-attaching the submit event to the button every time it is clicked? I assume it is because the button is being replaced with the new content. If so limit the fragment coming back to just be the dates, and nothing else.