Ajax autosave несколько полей

Question

У меня есть страница с полями, редактируемыми через contenteditable. Я автоматически создаю поля через ajax после того, как пользователь отредактирует это поле. Проблема в том, что у меня есть несколько полей на одной странице, и когда я пытаюсь автосохранять более одного поля, одно из полей не будет работать или будет перезаписано с тем же содержимым, что и другое поле.

Это код, который я использую для обновления базы данных, и он работает именно так, как я хочу, чтобы это поле «имя».

$('.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); 
}; 
})(); 

Однако, если я пытаюсь изменить его, как следующий или дублировать его и дать ему другое имя, он не будет работать должным образом, чтобы обновить еще одно поле вместе с первым полем.

$('.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); 
}; 
})(); 

Что я делаю неправильно в вышеуказанном блоке кода?

Answer 1

Похоже, что обычные разработчики ошибок попадают, когда копируют и вставляют код.

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

Это следует читать:

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

---

EDIT

Это, как вы делаете это правильно. У вас есть один универсальный обработчик автосохранения и его повторное использование.

Для примера (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" /> 

Теперь на вашем 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) 

Итак, в моем примере форме, если я начать редактирование "ПгвЬЫате" поле ввода, для автоматического обновления будет опубликовано следующее сообщение: update.php:

print_r($_POST)

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

Answer 2

Я отлажены ваш пример немного, чтобы заставить его работать с JS Fiddle:

http://jsfiddle.net/eHz4t/

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

Он работает должным образом. Вы можете открыть сетевую консоль и просмотреть отправленный трафик.