CODEWITHSUNDEEP
jquery
Brandon
Brandon

Reputation: 483

jQuery, use more than one event trigger?

I have an HTML table that I am populating with information from a database table. I have made the cells in the table editable upon click and have added jQuery to catch when the cell is done being edited (2.5 sec after last key press), ajax then sends info to a separate php file to update the database table with the changed value. An issue that I have found is that if the cell is clicked out of to go into another cell and a change is made before those 2.5 seconds are up, the first change is never updated to the database.

My Question Is: If I would change to a field blur event instead, is there a way that I could still incorporate the timer so that ajax is reached when EITHER the field blur or the timeout are reached?

$('td').on('input', function() {
    var _this = $(this); // preserve reference to the input field here

    if(saveTimeout) clearTimeout(saveTimeout);
    saveTimeout = setTimeout(function() {
        console.log(_this)
        $.ajax({
            method: "POST",
            url: "updatedatabase.php",
            data: { 
                content: _this.text(), 
                date: _this.siblings().first().text(),
                prod: $('tr:first-child th:nth-child(' + (_this.index() + 1) + ')').text(),
                old: old
            }
        })
        .done(function( msg ) {
            alert( msg );
        });

    }, 2500);
});

Upvotes: 2

Views: 84

Answers (1)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

I suggest you use a different for .setTimeout delay depending on which event triggers it.

So on blur, it will not wait 2.5 sec to save, like on input.

EDITED
To prevent "double save", mark the td as saved.

var saveTimeout;

// Remove the "saved" class on keydown
$('td').on('keydown', function(e) {
    $(this).removeClass("saved");
});

$('td').on('input blur', function(e) {
    console.log("event "+e.type+" occured");
    var timeoutDelay=2500;

    if( e.type == "blur" ){
        timeoutDelay=1;
    }

    // If NOT already saved...
    if( !$(this).hasClass("saved") ){
        var _this = $(this); // preserve reference to the input field here

        clearTimeout(saveTimeout);
        saveTimeout = setTimeout(function() {
            console.log(_this);

            $.ajax({
                method: "POST",
                url: "updatedatabase.php",
                data: { 
                    content: _this.text(), 
                    date: _this.siblings().first().text(),
                    prod: $('tr:first-child th:nth-child(' + (_this.index() + 1) + ')').text(),
                    old: old
                }
            })
            .done(function( msg ) {
                alert( msg );
                // Add the "saved" class to prevent other saving
                _this.addClass("saved");
            });

            console.log("Ajax sent");

        }, timeoutDelay);
    }
});

Upvotes: 1

Related Questions