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

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

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

скачать исходникискачать урок

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Таким образом, у нас появилось два редактируемых поля. Заметьте, что к каждому из полей мы добавили дополнительный атрибут data-name со своим значением: name и value. Именно благодаря этому значению мы и узнаем, что именно пользователь собрался редактировать: название опции или ее значение. Как вы уже догадались, значения атрибута data-name совпадают с названиями полей таблицы options в БД.

Теперь в файле scripts.js получим название поля, которое редактируется, и отправим его на сервер. Для этого используем переменную field. Итоговый код файла будет таким:

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

Вот, собственно, и все решение. Как видим, все довольно просто. Удачи и до новых встреч!

Разработка веб-приложения на PHP

Создайте веб-приложение на PHP на примере приема платежей на сайте

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (2)

  1. benz_inst@mail.ru

    А можно как то сделать что бы я проставил значение в несколько полей, затем нажал enter (лучше даже кнопку), и обновил сразу все поля, вот только после этого подгружать

    • Андрей Кудлай

      Можно. Создайте кнопку и выполняйте обновление только при клике по ней.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree