Форма комментирования на AJAX
 |
За все время мы обратились уже ко многим областям веб-разработки по отдельности. Сегодня начнем их совмещать. В этой статье, я приведу пример того, как можно совместить знание ajax и wordpress`а, и получить в результате форму комментирования для вашего блога на ajax.В качестве инструментов мне понадобиться только библиотека JQuery и плагин к ней для работы с формами. |
Итак, моя цель – сделать такую форму для комментирования, через которую можно будет оставить комментарий без перезагрузки страницы.
Сперва нужно создать каталог с именем js внутри папки с темой. В него положить два файла:
- Файл библиотеки jquery.js (http://jquery.com)
- Плагин jquery для работы с формами. (http://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" />
Ну, вот и все. Результат всего этого можете наблюдать у формы комментирования на этом блоге. 
Читайте также:
AJAXовый редактор для комментариев В одной из прошлых статей ...- Работаем с формами в DoJo В предыдущей статье про DoJo ...
AJAX, AJAH, AHAH и AJAJ
Ну вот, наконец, и добрался ...- Как расширить возможности jQuery На сегодняшний день библиотека jQuery ...
Пишем wordpress плагин hello_world. Продолжение.
- Голосование на AJAX своими руками Сегодня немного отвлечемся от рефакторинга ...
- Учимся работать с формами. Сегодня я хочу рассмотреть php ...
- Ajax в Dojo Сегодня мы рассмотрим, как пользоваться ...
Проверка стойкости пароля на AJAX
Сегодня в сети Интернет люди ...
Август 12th, 2008
О! Я первый посмотрю как это выглядит
Август 12th, 2008
Август 13th, 2008
Ща попробуем на денвере.
Сентябрь 17th, 2008
все ok
Октябрь 15th, 2008
Проверка!
Октябрь 31st, 2008
Такой вопрос, может не совсем по теме, но лучшего места ненашол, каким образом можно постить новости с кратким и полным содержанием, тоеть чтоб на главной странице было краткое содержание, и ссылочка подробнее… ведущая на страницу с полным содержанием новости.
Октябрь 31st, 2008
Если в wordpress, то в месте, где надо обрезать текст (указать анонс), нужно поставить специальный тег <!–more–>
Ноябрь 1st, 2008
А реально сделать так чтобы было 2 редактора, в один пишеш краткий текст, а во второй полный ?
Ноябрь 1st, 2008
Насчет редактора не скажу точно – там больно глубокие изменения надо делать. А если без редактора обойтись, то можно анонс выделять в дополнительное поле к посту. На главной странице выводить анонс только, а при нажатии на линке показывать пост сам. Про дополнительные поля можешь здесь почитать : http://i-novice.net/izmenyaem-wordpress-temu/
Ноябрь 26th, 2008
А можно ли как то приспособить данный плагин для отправки сообщения на заданный email? естественно, без перезагрузки страницы (говорю о форме обратной связи)…
Ноябрь 26th, 2008
Можно. Если хотите сделать из формы комментирования wordpress форму обратной связи такую, то надо менять ядро блога.
А если просто на каком-то из Ваших сайтов, то просто в action form`ы, которая будет отправляться укажите нужный php-файл. В остальном подключение плагина не изменится почти.
Ноябрь 27th, 2008
>Можно.
спасибо, разобрался
Декабрь 24th, 2008
лол! класный скрипт
Январь 11th, 2009
Тестик небольшой:)
Январь 18th, 2009
Текст проверки… Интересно все же
Январь 20th, 2009
Интересно же )
Январь 22nd, 2009
Мне тоже интересно
Январь 23rd, 2009
КРУТА
Январь 24th, 2009
вау
Январь 26th, 2009
aaaaa
Февраль 26th, 2009
спс
Апрель 20th, 2009
Спасибо!
Апрель 25th, 2009
Спасибо!
Май 18th, 2009
Тест)
Май 19th, 2009
up!
Май 22nd, 2009
Интересный плагин, обязательно попробую…
Июль 16th, 2009
И как же я могу посмотреть пример, если включена премодерация????
Август 21st, 2009
Декабрь 24th, 2009
Блин, кучу плагинов перепробовал. Может это поможет
Февраль 7th, 2010
Проверка!
Февраль 11th, 2010
dssd
Февраль 12th, 2010
пробуемс
Февраль 12th, 2010
пробу
Your text to link…емс
Февраль 19th, 2010
Забыл
Февраль 19th, 2010
дгпщгп
Февраль 28th, 2010
Test )
Март 15th, 2010
вапвы
Март 19th, 2010
тест
Март 28th, 2010
тестинг
Апрель 15th, 2010
тестgh
Апрель 20th, 2010
r
Апрель 20th, 2010
4545
Апрель 24th, 2010
тест
Апрель 24th, 2010
тест ыыыыыы
Апрель 27th, 2010
Проверка аякса…
Июнь 18th, 2010
Проверка аякса…
Июнь 21st, 2010
test ajax
Июнь 24th, 2010
ЖОСКО!
Июнь 30th, 2010
тест
Июль 4th, 2010
Здорово.
Июль 4th, 2010
Непонятно, как это действует.
Июль 4th, 2010
Непонятно, как это действует.тест тест
Июль 11th, 2010
ну и я поспамлю)
Август 7th, 2010
проба
Август 14th, 2010
Тест комментария
Август 18th, 2010
thanks a lot!
Август 21st, 2010
tesr
Август 21st, 2010
test
Сентябрь 2nd, 2010
test
Сентябрь 13th, 2010
хм… не ужели работает?
Сентябрь 17th, 2010
спасибо!
Сентябрь 22nd, 2010
Нормально
Сентябрь 24th, 2010
полезная статья!)
Октябрь 21st, 2010
ПРОВЕРКО
Ноябрь 2nd, 2010
фцуву
Ноябрь 23rd, 2010
testt
Ноябрь 23rd, 2010
Проверка
Ноябрь 23rd, 2010
Тесблин!
Ноябрь 27th, 2010
Your text to link…
Декабрь 7th, 2010
sss
Декабрь 14th, 2010
бла бла бла
Декабрь 14th, 2010
Хз хз… Простенько очень)) А данные в форме зачем оставлять после отправки?
Декабрь 15th, 2010
юдл
Декабрь 26th, 2010
Ajax таки замечательная штука, но учить ради него javascript – лень. А так, можно вообще ко всему wordpress’у прикрутить ajax, пример тому – самый популярный вордпресовский шаблон с функцией миниблога.
Декабрь 27th, 2010
Раз два три
четырепять ишесть
тыц тыцууууу..!!
Декабрь 27th, 2010
круто
Декабрь 28th, 2010
Спасибо мэн). Сегодня пол дня потратил на то чтоб найти реализацию без плагина))) Респект от onjee
Январь 5th, 2011
test
Январь 15th, 2011
Блин… а чо поле комментария не очищается и коммент виден только после того как страницу перезагрузить?
Январь 18th, 2011
робит?fff
Январь 25th, 2011
test
Февраль 8th, 2011
А ну ка )
Март 8th, 2011
Тестовый комментарий.
Март 21st, 2011
test
Март 24th, 2011
Тестим
Тест прошел успешно!
Март 26th, 2011
пробуем
Апрель 6th, 2011
Test
Апрель 13th, 2011
asdasdsa
Апрель 19th, 2011
Это нифига не работает. Всё сделал как написано – подключил скрипты, прописал onclick и т.д., а при отправке страница всё равно перегружается, и в статусбаре в ИЕ пояляется ошибка “object doesn’t support this method”. У вас не немного не такой код, как в примере. И что-то здесь недосказано…
Апрель 22nd, 2011
Проверка
Апрель 25th, 2011
Тест!!! Если норм, заберу себе)
Май 14th, 2011
Не работает. Жаль. Хотя форма ввода симпатичная (Я про WySiWyG). Помню, игрался с ней тоже.
Июнь 13th, 2011
Очень интересно нужно попробовать))))
Июнь 26th, 2011
klnmpsofwef
Июнь 29th, 2011
Тестируем Аякс!
Июль 8th, 2011
Тестируем Аякс!
Июль 9th, 2011
Попробуем…
Июль 9th, 2011
Ха-ха, очень смешно(
Август 4th, 2011
test comment
Август 19th, 2011
ну и я внесу свою лепту в проверки
Август 31st, 2011
test
Август 31st, 2011
test
Август 31st, 2011
testing
Август 31st, 2011
Скажите, пожалуйста.
А можно ли еще сделать кнопку, которая на ajax будет подгружать новые комментарии без перезагрузки страницы? Что-то типа «обновить комментарии».
Сентябрь 3rd, 2011
999999
Сентябрь 4th, 2011
test
Сентябрь 6th, 2011
тест
Октябрь 13th, 2011
тест 3456й
Октябрь 15th, 2011
nvhvhvjhvjv
Декабрь 2nd, 2011
дурацкий вопрос, но я правда не догоняю.Подскажите пожаста, как вместо благодарственной надписи вывести сам комментарий без перезагрузки страницы
Декабрь 5th, 2011
test
Декабрь 13th, 2011
Подскажите, пожалуйста, как через ajax можно сделать обновление произвольных полей записи при клике на объекте внутри записи?
Декабрь 19th, 2011
df
Январь 17th, 2012
пвпвап
Январь 31st, 2012
test
Февраль 3rd, 2012
У меня все равно перезагружается страничка
Февраль 11th, 2012
проверю
Февраль 11th, 2012
проверю. еще раз
Февраль 13th, 2012
123123123
Февраль 16th, 2012
Антиспам: Сколько будет 1 + 5 ?
Февраль 16th, 2012
Спасибо за комментарий! После проверки модератором он появится на сайте. Или не появится.
Март 3rd, 2012
sfsdfsdfsdfsdfsfsgsdgs
Март 4th, 2012
имресмлпгм пр лрп рпл лрпьрм лпр
Март 19th, 2012
Пора флуд проверяльшиков убрать из этого поста)
Апрель 2nd, 2012
тестим
Апрель 6th, 2012
тествымыЯВмывывямяывмыввымяывмяывам
Апрель 24th, 2012
kljsalkjsa
Май 8th, 2012
dfsadf ds fsdfsd
Май 9th, 2012
Спасибо. А как менять дизайн такой формы? И можно ли убирать ненужные функции в написании коментария?
Май 14th, 2012
ачвспвапвап
Май 14th, 2012
document.alert(пиздец)