Форма комментирования на 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" />
Ну, вот и все. Результат всего этого можете наблюдать у формы комментирования на этом блоге. 
Август 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