Contenteditable — редагування вмісту «на льоту». Урок 3

24

Від автора: у цьому уроці ми повернемося до уроків по роботі з атрибутом HTML5 contenteditable. Раніше ми з вами реалізували завдання збереження значення редагованого поля. Однак, у прикладі ми з вами працювали тільки з одним полем таблиці. В коментарях на сайті і форумі ви запитували, як можна працювати з декількома полями таблиці. У цьому уроці ви знайдете відповідь на це питання.

Contenteditable — редагування вмісту «на льоту». Урок 3Contenteditable — редагування вмісту «на льоту». Урок 3

Нагадаю, у нас є таблиця опцій, в якій ми редагуємо полі значення опції. Давайте дамо можливість редагувати додатково назва опції. Для цього додамо цього поля атрибут contenteditable:

Таким чином, у нас з’явилося два редагованих поля. Зауважте, що до кожного з полів ми додали додатковий атрибут data name зі своїм значенням: name і value. Саме завдяки цьому значенню ми і дізнаємося, що саме користувач зібрався редагувати: назва опції або її значення. Як ви вже здогадалися, значення атрибута data name збігаються з назвами полів таблиці options в БД.

Тепер у файлі scripts.js отримаємо назва поля, що редагується, і відправимо його на сервер. Для цього використовуємо змінну field. Підсумковий код файлу буде таким:

$(function(){
var oldVal, newVal, id field;
$(‘.edit’).focus(function(){
oldVal = $(this).text();
id = $(this).data(‘id’);
field = $(this).data(‘name’);
});
$(‘.edit’).keypress(function(e){
if(e.which == 13){
newVal = $(this).text();
if(newVal != oldVal){
$.ajax({
url: ‘index.php’,
type: ‘POST’,
data: {new_val: newVal, id: id, field: field},
beforeSend: function(){
$(‘#loader’).fadeIn();
},
success: function(res){
$(‘#mes-edit’).text(res).delay(500).fadeIn(1000, function(){
$(‘#mes-edit’).delay(1000).fadeOut();
});
},
error: function(){
alert(‘Error!’);
},
complete: function(){
$(‘#loader’).delay(500).fadeOut();
}
});
}
return false;
}
});
});

Ну і останнім кроком залишилася серверна робота. Ми повинні прийняти нове значення (назва поля) і обов’язково перевірити, чи є у нас таке поле в таблиці БД. Для цього ми створимо масив $fields, в якому перерахуємо редаговані поля. Далі просто перевіримо, якщо отримане від клієнта назву поля є в масиві $fields, тоді ми продовжимо роботу, в іншому випадку – зупинимо роботу скрипта. Підсумковий код функції update_option() буде наступним:

/**
* оновлення налаштування
**/
function update_option(){
global $db;
$fields = array(‘name’, ‘value’);
$field = isset($_POST[‘field’]) ? $_POST[‘field’] : «;
if( !in_array($field, $fields) ) return false;
$value = mysqli_real_escape_string($db, $_POST[‘new_val’]);
$id = (int)$_POST[‘id’];
$query = «UPDATE options SET $field = ‘$value’ WHERE id = $id»;
$res = mysqli_query($db, $query);
if( mysqli_affected_rows($db) ) return true;
else return false;
}

Ось, власне, і все рішення. Як бачимо, все досить просто. Удачі і до нових зустрічей!