Уважаемые пользователи Голос!
Сайт доступен в режиме «чтение» до сентября 2020 года. Операции с токенами Golos, Cyber можно проводить, используя альтернативные клиенты или через эксплорер Cyberway. Подробности здесь: https://golos.io/@goloscore/operacii-s-tokenami-golos-cyber-1594822432061
С уважением, команда “Голос”
GOLOS
RU
EN
UA
maximus00
5 лет назад

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

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

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

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

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

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

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

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

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

<div class="container userbox ajax_form_parent">

Готово!

1
164.440 GOLOS
На Golos с August 2017
Комментарии (6)
Сортировать по:
Сначала старые