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

18

Від автора: в цьому ми продовжимо роботу з атрибутом HTML5 contenteditable. При зміні значення редагованого поля, скрипт буде відправляти асинхронним запитом (засобами AJAX) нове значення, і зберігати його в БД.

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

Отже, ми зупинилися на тому, що при отриманні полем зі значенням фокуса, отримуємо наявне в ньому значення і ID даної опції. Наступна подія, з яким ми будемо працювати, це подія blur, яка настає при втраті полем фокуса. Іншими словами, ми будемо відслідковувати подію, коли користувач клацне поза редагованого поля.

Після цього нам потрібно отримати нове значення поля і обов’язково порівняти його з попереднім (тим, що взяли при отриманні елементом фокуса). Якщо ці значення будуть відрізнятися, то це означає, що користувач змінив значення, і ми можемо відправляти нове значення на сервер для його збереження. Якщо ж значення будуть ідентичні, то ніякого запиту відправляти не потрібно, оскільки користувач нічого не змінив у полі.

Отже, звернемося до події blur, отримаємо нове значення і порівняємо його з колишнім:

$(‘.edit’).focus(function(){
oldVal = $(this).text();
id = $(this).data(‘id’);
}).blur(function(){
newVal = $(this).text();
if(newVal != oldVal){
console.log(«Відправляємо запит»);
}
});

Зараз при зміні значення в полях після втрати фокусу полем, ми повинні побачити в консолі повідомлення: Відправляємо запит.

Тепер напишемо сам асинхронний запит, звернувшись до методу ajax():

blur(function(){
newVal = $(this).text();
if(newVal != oldVal){
$.ajax({
url: ‘index.php’,
type: ‘POST’,
data: {new_val: newVal, id: id},
success: function(res){
console.log(res);
},
error: function(){
alert(‘Error!’);
}
});
}
});

Отже, ми відправляємо дані асинхронно методом POST у файл index.php. У разі успіху ми готові прийняти якийсь відповідь в змінну res і вивести її вміст в консоль. Тепер давайте приймемо ці дані і повернемо який-небудь відповідь, щоб переконатися, що все працює.

В індексному файлі після підключення файлу функцій додамо пару рядків коду:

if( isset($_POST[‘new_val’]) ){
print_r($_POST);
exit(«Налаштування збережено»);
}

В якості тесту ми просто роздрукуємо вміст масиву POST. Тепер спробуємо змінити значення. Якщо все зроблено вірно, то в консолі ми повинні в якості відповіді побачити роздрукований масив POST, в якому будуть нове значення і ID змінною опції.

Тепер замість роздруківки масиву давайте будемо викликати функцію, зберігає дані. Якщо функція буде повертати ІСТИНУ, тоді повернемо у відповіді рядок про успіх, інакше – повідомлення про помилку збереження.

if( isset($_POST[‘new_val’]) ){
if( update_option() ){
exit(«Налаштування збережено»);
}else{
exit(«Помилка збереження»);
}
}

І опишемо функцію update_option() у файлі functions.php:

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

Тут все гранично просто. Запит UPDATE намагається оновити значення ID поля. У разі успіху повертаємо TRUE, інакше – FALSE.

Ось практично і все. Якщо ми ніде не помилилися, то опція повинна зберігатися, а повідомлення про успішне збереження ми повинні побачити в консолі. Звичайно ж, хотілося б бачити це повідомлення не в консолі, а безпосередньо на сторінці. Давайте це зробимо.

Для цього давайте додамо після таблиці елементи верстки:

І опишемо стилі для них:

#loader{
position:fixed;
display:none;
top:0;
left:0;
height:100%;
width:100%;
background:#f2f2f2;
opacity:.9;
z-index: 30;
}
#loader span{
display: block;
background: url(../img/loader.gif);
width: 128px;
height: 15px;
position: absolute;
left: 50%;
top: 50%;
margin: -7px 0 0 -56px;
}
#mes-edit{
display: none;
color: #000;
font-size: 15px;
border: 1px solid #ccc;
box-shadow: 0 0 10px #ccc;
padding: 10px;
text-align: center;
width: 400px;
position: fixed;
left: 50%;
top: 50%;
margin: -20px 0 0 -200px;
font-weight: bold;
background: #fff;
}

Нові елементи будуть відповідати за показ повідомлень з відповіддю від сервера. За задумом при відправці запиту на сервер ми будемо затемнювати сторінку і показувати анімовану заставку, дає зрозуміти, що збереження даних. Після збереження даних ми знову покажемо сторінку і разом з цим покажемо повідомлення з відповіддю. Для цього додамо кілька рядків коду всередину запиту ajax:

blur(function(){
newVal = $(this).text();
if(newVal != oldVal){
$.ajax({
url: ‘index.php’,
type: ‘POST’,
data: {new_val: newVal, id: id},
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();
}
});
}
});

Тепер ми повинні побачити виведення повідомлень на екран і анімацію всього процесу оновлення опції.

Ну і наостанок. Якщо ви вирішите оновлювати опцію не за події blur, а по натисканню клавіші Enter (на мій погляд це набагато зручніше), то все, що потрібно зробити, це описаний код використовувати клавіші Enter (її код у нас вже є). У такому випадку підсумковий код буде таким:

$(function(){
var oldVal, newVal, id;
$(‘.edit’).focus(function(){
oldVal = $(this).text();
id = $(this).data(‘id’);
});
$(‘.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},
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;
}
});
});

На цьому ми завершимо поточний урок. Удачі і до нових зустрічей!