Войти
s-lub » DLE » DLE хаки и модули » Псевдо AJAX формы и отображение ошибок без перезагрузки страницы

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

0 443 admin 01-05-2018 15:21 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
Добавить код:

if(window.top != window.self) window.parent.ajaxFormInfo('{title}','{error}');

Т.к. в некоторых случаях (успешная авторизация, успешное сохранение настроек в профиле) не отображается тег {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">

На этом установка закончена!

Источник
Как к вам обращаться: Ваш E-Mail:  

Код:
Кликните на изображение чтобы обновить код, если он неразборчив

Введите код: