Вебформы на ajax tpl — различия между версиями

Материал из Umicms
Перейти к:навигация, поиск
(Новая страница: «Сейчас мы в несколько довольно несложных действий заставим нашу вебформу, добавленную с п…»)
 
Строка 1: Строка 1:
 
Сейчас мы в несколько довольно несложных действий заставим нашу вебформу, добавленную с помощью модуля обратная связь работать без перезагрузки страницы.
 
Сейчас мы в несколько довольно несложных действий заставим нашу вебформу, добавленную с помощью модуля обратная связь работать без перезагрузки страницы.
 
В этом нам поможет jquery плагин Form.
 
В этом нам поможет jquery плагин Form.
Для начала открываем шаблон, где размещается шапка необходимой нам страницы и между тэгами head, в самом низу добавляем строчку
+
Для начала открываем шаблон, где размещается шапка необходимой нам страницы и между тэгами head, в самом низу добавляем строчки
 +
<source lang="php">
 
<!-- ajax jquery Forms -->
 
<!-- ajax jquery Forms -->
 
<script src="http://malsup.github.com/jquery.form.js" type="text/javascript"></script>
 
<script src="http://malsup.github.com/jquery.form.js" type="text/javascript"></script>
 
<!-- end ajax jquery forms -->
 
<!-- end ajax jquery forms -->
 +
<source>
 
Внимание строчка обязательно должна быть выше макросов
 
Внимание строчка обязательно должна быть выше макросов
 +
<source lang="php">
 
%system includeQuickEditJs()%
 
%system includeQuickEditJs()%
 
%system includeEditInPlaceJs()%
 
%system includeEditInPlaceJs()%
 +
<source>
 
Всё, с шапкой закончили, так как сам jquery у нас уже подключен, макросами
 
Всё, с шапкой закончили, так как сам jquery у нас уже подключен, макросами
 +
<source lang="php">
 
%system includeQuickEditJs()%
 
%system includeQuickEditJs()%
 
%system includeEditInPlaceJs()%
 
%system includeEditInPlaceJs()%
 
+
<source>
 
Теперь переходим к шаблону вебформ.
 
Теперь переходим к шаблону вебформ.
 
Открываем его.(если вы ничего не меняли, то он находиться по адресу /tpls/data/reflection/webforms.tpl)
 
Открываем его.(если вы ничего не меняли, то он находиться по адресу /tpls/data/reflection/webforms.tpl)
 
и имеющийся код
 
и имеющийся код
 +
<source lang="php">
 
<form enctype="multipart/form-data" method="post" action="%pre_lang%/webforms/send/">
 
<form enctype="multipart/form-data" method="post" action="%pre_lang%/webforms/send/">
 
<input type="hidden" name="system_form_id" value="%form_id%" />
 
<input type="hidden" name="system_form_id" value="%form_id%" />
Строка 22: Строка 28:
 
%groups%
 
%groups%
 
</form>
 
</form>
 
+
<source>
 
заменяем на вот такой
 
заменяем на вот такой
 
+
<source lang="php">
<form enctype="multipart/form-data" method="post" action="%pre_lang%/webforms/send/">
+
<form id="umi_the_best" enctype="multipart/form-data" method="post" action="%pre_lang%/webforms/send/">
 
<input type="hidden" name="system_form_id" value="%form_id%" />
 
<input type="hidden" name="system_form_id" value="%form_id%" />
 
<input type="hidden" name="system_template" value="%template%" />
 
<input type="hidden" name="system_template" value="%template%" />
Строка 33: Строка 39:
 
</form>
 
</form>
  
 +
<script type="text/javascript">
 +
$(document).ready(function(){
 +
  $("#umi_the_best").ajaxForm(function() {
 +
    alert("Спасибо за ваш отзыв!");
 +
  });
 +
});
 +
</script>
 +
<source>
 
Всё, теперь форма у нас работает без перезагрузки страницы.
 
Всё, теперь форма у нас работает без перезагрузки страницы.

Версия 19:44, 2 сентября 2012

Сейчас мы в несколько довольно несложных действий заставим нашу вебформу, добавленную с помощью модуля обратная связь работать без перезагрузки страницы. В этом нам поможет jquery плагин Form. Для начала открываем шаблон, где размещается шапка необходимой нам страницы и между тэгами head, в самом низу добавляем строчки <source lang="php"> <script src="http://malsup.github.com/jquery.form.js" type="text/javascript"></script> <source> Внимание строчка обязательно должна быть выше макросов <source lang="php"> %system includeQuickEditJs()% %system includeEditInPlaceJs()% <source> Всё, с шапкой закончили, так как сам jquery у нас уже подключен, макросами <source lang="php"> %system includeQuickEditJs()% %system includeEditInPlaceJs()% <source> Теперь переходим к шаблону вебформ. Открываем его.(если вы ничего не меняли, то он находиться по адресу /tpls/data/reflection/webforms.tpl) и имеющийся код <source lang="php"> <form enctype="multipart/form-data" method="post" action="%pre_lang%/webforms/send/"> <input type="hidden" name="system_form_id" value="%form_id%" /> <input type="hidden" name="system_template" value="%template%" /> <input type="hidden" value="%pre_lang%/webforms/posted/" name="ref_onsuccess"> %address_select% %groups% </form> <source> заменяем на вот такой <source lang="php"> <form id="umi_the_best" enctype="multipart/form-data" method="post" action="%pre_lang%/webforms/send/"> <input type="hidden" name="system_form_id" value="%form_id%" /> <input type="hidden" name="system_template" value="%template%" /> <input type="hidden" value="%pre_lang%/webforms/posted/" name="ref_onsuccess"> %address_select% %groups% </form>

<script type="text/javascript"> $(document).ready(function(){ $("#umi_the_best").ajaxForm(function() { alert("Спасибо за ваш отзыв!"); }); }); </script> <source> Всё, теперь форма у нас работает без перезагрузки страницы.