Вебформы на ajax xslt

Материал из Umicms
Перейти к:навигация, поиск

Сейчас мы в несколько довольно несложных действий заставим нашу вебформу, добавленную с помощью модуля обратная связь работать без перезагрузки страницы. В этом нам поможет 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("Спасибо за ваш отзыв!");
			   });
			});
		</script>
</xsl:template>

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

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