Вебформы на ajax xslt — различия между версиями
Материал из Umicms
Deez (обсуждение | вклад) |
Deez (обсуждение | вклад) |
||
| Строка 18: | Строка 18: | ||
Открываем его.(если у вас шаблон demodizzy, то он находиться по адресу /xsltTpls/modules/webforms/add.xsl) | Открываем его.(если у вас шаблон demodizzy, то он находиться по адресу /xsltTpls/modules/webforms/add.xsl) | ||
и фрагмент кода | и фрагмент кода | ||
| − | <source lang=" | + | <source lang="xml"> |
<xsl:template match="udata[@module = 'webforms'][@method = 'add']"> | <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"> | <form method="post" action="{$lang-prefix}/webforms/send/" onsubmit="site.forms.data.save(this); return site.forms.data.check(this);" enctype="multipart/form-data"> | ||
| Строка 35: | Строка 35: | ||
</source> | </source> | ||
заменяем на вот такой | заменяем на вот такой | ||
| − | <source lang=" | + | <source lang="xml"> |
<xsl:template match="udata[@module = 'webforms'][@method = 'add']"> | <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"> | <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"> | ||
Версия 20:08, 2 сентября 2012
Сейчас мы в несколько довольно несложных действий заставим нашу вебформу, добавленную с помощью модуля обратная связь работать без перезагрузки страницы. В этом нам поможет 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, если ваша версия ниже, работа этого метода не гарантирована.
