Ajax autosave multiple fields

Question

I have a page that has fields editable via contenteditable. I am autosaving the fields via ajax after the user edits the field. The problem is, I have multiple fields on the same page and when I try to autosave more than one field, either one field won't work or gets overwritten with the same content as the other field.

This is the code that I am using to update the database and it works exactly how I want it to for the "name" field.

$('.editname').keyup(function() {
delay(function(){
    var name= $('.editname').text();
    $.ajax({
        type:"post",
        url:"update.php",
        data:"name="+name,
        success:function(data){
            console.log('success!');
        }
    });
}, 500 );
});

var delay = (function(){
var timer = 0;
return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
};
})();

However if I try to edit it like the following or duplicate it and give it a different name, it will not work properly to update another field along with the first field.

$('.editname').keyup(function() {
delay(function(){
    var name= $('.editname').text();
    $.ajax({
        type:"post",
        url:"update.php",
        data:"name="+name,
        success:function(data){
            console.log('success!');
        }
    });
}, 500 );
});

$('.editsummary').keyup(function() {
delay(function(){
    var summary= $('.editsummary').text();
    $.ajax({
        type:"post",
        url:"update.php",
        data:"summary="+summary,
        success:function(data){
            console.log('success!');
        }
    });
}, 500 );
});

var delay = (function(){
var timer = 0;
return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
};
})();

What am I doing wrong in the above block of code?

Answer 1

I've tweaked your example a little to get it to work with JS Fiddle:

http://jsfiddle.net/eHz4t/

<div class="editname" contenteditable="true">my name</div>
<div class="editsummary"contenteditable>my summary</div>

It works properly. You can open the network console and see the traffic being sent.

Answer 2

Looks like a usual error developers get into when they copy and paste code.

var name= $('.editsummary').text();

This should read:

var summary = $('.editsummary').text();

---

EDIT

This is how you do it properly. Have one generic auto-save handler and re-use it.

For example (html/js):

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">

// When Page Loads
$(document).ready(function()
{
    // Handle Auto Save
    $('.autosaveEdit').keyup(function() {
        var fieldName = $(this).attr('name');
        var fieldValue = $(this).val();
        delay(function() {
            $.ajax({
                type: "post",
                url: "update.php",
                data: { fName: fieldName, fValue: fieldValue },
                success: function(data) {
                    console.log('success!');
                }
            });
        }, 500 );
    });

});

var delay = (function() {
    var timer = 0;
    return function(callback, ms) {
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
    };
})();

</script>

Firstname: <input type="text" class="autosaveEdit" name="firstname" />
<br />
Lastname: <input type="text" class="autosaveEdit" name="lastname" />

Now, on your update.php

<?php

// Get the post data
$fieldName = isset($_POST['fName']) ? $_POST['fName'] : '';
$fieldValue = isset($_POST['fValue']) ? $_POST['fValue'] : '';

// Now save the $fieldValue against $fieldName in your db (if neither is empty)

So, in my example form, if I start editing the "firstname" input field, the auto-save will post the following to update.php:

print_r($_POST)

Array
(
    [fName] => firstname
    [fValue] => hello
)