Вебформы на ajax tpl — различия между версиями
Материал из Umicms
Deez (обсуждение | вклад) |
Alexei (обсуждение | вклад) |
||
| (не показано 5 промежуточных версий 2 участников) | |||
| Строка 1: | Строка 1: | ||
| + | '''Актуально для версии 2.9''' | ||
| + | |||
Сейчас мы в несколько довольно несложных действий заставим нашу вебформу, добавленную с помощью модуля обратная связь работать без перезагрузки страницы. | Сейчас мы в несколько довольно несложных действий заставим нашу вебформу, добавленную с помощью модуля обратная связь работать без перезагрузки страницы. | ||
В этом нам поможет jquery плагин Form. | В этом нам поможет jquery плагин Form. | ||
| Строка 6: | Строка 8: | ||
<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> |
| − | Внимание строчка обязательно должна быть | + | Внимание строчка обязательно должна быть ниже макросов |
<source lang="php"> | <source lang="php"> | ||
%system includeQuickEditJs()% | %system includeQuickEditJs()% | ||
%system includeEditInPlaceJs()% | %system includeEditInPlaceJs()% | ||
| − | <source> | + | </source> |
Всё, с шапкой закончили, так как сам jquery у нас уже подключен, макросами | Всё, с шапкой закончили, так как сам jquery у нас уже подключен, макросами | ||
<source lang="php"> | <source lang="php"> | ||
%system includeQuickEditJs()% | %system includeQuickEditJs()% | ||
%system includeEditInPlaceJs()% | %system includeEditInPlaceJs()% | ||
| − | <source> | + | </source> |
Теперь переходим к шаблону вебформ. | Теперь переходим к шаблону вебформ. | ||
Открываем его.(если вы ничего не меняли, то он находиться по адресу /tpls/data/reflection/webforms.tpl) | Открываем его.(если вы ничего не меняли, то он находиться по адресу /tpls/data/reflection/webforms.tpl) | ||
| Строка 28: | Строка 30: | ||
%groups% | %groups% | ||
</form> | </form> | ||
| − | <source> | + | </source> |
заменяем на вот такой | заменяем на вот такой | ||
<source lang="php"> | <source lang="php"> | ||
<form id="umi_the_best" 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_template" value="%template%" /> | |
| − | + | <input type="hidden" value="%pre_lang%/webforms/posted/" name="ref_onsuccess"> | |
| − | + | %address_select% | |
| − | + | %groups% | |
</form> | </form> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
| − | + | $(document).ready(function(){ | |
| − | + | $("#umi_the_best").ajaxForm(function() { | |
| − | + | alert("Спасибо за ваш отзыв!"); | |
| − | + | jQuery("#umi_the_best").trigger("reset"); | |
| − | + | }); | |
| + | }); | ||
</script> | </script> | ||
| − | <source> | + | </source> |
Всё, теперь форма у нас работает без перезагрузки страницы. | Всё, теперь форма у нас работает без перезагрузки страницы. | ||
| + | |||
| + | Внимание, работа данного метода проверена на версии 2.8.5.3, если ваша версия ниже, работа этого метода не гарантирована. | ||
| + | |||
| + | Инструкцию для xslt шаблонизатора вы можете найти по адресу [http://wiki.umisoft.ru/Вебформы_на_ajax_xslt Вебформы на ajax xslt ] | ||
| + | |||
| + | [[Категория:Верстка в TPL]][[Категория:Вопросы и уроки разработки сайтов на UMI.CMS]] | ||
Текущая версия на 11:33, 17 февраля 2016
Актуально для версии 2.9
Сейчас мы в несколько довольно несложных действий заставим нашу вебформу, добавленную с помощью модуля обратная связь работать без перезагрузки страницы. В этом нам поможет jquery плагин Form. Для начала открываем шаблон, где размещается шапка необходимой нам страницы и между тэгами head, в самом низу добавляем строчки
<!-- ajax jquery Forms -->
<script src="http://malsup.github.com/jquery.form.js" type="text/javascript"></script>
<!-- end ajax jquery forms -->
Внимание строчка обязательно должна быть ниже макросов
%system includeQuickEditJs()%
%system includeEditInPlaceJs()%
Всё, с шапкой закончили, так как сам jquery у нас уже подключен, макросами
%system includeQuickEditJs()%
%system includeEditInPlaceJs()%
Теперь переходим к шаблону вебформ. Открываем его.(если вы ничего не меняли, то он находиться по адресу /tpls/data/reflection/webforms.tpl) и имеющийся код
<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>
заменяем на вот такой
<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("Спасибо за ваш отзыв!");
jQuery("#umi_the_best").trigger("reset");
});
});
</script>
Всё, теперь форма у нас работает без перезагрузки страницы.
Внимание, работа данного метода проверена на версии 2.8.5.3, если ваша версия ниже, работа этого метода не гарантирована.
Инструкцию для xslt шаблонизатора вы можете найти по адресу Вебформы на ajax xslt
