Contenteditable — редактирование контента «на лету». Урок 3

Дата публикации: 2015-05-13

Contenteditable — редактирование контента на лету

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

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

<td><div class="edit" data-id="<?=$option['id']?>" data-name="name" contenteditable><?=$option['name']?></div></td>
<td><div class="edit" data-id="<?=$option['id']?>" data-name="value" contenteditable><?=$option['value']?></div></td>

1 2	<td><div class="edit" data-id="<?=$option['id']?>" data-name="name" contenteditable><?=$option['name']?></div></td> <td><div class="edit" data-id="<?=$option['id']?>" data-name="value" contenteditable><?=$option['value']?></div></td>

Таким образом, у нас появилось два редактируемых поля. Заметьте, что к каждому из полей мы добавили дополнительный атрибут 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;
		}
	});

});

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