Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Модули для DLE » Псевдо AJAX формы и отображение ошибок без перезагрузки страницы

Псевдо AJAX формы и отображение ошибок без перезагрузки страницы


     07.02.2017    Модули для DLE    779    2 комментария

Краткая информация о модуле (хаке)

Автор: Sander
Версия DLE: любая
Цена: Бесплатно
Наверняка многие задавались вопросом, как сделать так, чтобы при отправке формы, информация об ошибке отображалась сразу, а не после полной перезагрузки страницы.
По хорошему необходимо переделывать отправку формы на AJAX и писать отдельный обработчик, например как это сделано в feedback.
Однако подобный метод не всегда удобен или излишне сложен в плане реализации. К счастью есть простое решение на JS с помощью костылей, велосипедов и iFrame`ов.

Кто знает, у формы form существует замечательный атрибут target, с помощью которого мы можем указать форме как и куда отправлять данные. В частности можно отправлять данные в определенный iframe.

Сразу хочу предупредить о небольшом минусе этого метода.
На странице с формой будет создан скрытый iframe, с адресом страницы куда будет отправляться форма, зачастую это та же просматриваемая страница. Т.е. по факту мы просто получим в 2 раза большее количество http запросов к странице.

Пример работы можно увидеть на моем сайте в форме авторизации и на странице редактирования профиля.

Установка
В любом подключенном к шаблону JS файле прописать:
var ajax_form_index = 0;
function ajaxFormInfo(title,error){
	HideLoading();
	DLEalert(error,title);
	return false;
}
$.fn.ajaxForm = function(){
	if(!this.length) return false;
	var url = this.attr('action');
	if(!url) url = window.location.href;
	this.attr('target','ajaxForm_'+ajax_form_index);
	this.append('<input type="hidden" name="ajaxForm" value="1" />');
	$('body').append('<iframe src="'+url+'" name="ajaxForm_'+ajax_form_index+'" style="display: none;"></iframe>');
	this.on('submit',ShowLoading);
	ajax_form_index++;
}
$(function(){
	$(".ajax_form_parent").closest('form').ajaxForm();
	$(".ajaxForm").ajaxForm();
})


Открыть файл шаблона info.tpl
Добавить код:
<script>
if(window.top != window.self) window.parent.ajaxFormInfo('{title}','{error}');
</script>


Т.к. в некоторых случаях (успешная авторизация, успешное сохранение настроек в профиле) не отображается тег {info}, необходимо добавить свой вывод сообщения.
Открыть файл engine/modules/main.php
Найти строку:
$tpl->set ( '{info}',  $tpl->result['info'] );

ПЕРЕД ней вставить:
////////////////////////////////////////////////////////////////////////////////
if(isset($_POST['ajaxForm']) AND $_POST['ajaxForm']==1 AND !$tpl->result['info']) msgbox('Информация',"Операция выполнена успешно. Обновите страницу.");
////////////////////////////////////////////////////////////////////////////////



Использование
Если есть доступ к редактированию HTML кода самой формы, то к ней достаточно добавить класс ajaxForm
<form method="post" class="ajaxForm">


На странице редактирования профиля тег form прописан сразу в php файле и вносить изменения туда достаточно неудобно, для таких случаев можно воспользоваться ключевым именем класса ajax_form_parent
Т.е. в любом месте в тегах внутри формы достаточно добавить вышеуказанный класс. Например вот моя первая строка из шаблона userinfo.tpl
<div class="container userbox ajax_form_parent">


На этом все, надеюсь данный метод окажется вам полезным :)

С уважением,
Олег Александрович a.k.a. Sander

2 комментария

Stasiq
Юзер

Stasiq - 12 февраля 2017 16:15 -

Ничего не понятно ;)

nowheremany
Эксперт

nowheremany - 20 февраля 2017 16:21 -

Проще сделать так

в error.tpl добавляем класс для отражения ошибки типа
<span class="errorMeassage">{error}</span>

Для нужной формы определим класс
<form class="ajaxSubmitCheck">
...
</form>

Ну и скрипт в main.tpl
<script>
$('form.ajaxSubmitCheck').submit(function(){
	$.post(this.action,$(this).serialize(),function(d){
		var r='';
		$(d).find('.errorMeassage').each(function(i,e){
			r+='<li>'+$(e).html()+'</li>';
		})
		if(r==''){
			location.reload()
		} else {
			DLEalert('<ul>'+r+'</ul>','Ошибка')
		}
	});
	return !1;
})
</script>


Правда проблемы с капчей возникнут, нужно её перегенерить и тп, но это уже доработки. Зато править файлы не нужно )

Благодарность принимаю тут Связь

Чтобы комментировать - войдите или зарегистрируйтесь на сайте
наверх