Начну с описания чего хочется.... Есть админка сайта, в ней есть различные списки, например список страниц или разделов, не суть чего, допустим мы не хотим проваливаться в редактор чтобы поменять заголовок страницы или какие-то данные, доступные из списка страниц:
Вот, не нажимая по кнопке Изменить - изменяем заголовки (мы люди ленивые, пишем универсальный код для того, чтобы можно было применить где угодно)
Как здесь выглядит HTML:
<h5 class="card-title fast-edit-link" data-id="{$list[customer].id}" title="Жми дважды и я изменюсь">{$list[customer].txt}</h5>
<input type="text" title="Еще два раза и я сохранюсь!" class="form-control fast-edit hidden" data-type="string" data-name="txt" data-id="{$list[customer].id}" value='{$list[customer].txt}'>
Да, я использую шаблонизатор Smarty, но суть не в том, суть поставить где нужно нужные переменные PHP - data-id - ид записи, где value - текст записи, вроде пока понятно? Если не понятно - отвечу на вопросы в комментариях.
Что еще здесь примечательного? Обратите внимание на <input> у него есть класс hidden - в таблице стилей прописано элементам с классом hidden - быть не видимыми. Так же чисто для себя я сделал поля data-type - указываем что храним - здесь просто текст, name - поле в таблице, ид - само собой номер записи в таблице ну и value - что собственно и пишем.
Так же у тега h5 есть два важных атрибута - это data-id и класс fast-edit-link.
По двойному клику на h5 мы его скроем, отобразим input в него введем текст, по двойному клику по input - мы скроем его скроем, покажем снова h5 с новым значением и отправим новое значение в базу данных.
Переходим к коду на JQuery:
//показываем окошко для быстрого редактирования
$(".fast-edit-link").dblclick(function(event) {
var id = $(this).data("id");
//себя прячем
$(this).addClass("hidden");
$(".fast-edit[data-id=" + id + "]").removeClass("hidden");
});
//Поле которое надо быстро сохранить
$(".fast-edit").dblclick(function(event) {
var id = $(this).data("id");
var type_var = $(this).data("type");
var name_var = $(this).data("name");
var txt = $(this).val();
$(".fast-edit-link[data-id=" + id + "]").removeClass("hidden");
$(".fast-edit-link[data-id=" + id + "]").text(txt);
$.ajax({
type: "POST",
url: '/fast-edit/',
data: "id=" + id + "&type=" + type_var + "&name=" + name_var + "&txt=" + txt
})
$(this).addClass("hidden");
})
Как видите - всего лишь два простых обработчика событий - двойного клика по элементам с классами fast-edit-link и fast-edit, первый делает то что я описал выше - скрывает себя, показывает input с классом fast-link и нужным ИД. Второй обработчик делает чуть больше работы, он собирает все свои значения data и value, отправляет на сервер, меняет текст у нужного h5 с классом fast-edit-link и нужным ИД и прячется... Да, мы данные отправляем через ajax!
Фронтэнд мы потихонечку прошли, что же делает серверная часть?
Она получает POST запрос по адресу /fast-edit/ - у вас может быть любой другой адрес с принимающим скриптом, у меня же для корректности PHP делает контрольный запрос с созданием поля в таблице content:
ALTER TABLE `content` ADD `" . $_POST['name'] . "` varchar(254) COLLATE 'utf8_general_ci' NULL;
Этот участок кода не обязателен, если вы не создаете новые поля в таблице, у меня же иногда появляется такая необходимость.
Ну и в итоге обновляем значение в таблице:
UPDATE `content` SET `$_POST['name']` = '$_POST['txt']' WHERE `id` = $_POST['id'];
Обратите внимание, что в данном примере в БД пишутся "сырые данные", что крайне опасно, чтобы обезопасить себя - фильтруйте все что поступает от пользователя.
Вот в принципе и все, все достаточно элементарно, что не понятно - пишите в комментариях.
P.S. возможно меня закидают вопросами - а зачем? зачем писать лишний код? Для админки - по сути удобно менять некоторый контент не открывая его, так же я скоро запущу один сайт, где пользователи смогут создавать свои фото альбомы и чтобы не редактировать описание - открывая каждую фотографию, можно быстро описывать все фотографии прямо из их списка. Ну это как пример, так же можно найти массу других применений, это уже дело за вашей фантазией.