Все для DataLife Engine / DLE хаки / Хак для DLE / Хак DLE Псевдо AJAX формы страницы без перезагрузки

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


Представляем хак DLE Псевдо AJAX формы страницы без перезагрузки, хак позволяет сделать отправку формы без полной перезагрузки страницы, и применим к странице информации об ошибке.

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

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

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

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

[spoiler=Установка хака Псевдо AJAX формы и отображение ошибок без перезагрузки страницы
]В любом подключенном к шаблону JS файле прописать. Например в шаблоне часто можно встретить папку JS, там файл с фортам .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">


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

С уважением,
Олег Александрович a.k.a. Sander
Автор: Sander
Версия DataLife Engine: любая
Цена: Бесплатно


Скачать хаки для DLE, как хак Псевдо AJAX формы, страница ошибок без перезагрузки

Psevdo-AJAX-formy-i-otobrazhenie-oshibok-bez-perezagruzki-stranicy.rar [25,22 Kb] (cкачиваний: 67)
  • 60
Добавить комментарий

Оставить комментарий

    • 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