Форма комментирования на AJAX
 |
За все время мы обратились уже ко многим областям веб-разработки по отдельности. Сегодня начнем их совмещать. В этой статье, я приведу пример того, как можно совместить знание ajax и wordpress`а, и получить в результате форму комментирования для вашего блога на ajax.В качестве инструментов мне понадобиться только библиотека JQuery и плагин к ней для работы с формами. |
Итак, моя цель – сделать такую форму для комментирования, через которую можно будет оставить комментарий без перезагрузки страницы.
Сперва нужно создать каталог с именем js внутри папки с темой. В него положить два файла:
- Файл библиотеки jquery.js (https://jquery.com)
- Плагин jquery для работы с формами. (https://malsup.com/jquery/form/)
Теперь подключим эти два файла внутри шаблона header.php нашей темы. Для этого добавим туда пару строк:
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/form.js" type="text/javascript"></script>
Для работы плагина Form необходимо знать id формы, которая будет отправлять на сервер (в нашем случае – это форма комментирования).
Саму форму можно найти внутри шаблона comments.php. Вот так у меня начинается эта форма:
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
Запомним этот id, он нам еще пригодится.
Теперь, после того как мы подключили jquery и плагин, и узнали id формы, осталось только написать небольшую функцию для обработки нажатия на кнопку submit нашей формы.
<script>
function CommentPost() {
var options = {
success: function() {
$('#form_message').show();
}
};
$('#commentform').ajaxSubmit(options);
return false;
}
</script>
Этот код можно поместить внутрь шаблона comments.php.
Здесь строка
$(‘#form_message’).show();
Выполнится только в случае успешного выполнения запроса. У меня она будет показывать сообщение. Кстати, его тоже нужно поместить внутрь шаблона comments.php.
Я поставил его перед формой:
<div id="form_message" style="display:none"><h3>Спасибо за комментарий!</h3></div>
И не забываем про обработчик кнопки submit у этой формы:
<input name="submit" onclick="CommentPost(); return false;" id="submit" tabindex="5" value="Комментировать" type="submit" />
Ну, вот и все. Результат всего этого можете наблюдать у формы комментирования на этом блоге. 
Читайте также:
- Как перед покупкой хостинга…
Как создать свой бизнес в Instagram- Компания Яндекс готовится к…
Пентагон занялся разработкой…
В сети появился первый поисковик
Обзор книги: Запускаем…
Apple планирует создать автомобиль
Визуальные заметки Майка Роуди:…
молодые программисты в научных…
О! Я первый посмотрю как это выглядит
Ща попробуем на денвере.
все ok
Проверка!
Такой вопрос, может не совсем по теме, но лучшего места ненашол, каким образом можно постить новости с кратким и полным содержанием, тоеть чтоб на главной странице было краткое содержание, и ссылочка подробнее… ведущая на страницу с полным содержанием новости.
Если в wordpress, то в месте, где надо обрезать текст (указать анонс), нужно поставить специальный тег <!-more->
А реально сделать так чтобы было 2 редактора, в один пишеш краткий текст, а во второй полный ?
Насчет редактора не скажу точно - там больно глубокие изменения надо делать. А если без редактора обойтись, то можно анонс выделять в дополнительное поле к посту. На главной странице выводить анонс только, а при нажатии на линке показывать пост сам. Про дополнительные поля можешь здесь почитать : https://i-novice.net/izmenyaem-wordpress-temu/
А можно ли как то приспособить данный плагин для отправки сообщения на заданный email? естественно, без перезагрузки страницы (говорю о форме обратной связи)…
Можно. Если хотите сделать из формы комментирования wordpress форму обратной связи такую, то надо менять ядро блога.
А если просто на каком-то из Ваших сайтов, то просто в action form`ы, которая будет отправляться укажите нужный php-файл. В остальном подключение плагина не изменится почти.
>Можно.
спасибо, разобрался
лол! класный скрипт
Тестик небольшой:)
Текст проверки… Интересно все же
Интересно же )
Мне тоже интересно
КРУТА
вау
aaaaa
спс
Спасибо!
Спасибо!
Тест)
up!
Интересный плагин, обязательно попробую…
И как же я могу посмотреть пример, если включена премодерация????
Блин, кучу плагинов перепробовал. Может это поможет
Проверка!
dssd
пробуемс
пробу
Your text to link…емс
Забыл
дгпщгп
Test )
вапвы
тест
тестинг
тестgh
r
4545
тест
тест ыыыыыы
Проверка аякса…
Проверка аякса…
test ajax
ЖОСКО!
тест
Здорово.
Непонятно, как это действует.
Непонятно, как это действует.тест тест
ну и я поспамлю)
проба
Тест комментария
thanks a lot!
tesr
test
test
хм… не ужели работает?
спасибо!
Нормально
полезная статья!)
ПРОВЕРКО
фцуву
testt
Проверка
Тесблин!
Your text to link…
sss
бла бла бла
Хз хз… Простенько очень)) А данные в форме зачем оставлять после отправки?
юдл
Ajax таки замечательная штука, но учить ради него javascript - лень. А так, можно вообще ко всему wordpress’у прикрутить ajax, пример тому - самый популярный вордпресовский шаблон с функцией миниблога.
Раз два три
четырепять ишесть
тыц тыцууууу..!!
круто
Спасибо мэн). Сегодня пол дня потратил на то чтоб найти реализацию без плагина))) Респект от onjee
test
Блин… а чо поле комментария не очищается и коммент виден только после того как страницу перезагрузить?
робит?fff
test
А ну ка )
Тестовый комментарий.
test
Тестим
Тест прошел успешно!
пробуем
Test
asdasdsa
Это нифига не работает. Всё сделал как написано - подключил скрипты, прописал onclick и т.д., а при отправке страница всё равно перегружается, и в статусбаре в ИЕ пояляется ошибка “object doesn’t support this method”. У вас не немного не такой код, как в примере. И что-то здесь недосказано…
Проверка
Тест!!! Если норм, заберу себе)
Не работает. Жаль. Хотя форма ввода симпатичная (Я про WySiWyG). Помню, игрался с ней тоже.
Очень интересно нужно попробовать))))
klnmpsofwef
Тестируем Аякс!
Тестируем Аякс!
Попробуем…
Ха-ха, очень смешно(
test comment
ну и я внесу свою лепту в проверки
test
test
testing
Скажите, пожалуйста.
А можно ли еще сделать кнопку, которая на ajax будет подгружать новые комментарии без перезагрузки страницы? Что-то типа «обновить комментарии».
999999
test
тест
тест 3456й
nvhvhvjhvjv
дурацкий вопрос, но я правда не догоняю.Подскажите пожаста, как вместо благодарственной надписи вывести сам комментарий без перезагрузки страницы
test
Подскажите, пожалуйста, как через ajax можно сделать обновление произвольных полей записи при клике на объекте внутри записи?
df
пвпвап
test
У меня все равно перезагружается страничка
проверю
проверю. еще раз
123123123
Антиспам: Сколько будет 1 + 5 ?
Спасибо за комментарий! После проверки модератором он появится на сайте. Или не появится.
sfsdfsdfsdfsdfsfsgsdgs
имресмлпгм пр лрп рпл лрпьрм лпр
Пора флуд проверяльшиков убрать из этого поста)
тестим
тествымыЯВмывывямяывмыввымяывмяывам
kljsalkjsa
dfsadf ds fsdfsd
Спасибо. А как менять дизайн такой формы? И можно ли убирать ненужные функции в написании коментария?
ачвспвапвап
document.alert(пиздец)
класс
ertsdfsd
Это болд.
Это италик.
Это
перечеркивание.Это
нумерованый
список
Проба
Эта хуйня вообще работат?
Пипец тут флуд.
бру бру =)
ооо