• Спонсоры

  • Рубрики

  • Архивы

  • Популярное



Форма комментирования на AJAX

За все время мы обратились уже ко многим областям веб-разработки по отдельности. Сегодня начнем их совмещать. В этой статье, я приведу пример того, как можно совместить знание ajax и wordpress`а, и получить в результате форму комментирования для вашего блога на ajax.В качестве инструментов мне понадобиться только библиотека JQuery и плагин к ней для работы с формами.

Итак, моя цель – сделать такую форму для комментирования, через которую можно будет оставить комментарий без перезагрузки страницы.

Сперва нужно создать каталог с именем js внутри папки с темой. В него положить два файла:

  1. Файл библиотеки jquery.js (http://jquery.com)
  2. Плагин 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" />

Ну, вот и все. Результат всего этого можете наблюдать у формы комментирования на этом блоге. 🙂



Теги: ,


Читайте также:



140 комментариев на “Форма комментирования на AJAX”

  1. О! Я первый посмотрю как это выглядит 🙂

  2. novice

    🙂 На днях попробую усовершенствовать немного эту форму на блоге.

  3. Ща попробуем на денвере.

  4. ruslan

    все ok

  5. Проверка! 🙂

  6. Red

    Такой вопрос, может не совсем по теме, но лучшего места ненашол, каким образом можно постить новости с кратким и полным содержанием, тоеть чтоб на главной странице было краткое содержание, и ссылочка подробнее… ведущая на страницу с полным содержанием новости.

  7. Если в wordpress, то в месте, где надо обрезать текст (указать анонс), нужно поставить специальный тег <!—more—>

  8. Red

    А реально сделать так чтобы было 2 редактора, в один пишеш краткий текст, а во второй полный ?

  9. novice

    Насчет редактора не скажу точно — там больно глубокие изменения надо делать. А если без редактора обойтись, то можно анонс выделять в дополнительное поле к посту. На главной странице выводить анонс только, а при нажатии на линке показывать пост сам. Про дополнительные поля можешь здесь почитать : http://i-novice.net/izmenyaem-wordpress-temu/

  10. Вальдемар

    А можно ли как то приспособить данный плагин для отправки сообщения на заданный email? естественно, без перезагрузки страницы (говорю о форме обратной связи)…

  11. cryptus

    Можно. Если хотите сделать из формы комментирования wordpress форму обратной связи такую, то надо менять ядро блога.

    А если просто на каком-то из Ваших сайтов, то просто в action form`ы, которая будет отправляться укажите нужный php-файл. В остальном подключение плагина не изменится почти.

  12. Вальдемар

    >Можно.
    спасибо, разобрался

  13. lolol)))

    лол! класный скрипт

  14. Denis

    Тестик небольшой:)

  15. Проверка

    Текст проверки… Интересно все же 🙂

  16. Проверяющуй

    Интересно же )

  17. Vist

    Мне тоже интересно

  18. Алекс

    КРУТА

  19. прикольно

    вау

  20. Тестим)

    aaaaa

  21. Вася

    спс

  22. Алексей

    Спасибо!

  23. Максим

    Спасибо!

  24. Тест)

  25. qwerty

    up!

  26. Tuk

    Интересный плагин, обязательно попробую…

  27. vd

    И как же я могу посмотреть пример, если включена премодерация????

  28. Alexx

    🙂 дурацкий вопрос, но я правда не догоняю.Подскажите пожаста, как вместо благодарственной надписи вывести сам комментарий без перезагрузки страницы ?

  29. Алекс

    Блин, кучу плагинов перепробовал. Может это поможет

  30. Вася

    Проверка!

  31. 123

    dssd

  32. вова

    пробуемс

  33. пробуYour text to link…

    емс

  34. Имя

    Забыл

  35. прдгшршгщ

    дгпщгп

  36. kkgjg

    Test )

  37. вапвы

  38. тест

  39. тестер

    тестинг

  40. тестер

    тестgh

  41. rt

    r

  42. 354

    4545

  43. ыыыы

    тест

  44. ыыыыы

    тест ыыыыыы

  45. Алекс

    Проверка аякса…

  46. ромс

    Проверка аякса…

  47. how

    test ajax

  48. Малина

    ЖОСКО!

  49. тест

  50. Ksana

    Здорово.

  51. Ksana

    Непонятно, как это действует.

  52. Ksana

    Непонятно, как это действует.тест тест

  53. patrik

    ну и я поспамлю)

  54. я

    проба

  55. Тест комментария

  56. masha

    thanks a lot!

  57. уке

    tesr

  58. asd

    test

  59. s

    test

  60. RepA

    хм… не ужели работает?

  61. Vova

    спасибо!

  62. долина

    Нормально

  63. Dimon

    полезная статья!)

  64. ОЛЕГ ВИКТОРОВИЧ

    ПРОВЕРКО

  65. 345345

    фцуву

  66. testt

  67. Проверка

  68. oleg

    Тесблин!

  69. 1

    Your text to link…

  70. помощник

    sss

  71. бла бла бла

  72. Хз хз… Простенько очень)) А данные в форме зачем оставлять после отправки?

  73. sad

    юдл

  74. Chupik

    Ajax таки замечательная штука, но учить ради него javascript — лень. А так, можно вообще ко всему wordpress’у прикрутить ajax, пример тому — самый популярный вордпресовский шаблон с функцией миниблога.

  75. rash

    Раз два три
    четырепять ишесть
    тыц тыцууууу..!!

  76. mikesoup

    круто

  77. Спасибо мэн). Сегодня пол дня потратил на то чтоб найти реализацию без плагина))) Респект от onjee

  78. 123

    test

  79. Блин… а чо поле комментария не очищается и коммент виден только после того как страницу перезагрузить?

  80. яffff

    робит?fff

  81. авва

    test

  82. Олег

    А ну ка )

  83. Тестовый комментарий.

  84. вася

    test

  85. Павел

    Тестим
    Тест прошел успешно!

  86. пробуем

  87. Test

    Test

  88. aasd

    asdasdsa

  89. Это нифига не работает. Всё сделал как написано — подключил скрипты, прописал onclick и т.д., а при отправке страница всё равно перегружается, и в статусбаре в ИЕ пояляется ошибка «object doesn’t support this method». У вас не немного не такой код, как в примере. И что-то здесь недосказано…

  90. Проверка

  91. Мишаня

    Тест!!! Если норм, заберу себе)

  92. Не работает. Жаль. Хотя форма ввода симпатичная (Я про WySiWyG). Помню, игрался с ней тоже.

  93. mixsd

    Очень интересно нужно попробовать))))

  94. тест

    klnmpsofwef

  95. Алекс

    Тестируем Аякс!

  96. Тестируем Аякс!

  97. Попробуем…

  98. Ха-ха, очень смешно(

  99. test

    test comment

  100. ну и я внесу свою лепту в проверки

  101. Имя

    test

  102. лифт

    test

  103. лифт

    testing

  104. ritman

    Скажите, пожалуйста.
    А можно ли еще сделать кнопку, которая на ajax будет подгружать новые комментарии без перезагрузки страницы? Что-то типа «обновить комментарии».

  105. 453

    999999

  106. саша

    test

  107. жорж

    тест

  108. jorik

    тест 3456й

  109. прпмарпр

    nvhvhvjhvjv

  110. www

    дурацкий вопрос, но я правда не догоняю.Подскажите пожаста, как вместо благодарственной надписи вывести сам комментарий без перезагрузки страницы

  111. Денис

    test

  112. Yeva

    Подскажите, пожалуйста, как через ajax можно сделать обновление произвольных полей записи при клике на объекте внутри записи?

  113. df

    df

  114. выва

    пвпвап

  115. ggg

    test

  116. олег

    У меня все равно перезагружается страничка 🙁

  117. проверю

  118. Otshelnik-fm

    проверю. еще раз

  119. 1

    123123123

  120. Антиспам: Сколько будет 1 + 5 ?

  121. Спасибо за комментарий! После проверки модератором он появится на сайте. Или не появится. 🙂

  122. пвапв

    sfsdfsdfsdfsdfsfsgsdgs

  123. нагнаеш

    имресмлпгм пр лрп рпл лрпьрм лпр

  124. kos

    Пора флуд проверяльшиков убрать из этого поста)

  125. test

    тестим

  126. тествымыЯВмывывямяывмыввымяывмяывам

  127. kljsalkjsa

  128. кауа

    dfsadf ds fsdfsd

  129. Спасибо. А как менять дизайн такой формы? И можно ли убирать ненужные функции в написании коментария?

  130. вапвап

    ачвспвапвап

  131. sdf

    document.alert(пиздец)

  132. damir
  133. Otto

    класс

  134. wert

    ertsdfsd

  135. Это болд.
    Это италик.
    Это перечеркивание.

    Это
    нумерованый
    список

  136. Проба

  137. леха

    Эта хуйня вообще работат?

  138. Артем

    Пипец тут флуд.

  139. бру

    бру бру =)

  140. ссссс

    ооо


© 2008 - 2017 i-novice.net | Все права защищены.