Отправка формы авторизации Login через ajax

Доброго времени суток!
Помогите пожалуйста разобраться, пытаюсь настроить отправку данных формы авторизации сниппета login с помощью ajax. Хотел сделать такой вариант — если пользователь ввел данные некорректно, сниппет выдавал бы ошибку без перезагрузки страницы.

Нашел вот такой вариант реализации:
$(document).ready(function(){
//ajax Login
$("#login_form").bind("submit", function() {

        //clear
        $(".auth_error").text("");
        
        if ($("#login").val().length < 1 || $("#password").val().length < 1) {
          $(".auth_error").text("Для авторизации введите логин и пароль");
          return false;
        }
        
        //show preloader

        $.ajax({
                type    : "POST",
                cache   : false,
                url             : "[[~[[*id]]]]",
                data    : $(this).serializeArray(),
                success: function(data) {
                        var errMessage = $(data).find(".auth_error").text();
                        if(errMessage == ""){
                                window.location = "[[~[[*id]]]]";
                        }else{
                                $(".auth_error").text(errMessage);
                        }
                }
        });

        return false;
	});
});
Но в данном случае ответ от сниппета login не приходит, страница всегда перезагружается. Может быть необходимо произвести изменения в сниппете login чтобы он выдавал ajax ответ?

Подскажите, может быть возможно использовать для проверки данных формы сниппет ajaxform?
Михаил Чеков
Михаил Чеков
19 июня 2014, 15:10
modx.pro
7
5 909
0

Комментарии: 19

Володя
Володя
19 июня 2014, 22:10
0
У Василия есть прекрасный компонент — AjaxForm
Скачайте его, разберитесь как работает и пишите что угодно…
p.s. Не сразу заметил… да именно его и используйте)
    Михаил Чеков
    Михаил Чеков
    21 июня 2014, 22:13
    0
    Спасибо Вам за ответ!
    Только вот не получилось у меня настроить форму со сниппетом login.
    С помощью просто стандартного вызова
    [[!AjaxSubmit?
	&snippet=`Login`
	&form=`Myform`
]]
    сразу не работает в данном случае.
    Правильно ли я понял что как-то в форму надо вернуть json массив с ключами ответа от сниппета, точно не нашел из какого метода его возвращать и куда, вероятно в логине из login/controllers/web/Login.php из метода public function prepareFailureMessage?
    А переменная с классом $AjaxForm сразу доступна во всех сниппетах, или как-то вызывать необходимо ее?
      Сергей Шлоков
      Сергей Шлоков
      22 июня 2014, 13:45
      0
      Но в данном случае ответ от сниппета login не приходит, страница всегда перезагружается.
      Откуда такой вывод, что нет ответа от сниппета? Что возвращает errMessage?
      Что такое .auth_error? Чанк в студию.
      Причин может быть очень много, а информации очень мало.
      А с преХуками пробовал?
        Михаил Чеков
        Михаил Чеков
        22 июня 2014, 17:20
        0
        Здравствуйте! Сразу скажу что мои познания в modx пока не очень высоки как и в программирование, но разобраться очень хотелось бы. Поидее в errMessage должен приходить какой либо ответ от сниппета в случае ошибки ввода данных, там так же есть div с классом auth_error, куда этот ответ должен помещаться (страница при этом не должна перезагружаться).
        Вероятно в этом js коде не так настроено получение ошибок от сниппета.
        Ответ от сниппета я искал в журнале ошибок в error log modx, который доступен из консоли. Скажите может быть ошибки еще куда либо сохраняются?
        Нет с прехуками не пробовал, а как их можно использовать в данном случае?
          Сергей Шлоков
          Сергей Шлоков
          22 июня 2014, 22:00
          0
          Сложно понять, когда приходится гадать. Покажи чанк Login или дай ссылку на страничку. В стандартном чанке Login нет такого div с классом auth_error.
            Михаил Чеков
            Михаил Чеков
            22 июня 2014, 22:38
            0 
            <form id="login_form" action="[[~[[*id]]]]" method="post">
            <fieldset class="loginLoginFieldset">
                <legend class="loginLegend">[[+actionMsg]]</legend>
                <label class="loginUsernameLabel">[[%login.username]]
                    <input id="login" class="loginUsername" type="text" name="username" />
                </label>
                 
                <label class="loginPasswordLabel">[[%login.password]]
                    <input id="password" class="loginPassword" type="password" name="password" />
                </label>
                <input class="returnUrl" type="hidden" name="returnUrl" value="[[+request_uri]]" />
 
                [[+login.recaptcha_html]]
                 
                <input class="loginLoginValue" type="hidden" name="service" value="login" />
                <span class="loginLoginButton"><input type="submit" name="Login" value="[[+actionMsg]]" /></span>
            </fieldset>
        </form>
