Встроенное редактирование средствами jQuery и PHP
Как известно, встроенное редактирование, или другими словами, возможность редактирования контента непосредственно на странице, - это очень полезная вещь, которая всегда должна быть у вас под рукой. Я расскажу, как всё это работает, а также покажу, как с помощью PHP моментально обновить отредактированную часть на странице, и как внести все изменения в базу данных.
Код
Сейчас я объясню, что же все-таки представляет собой встроенное редактирование.
На Demo странице вы увидите блок с некоторым текстом. Наведите курсор на любую часть этого блока, и вы увидите маленькую иконку редактирования. Она похожа на иконку из Facebook.
Если вы кликните внутри блока с текстом или на саму иконку, то блок заменится формой textarea, а внизу появятся кнопки save и cancel.
Теперь подробнее
Я использовал связывание и “развязывание”. Простыми словами, мы можем привязать элементу событие клика мышкой. И наоборот, можно “отнять” у элемента это событие. Всё довольно просто. В 9ой строчке кода, представленного ниже, мы назначаем событие клика всем элементам с классом “inlineEdit”, а обработчиком назначаем функцию “updateText”. Это означает, что каждый раз при клике внутри блока “inlineEdit”, будет запускаться функция “updateText”. Эта функция заменяет блок с текстом формой textarea.
Теперь рассмотрим функцию сохранения. Она будет запускаться только при клике на кнопку “Save”. Здесь мы просто забиваем отредактированный текст в переменную и прогоняем ее через файл update.php. Вы заметите, что пока идет обновление, отображается иконка загрузки. Мы также выведем сообщение с ответом от страницы PHP. В конце мы удалим класс “selected” у элемента и затем вставим обновленный текст из textarea, введенный пользователем, в блок div.
Функция cancel запуститься при активировании элемента с классом .revert. Эта функция просто удаляет класс “selected”, как и в предыдущей функции, но вставляет в блок div оригинальный, а не отредактированный текст.
$(document).ready(function () { function slideout() { setTimeout(function () { $("#response").slideUp("slow", function () {}); }, 2000); } $(".inlineEdit").bind("click", updateText); var OrigText, NewText; $(".save").live("click", function () { $("#loading").fadeIn('slow'); NewText = $(this).siblings("form").children(".edit").val(); var id = $(this).parent().attr("id"); var data = '?id=' + id + '&text=' + NewText; $.post("update.php", data, function (response) { $("#response").html(response); $("#response").slideDown('slow'); slideout(); $("#loading").fadeOut('slow'); }); $(this).parent().html(NewText).removeClass("selected").bind("click", updateText); }); $(".revert").live("click", function () { $(this).parent().html(OrigText).removeClass("selected").bind("click", updateText); }); function updateText() { $('li').removeClass("inlineEdit"); OrigText = $(this).html(); $(this).addClass("selected").html('<form ><textarea class="edit">' + OrigText + '" </textarea> </form><a href="#" class="save"><img src="/images/save.png" border="0" width="48" height="15"/></a> <a href="#" class="revert"><img src="/images/cancel.png" border="0" width="58" height="15"/></a>').unbind('click', updateText); } });
PHP
В примере я не добавил скрипт подключения к базе данных. Мы просто передаем данные методом POST в файл update.php, а затем выводим результат. Добавить эти данные в базу данных очень легко.
$text = mysql_escape_string($_POST['text']); $id = mysql_escape_string($_POST['id']); echo $text; // здесь вы можете поместить код добавления в БД редактируемого текста, например для id = $id
HTML
HTML очень прост и представляет собой один элемент списка с классом “inlineEdit”, что делает его редактируемым. Вы сможете добавить сколько угодно редактируемых элементов на страницу, но не забывайте назначать каждому из них уникальный идентификатор.
<h2>jQuery Inline-Edit <img id="loading" src="/images/loading.gif"/></h2> Click the text below to edit it. <div id="response"></div> <ul> <li class="inlineEdit" id="1">Lorem Ipsum....</li> </ul>
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/6MLlK6wDcdA/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Чтобы вырастить плодоносящий сайт - его полезно регулярно поливать и удобрять с помощью рекламы и оптимизации Компания "RedLine" |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.