Шаблоны для DLE » Хаки » Псевдо AJAX формы и отображение ошибок без перезагрузки страницы
Нет изображения

Представляем вам хак псевдо AJAX формы и отображение ошибок без перезагрузки страницы для dle 11.x и так начнем, наверное многие из вас задавались таким вопросом, как же сделать так чтобы при отправке формы информация об ошибке отображалась сразу, а не только после полной перезагрузки страницы. Вообще по хорошему необходимо бы переделать отправку формы на AJAX и написать еще отдельный обработчик, например такой как сделан в feedback. Однако такой метод не всегда удобен или через чур сложен в плане исполнения, к счастью сейчас уже есть простое решение на JS и iFrame`ов, также смотрите наши другие хаки для dle и ищите для своего проекта нужное и полезное.


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


Установка:


1. В любом подключенном к шаблону 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();
})



2
. Открыть в шаблоне info.tpl и добавить:

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



3. Т.к. в некоторых случаях (успешная авторизация, успешное сохранение настроек в профиле) не отображается тег , необходимо добавить свой вывод сообщения. Для этого следует открыть engine/modules/main.php и найти:

$tpl->set ( '{info}',  $tpl->result['info'] );



Добавить выше:

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



4. Использование:

Если есть доступ к редактированию HTML кода самой формы, то к ней достаточно добавить класс ajaxForm

<form method="post" class="ajaxForm">



На странице редактирования профиля тег form прописан сразу в php файле и вносить изменения туда достаточно неудобно, для таких случаев можно воспользоваться ключевым именем класса ajax_form_parent

Т.е. в любом месте в тегах внутри формы достаточно добавить вышеуказанный класс. Например вот моя первая строка из шаблона userinfo.tpl:

<div class="container userbox ajax_form_parent">



Все!


Загрузка не требуется!
  • Версия DLE: 11.x
  • Кодировка: utf-8, win-1251
  • Категория: Хаки
  • Автор: Sander
  • Источник:

собрано 3030.00 рублей Поддержать автора

Войдите на сайт


Все собранные средства будут переданы автору этой статьи - DEN
Сумма перевода от 10.00 рублей
00
80
0
29-07-2022, 20:26
Обсудить (0)
Похожие хаки
Комментарии
Минимальная длина комментария - 10 знаков. комментарии модерируются
Комментариев еще нет. Вы можете стать первым!
Помощь в публикации комментариев:
1.) Если вы хотите задать вопрос, тогда просто оставьте комментарий, не нужно вопрос добавлять в ответ.
2.) Если вы хотите ответить на комментарий, для этого есть кнопка "ответить" под нужным вам вопросом.
  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
Мы ценим вашу конфиденциальность
Мы используем файлы "cookie" на нашем веб-сайте, чтобы предоставить вам наиболее релевентный результат, помня ваши предпочтения и повторные посещения.
Нажимая "Принять" вы соглашаетесь на использование всех файлов "cookie".
Принять
Не принимаю
Показать цели
X

Платные услуги новостей