Question

I am having trouble fixing a bug in an existing ASP.NET MVC web site.

One of the views has a series of text boxes where the user enters data. Each text box has some javascript attached to the blur event in order to post back to the server when the text is changed. More specifically the code is using the JQuery $.ajax method to make these calls. This is in order to save temporary data to the session.

In the same view there is also a save button which also posts data via AJAX in the click event. The problem I am having is that if the user clicks the save button when one of the text boxes has focus, the blur event gets triggered at the same time as the button click event and two ajax posts get called simultaneously. This results in unreliable behaviour.

I know that the current design isn’t great but I am looking for the easiest solution. Is it somehow possible to queue these two events or is there another solution? Thanks.

Answer 1

You could delay the ajax call when the blur event fires using setTimeout, then when the function referenced by setTimeout fires, check a variable to see if the save button was clicked first:

var isSaved = false;
function onblur(ev) {
    setTimeout(function(){
        if (!isSaved) {
            // make ajax call
        }
    }, 200);
}

function onsave(ev) {
    isSaved = true;
    // make ajax call
}