[[!+errors]] <div class="auth_error"></div>
            Я добавил этот div для вывода текста ошибки в него, а так чанк особо без изменений. Без моего ajax все работает хорошо)
              Сергей Шлоков
              Сергей Шлоков
              23 июня 2014, 08:34
              0
              Так ты ловишь сообщение об ошибке в auth_error
              var errMessage = $(data).find(".auth_error").text();
              а ошибки [[!+errors]] у тебя пишутся снаружи этого дива
              [[!+errors]] <div class="auth_error"></div>
                Михаил Чеков
                Михаил Чеков
                24 июня 2014, 01:17
                0
                Сергей, спасибо за помощь, но не помогло, разместил плейсхолдер вот так 
                <div class="auth_error">[[!+errors]]</div>
                . Все таки ответ не приходит почему то от сервера, без перезагрузки страницы.
                Отследил по отладчику в firefox. Пишет 301 ошибку. Ума не приложу что с этим делать(

                Еще какая то ошибка стала появляться врядли к этому относится, но на всякий случай напишу ("[2014-06-23 23:11:20] (ERROR @ /index.php) Could not load class: pdofetch from pdotools.pdofetch.")
                  Сергей Шлоков
                  Сергей Шлоков
                  24 июня 2014, 08:42
                  0
                  А что приходит от сервера?
                  В Firefox это можно увидеть в инструментах в закладке «Сеть». Кликаешь на запрос POST и справа в окошке выбираешь закладку «Ответ».
                  Это если запрос POST отправлен на сервер. Если в закладке Сеть нет строчки с POST запросом, значит он не отправляется на сервер или страничка обновилась. Надо закомментировать строчку
                  window.location = "[[~[[*id]]]]";
                  Еще какая то ошибка стала появляться врядли к этому относится, но на всякий случай напишу ("[2014-06-23 23:11:20] (ERROR @ /index.php) Could not load class: pdofetch from pdotools.pdofetch.")
                  Это ошибка pdotools. На логин не влияет.
                    Михаил Чеков
                    Михаил Чеков
                    25 июня 2014, 00:14
                    0
                    Строчку закоментил. Во вкладке сеть сам Post запрос есть, он отправляется, но когда в него заходишь во вкладке ответ пусто, высвечивает 301 ошибку. А когда страница перезагружается, то там с ним уже все в порядке, Post есть с ним все ок (200 ошибка).
                      Михаил Чеков
                      Михаил Чеков
                      25 июня 2014, 00:44
                      0
                      Сергей, спасибо за помощь! После долгого испытания этим ajax, все получилось в итоге! )))
                      Косяк был в этой строке 
                      url             : "[[~[[*id]]]]",
                      Подставлялся запрос на такую страницу
                      site/[[~[[*id]]]]
                      я заменил на 
                      url             : "#",
                      Все заработало чудесным образом))
                        Сергей Шлоков
                        Сергей Шлоков
                        25 июня 2014, 09:02
                        0
                        Действительно чудo. Потому что непонятно, почему это заработало.
                        В строчке с url скорее всего нужно было так писать
                        url: "[[~[[*id]]? &scheme=`full`]]"
                        или так
                        url: document.location.href
                        Михаил Чеков
                        Михаил Чеков
                        25 июня 2014, 12:51
                        0
                        Хм, затестил, эти 2 варианта тоже у меня не работают, удалось отследить в chrome из вкладки network, заголовки запроса уходят такие 
                        Request URL:http://site/[[~[[*id]]?%20&scheme=`full`]]
                        вероятно должно как то преобразовываться раньше.
                        а что обозначает эта запись 
                        ? &scheme=`full`
                        ?
                        Сергей Шлоков
                        Сергей Шлоков
                        25 июня 2014, 15:44
                        0
                        У тебя почему-то не парсится плейсхолдер id. Поэтому и POST не проходит (идет переадресация 301 на страницу 404, по-умолчанию, это страница с id=1). Честно говоря, не знаю почему не подставляется.
                        А скрипт с $.ajax где у тебя находится — в чанке, в шаблоне, в ресурсе?
                        А если указать адрес напрямую?
                        url: "http://site/твоя_страничка.html"
(Если включен ЧПУ)
                        P.S. При ? &scheme=`full` адрес парсится в полный формат с протоколом и именем сайта, а не в относительный. Но для ЧПУ должен быть указан
                        <base href="[[++site_url]]" />
                        В принципе все работает. Так и пусть работает.
                        Михаил Чеков
                        Михаил Чеков
                        25 июня 2014, 16:25
                        0
                        Скрипт лежит в папке сайта с js файлами, подключен через тег script в head у сайта. Может быть потому и не парсится?
                        Напрямую указал адресс в url, интересный момент что 200 все ок, но информация не распечатывается в [[!+errors]]. Ну работает как то и хорошо)
                        Сергей Шлоков
                        Сергей Шлоков
                        25 июня 2014, 17:55
                        +1
                        Скрипт лежит в папке сайта с js файлами, подключен через тег script в head у сайта. Может быть потому и не парсится?
                        Да уж. Ищем под столбом, потому что там светлее.
                        Перенеси его в шаблон и все будет работать как положено.
                        P.S. Потратил 10 минут, взял твой скрипт и чанк. Все работает.
                        Михаил Чеков
                        Михаил Чеков
                        25 июня 2014, 18:38
                        0
                        Ясно, Спасибо, буду знать что из за расположения скриптов может что-то не работать.
    Василий Наумкин
    Василий Наумкин
    24 июня 2014, 05:58
    0
    Если что — платный компонент Office и авторизовывает, и редактирует профиль через ajax. Сегодня последний день скидки 30%.

    store.simpledream.ru/office
      Михаил Чеков
      Михаил Чеков
      25 июня 2014, 00:27
      0
      Василий, спасибо за предложение! Купить еще успею, интереснее самому разобраться)
      Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
      19