dle-modules / DLE-UniForm

Универсальные формы обратной связи для DataLife Engine
http://pafnuty.name/modules/159-uniform.html
MIT License
22 stars 12 forks source link

Вопрос по модулю УниФорм #68

Closed dollar1981 closed 6 years ago

dollar1981 commented 6 years ago

---Добрый день Павел. У меня вопрос по вашему модулю. Кстати огромное вам спасибо за него! Он спасает меня постоянно. Но вот есть небольшая незадача: Вывожу форму статично, на странице. Все отправляет, все работает. Но после отправки форма сворачивается и чтобы она развернулась снова, необходимо обновить страницу. Нельзя ли как то сделать, чтобы допустим через 5 сек. форма сама снова разворачивалась? @pafnuty не забудь посмотреть этот тиккет :ticket:

pafnuty commented 6 years ago

@dollar1981 да, конечно можно! вот после этой строки https://github.com/dle-modules/DLE-UniForm/blob/master/templates/Default/uniform/js/uniform.js#L64 добавьте

function reloadUniForm (selector) {
    var $this = $(selector),
        url = $this.data('ufInline'),
        data = $this.data('ufSettings');

    $.ajax({
            url: url,
            data: data,
        })
        .done(function (data) {
            $this.html(data);
        });
}

а после этой https://github.com/dle-modules/DLE-UniForm/blob/master/templates/Default/uniform/js/uniform.js#L73

setTimeout(function () {
    reloadUniForm('.yourInlineForm')
}, 5000);

ну или что-то наподобие. Суть в том, что бы после успешной отправки формы вызвать её загрузку снова, через некоторое время.

dollar1981 commented 6 years ago

Не работает. И я правильно понял, что тут reloadUniForm('.yourInlineForm') мы вписываем название формы которую вывели? Сделал все пошагово, ровно как вы и написали. И результата нет. Может подскажете в чем может быть проблема?

dollar1981 commented 6 years ago

В консоли ошибок не наблюдаю. Сайт где делаю тут: http://gorod.54ms.ru/ И еще заметил что при подключении библиотеки jquery-2.1.1.js форма перестает работать нормально. После нажатия на отправку происходит ошибка. белая страница с надписью error.

pafnuty commented 6 years ago

@dollar1981 добавьте к блоку с параметрами формы класс, который будете передавать в функцию. (ну или другой селектор) В DLE уже есть библиотека jquery, нет необходимости подключать её отдельно.

dollar1981 commented 6 years ago

Мда. Я ничего если честно не понял. Если не затруднит, можно поподробнее?

pafnuty commented 6 years ago

блок с параметрами формы:

<div data-uf-inline="/engine/ajax/uniform/uniform.php" data-uf-settings='{"formConfig": "inline"}'>
    <div class="uf-inline-loading"></div>
</div>

jquery селектор Функция и её вызов описаны выше

dollar1981 commented 6 years ago

И куда что вставить то? Я вставил в этот блок '{"formConfig": "inline"}' вызов своей формы, а именно callback. Она вывелась. Она работает. Но не открывается снова после отправки. Только если обновить страницу.

dollar1981 commented 6 years ago

Или мне сюда его надо прописать function reloadUniForm (selector) { var $this = $(selector), url = $this.data('ufInline'), data = $this.data('ufSettings'); ???

dollar1981 commented 6 years ago

Типа $this.data('ufcallback')

dollar1981 commented 6 years ago

Сейчас мой uniform.js выглядит так:

`var doc = $(document);

doc // ajax-отправка формы + эффекты .on('submit', '[data-uf-form]', function () { var $this = $(this), laddaLoad, options = { beforeSubmit: ufStart, success: ufDone, };

    $this.ajaxSubmit(options);

    return false;
})
// Открытие ajax-окна с формой
.on('click', '[data-uf-open]', function (e) {
    var $this = $(this),
        src = $this.data('ufOpen'),
        data = $this.data('ufSettings');

    $.magnificPopup.open({
        items: {
            src: src,
        },
        focus: '.uf-input-first',
        type: 'ajax',
        ajax: {
            settings: {
                data: data
            }
        }
    });
    return false;
})
// Убираем класс с из инпута с ошибочным заполнением
.on('keyup input', '.uf-input-error', function (e) {
    var $this = $(this);
    if (e.type == 'input') {
        doc.off('keyup', '.uf-input-error');
    }
    if ($this.val().length) {
        $this.removeClass('uf-input-error');
    }
});

// Функция, выполняемая перед отправкой формы function ufStart(formData, jqForm) { laddaLoad = jqForm.find('.ladda-button').ladda(); laddaLoad.ladda('start');

return true;

}

function reloadUniForm (selector) { var $this = $(selector), url = $this.data('ufInline'), data = $this.data('ufSettings');

$.ajax({
        url: url,
        data: data,
    })
    .done(function (data) {
        $this.html(data);
    });

}

// Функция, выполняемая после удачной отправки формы function ufDone(responseText, statusText, xhr, $form) {

var $responseText = $(responseText),
    responseResult = ($responseText.is('form')) ? $responseText.html() : responseText;

if (statusText == 'success') {
    laddaLoad.ladda('stop');
    $form.html(responseResult);
    setTimeout(function () {
    reloadUniForm('.callback')
    }, 5000);
}

}

jQuery(document).ready(function ($) { var $inlineUniform = $('[data-uf-inline]'); if ($inlineUniform.length) { $.each($inlineUniform, function (index, val) { var $this = $(this), url = $this.data('ufInline'), data = $this.data('ufSettings');

        $.ajax({
                url: url,
                data: data,
            })
            .done(function (data) {
                $this.html(data);
            });

    });
};

});`

dollar1981 commented 6 years ago

Ткните носом пожалуйста меня.)))

VitArts commented 6 years ago

Смотрите, делаете все как написано выше по файлу (uniform.js). Далее присваиваете класс форме откуда идет вызов формы, а именно:

<div class="yourInlineForm" data-uf-inline="/engine/ajax/uniform/uniform.php" data-uf-settings='{"formConfig": "callback"}'>

Те мы добавляем вот этот класс: class="yourInlineForm"

Все!

dollar1981 commented 6 years ago

Спасибо огромное. Туплю что поделать.))) Теперь все работает как надо. Спасибо вам Павел и вам VitArts.