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

Материал из Umicms
Перейти к:навигация, поиск
(Новая страница: «Сейчас мы в несколько довольно несложных действий заставим нашу вебформу, добавленную с п…»)
 
 
(не показано 6 промежуточных версий 2 участников)
Строка 1: Строка 1:
 +
'''Актуально для версии 2.9'''
 +
 
Сейчас мы в несколько довольно несложных действий заставим нашу вебформу, добавленную с помощью модуля обратная связь работать без перезагрузки страницы.
 
Сейчас мы в несколько довольно несложных действий заставим нашу вебформу, добавленную с помощью модуля обратная связь работать без перезагрузки страницы.
 
В этом нам поможет jquery плагин Form.
 
В этом нам поможет jquery плагин Form.
Строка 11: Строка 13:
 
<xsl:value-of select="document('udata://system/includeQuickEditJs')/udata" disable-output-escaping="yes" />
 
<xsl:value-of select="document('udata://system/includeQuickEditJs')/udata" disable-output-escaping="yes" />
 
</source>
 
</source>
−
Всё, с шапкой закончили, так как сам jquery у нас уже подключен, макросами
+
Всё, с шапкой закончили, так как сам jquery у нас уже подключен, макросом
 
<source lang="php">
 
<source lang="php">
−
%system includeQuickEditJs()%
+
<xsl:value-of select="document('udata://system/includeQuickEditJs')/udata" disable-output-escaping="yes" />
−
%system includeEditInPlaceJs()%
 
 
</source>
 
</source>
 
Теперь переходим к шаблону вебформ.
 
Теперь переходим к шаблону вебформ.
−
Открываем его.(если вы ничего не меняли, то он находиться по адресу /tpls/data/reflection/webforms.tpl)
+
Открываем его.(если у вас шаблон demodizzy, то он находиться по адресу /xsltTpls/modules/webforms/add.xsl)
−
и имеющийся код
+
и фрагмент кода
−
<source lang="php">
+
<source lang="xml">
−
<form enctype="multipart/form-data" method="post" action="%pre_lang%/webforms/send/">
+
<xsl:template match="udata[@module = 'webforms'][@method = 'add']">
−
<input type="hidden" name="system_form_id" value="%form_id%" />
+
<form method="post" action="{$lang-prefix}/webforms/send/" onsubmit="site.forms.data.save(this); return site.forms.data.check(this);" enctype="multipart/form-data">
−
<input type="hidden" name="system_template" value="%template%" />
+
<xsl:apply-templates select="items" mode="address" />
−
<input type="hidden" value="%pre_lang%/webforms/posted/" name="ref_onsuccess">
+
<xsl:apply-templates select="groups/group" mode="webforms" />
−
%address_select%
+
<input type="hidden" name="system_form_id" value="{/udata/@form_id}" />
−
%groups%
+
<input type="hidden" name="ref_onsuccess" value="{$lang-prefix}/webforms/posted/{/udata/@form_id}/" />
−
</form>
+
<div class="form_element">
 +
<xsl:apply-templates select="document('udata://system/captcha/')/udata" />
 +
</div>
 +
<div class="form_element">
 +
<input type="submit" class="button" value="Отправить" />
 +
</div>
 +
</form>
 +
</xsl:template>
 
</source>
 
</source>
 
заменяем на вот такой
 
заменяем на вот такой
−
<source lang="php">
+
<source lang="xml">
−
<form id="umi_the_best" enctype="multipart/form-data" method="post" action="%pre_lang%/webforms/send/">
+
<xsl:template match="udata[@module = 'webforms'][@method = 'add']">
−
<input type="hidden" name="system_form_id" value="%form_id%" />
+
<form id="umi_the_best" method="post" action="{$lang-prefix}/webforms/send/" onsubmit="site.forms.data.save(this); return site.forms.data.check(this);" enctype="multipart/form-data">
−
<input type="hidden" name="system_template" value="%template%" />
+
<xsl:apply-templates select="items" mode="address" />
−
<input type="hidden" value="%pre_lang%/webforms/posted/" name="ref_onsuccess">
+
<xsl:apply-templates select="groups/group" mode="webforms" />
−
%address_select%
+
<input type="hidden" name="system_form_id" value="{/udata/@form_id}" />
−
%groups%
+
<input type="hidden" name="ref_onsuccess" value="{$lang-prefix}/webforms/posted/{/udata/@form_id}/" />
−
</form>
+
<div class="form_element">
−
 
+
<xsl:apply-templates select="document('udata://system/captcha/')/udata" />
−
<script type="text/javascript">
+
</div>
−
$(document).ready(function(){
+
<div class="form_element">
−
  $("#umi_the_best").ajaxForm(function() {
+
<input type="submit" class="button" value="Отправить" />
−
    alert("Спасибо за ваш отзыв!");
+
</div>
−
  });
+
</form>
−
});
+
−
</script>
+
<script type="text/javascript">
 +
                    $(document).ready(function(){
 +
                        $("#umi_the_best").ajaxForm(function() {
 +
                            alert("Спасибо за ваш отзыв!");
 +
                            jQuery("#umi_the_best").trigger("reset");
 +
                        });
 +
                    });
 +
                </script>
 +
</xsl:template>
 
</source>
 
</source>
 
Всё, теперь форма у нас работает без перезагрузки страницы.
 
Всё, теперь форма у нас работает без перезагрузки страницы.
  
 
Внимание, работа данного метода проверена на версии 2.8.5.3, если ваша версия ниже, работа этого метода не гарантирована.
 
Внимание, работа данного метода проверена на версии 2.8.5.3, если ваша версия ниже, работа этого метода не гарантирована.
 +
 +
Инструкцию для tpl шаблонизатора вы можете найти по адресу [http://wiki.umisoft.ru/Вебформы_на_ajax_tpl Вебформы на ajax tpl]
 +
 +
[[Категория:Вопросы и уроки разработки сайтов на UMI.CMS]][[Категория: Верстка в XSLT]]

Текущая версия на 11:30, 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 -->

Внимание строчка обязательно должна быть ниже макроса 

<xsl:value-of select="document('udata://system/includeQuickEditJs')/udata" disable-output-escaping="yes" />

Всё, с шапкой закончили, так как сам jquery у нас уже подключен, макросом 

<xsl:value-of select="document('udata://system/includeQuickEditJs')/udata" disable-output-escaping="yes" />

Теперь переходим к шаблону вебформ. Открываем его.(если у вас шаблон demodizzy, то он находиться по адресу /xsltTpls/modules/webforms/add.xsl) и фрагмент кода 

<xsl:template match="udata[@module = 'webforms'][@method = 'add']">
		<form method="post" action="{$lang-prefix}/webforms/send/" onsubmit="site.forms.data.save(this); return site.forms.data.check(this);" enctype="multipart/form-data">
			<xsl:apply-templates select="items" mode="address" />
			<xsl:apply-templates select="groups/group" mode="webforms" />
			<input type="hidden" name="system_form_id" value="{/udata/@form_id}" />
			<input type="hidden" name="ref_onsuccess" value="{$lang-prefix}/webforms/posted/{/udata/@form_id}/" />
			<div class="form_element">
				<xsl:apply-templates select="document('udata://system/captcha/')/udata" />
			</div>
			<div class="form_element">
				<input type="submit" class="button" value="Отправить" />
			</div>
		</form>
</xsl:template>

заменяем на вот такой 

<xsl:template match="udata[@module = 'webforms'][@method = 'add']">
		<form id="umi_the_best" method="post" action="{$lang-prefix}/webforms/send/" onsubmit="site.forms.data.save(this); return site.forms.data.check(this);" enctype="multipart/form-data">
			<xsl:apply-templates select="items" mode="address" />
			<xsl:apply-templates select="groups/group" mode="webforms" />
			<input type="hidden" name="system_form_id" value="{/udata/@form_id}" />
			<input type="hidden" name="ref_onsuccess" value="{$lang-prefix}/webforms/posted/{/udata/@form_id}/" />
			<div class="form_element">
				<xsl:apply-templates select="document('udata://system/captcha/')/udata" />
			</div>
			<div class="form_element">
				<input type="submit" class="button" value="Отправить" />
			</div>
		</form>
		
		<script type="text/javascript">
                    $(document).ready(function(){
                        $("#umi_the_best").ajaxForm(function() {
                            alert("Спасибо за ваш отзыв!");
                            jQuery("#umi_the_best").trigger("reset");
                        });
                    });
                </script>
</xsl:template>

Всё, теперь форма у нас работает без перезагрузки страницы.

Внимание, работа данного метода проверена на версии 2.8.5.3, если ваша версия ниже, работа этого метода не гарантирована.

Инструкцию для tpl шаблонизатора вы можете найти по адресу Вебформы на ajax tpl

Источник — «https://wiki.umisoft.ru/index.php?title=Вебформы_на_ajax_xslt&oldid=8005»