AjaxForm и Login
Здравствуйте, неоднократно задавался вопрос «Можно ли прикрутить AjaxFrom к сниппетам Login?»
Но ответа нигде не нашел. Есть ли решение данного вопроса?
Но ответа нигде не нашел. Есть ли решение данного вопроса?
Комментарии: 13
Есть компонент Василия office
Там вроде через аякс авторизация
Там вроде через аякс авторизация
Помогу с решением.
Вызываем сниппет Login:
Чанк формы для авторизации fastLoginTpl:
Чанк для вывода ошибки fastLoginError:
Скрипт js, обрабатывающий событие отправки формы (нужен подключенный jquery):
— я еще подключил плагин jgrowl для отправления алертов. В его же вызове group: «m-Error» — класс для всплывающего бокса (красный, с ошибкой).
Если jgrowl не нужен — то вместо него вставляем в поле для ошибок желаемый ответ. Пример:
#ajaxAuth .ajaxLoad — в моем примере форма с индикатором загрузки, которая появляется при обработке аякс-запроса.
Вызываем сниппет Login:
[[!Login? &loginTpl=`fastLoginTpl` &errTpl=`fastLoginError`]]
Чанк формы для авторизации fastLoginTpl:
<div style="display: none;" id="authErrors">[[+errors]]</div>
<form class="loginForm" id="iWannaLogin" action="[[~[[*id]]]]" method="post">
<div class="login">
<input id="loginForm" name="username" class="roundInput" type="text" placeholder="Логин" title="Ваш логин">
</div>
<div class="password">
<input id="passwordForm" name="password" class="roundInput" type="password" placeholder="Пароль" title="Ваш пароль">
</div>
<input class="returnUrl" type="hidden" name="returnUrl" value="[[+request_uri]]" />
<input class="loginLoginValue" type="hidden" name="service" value="login" />
<div class="submit">
<a rel="nofollow" href="[[~17]]">Я - тупой, забыл пароль..</a>
<input id="ajaxLoginButton" type="submit" name="Login" value="Войти" />
</div>
</form>
Чанк для вывода ошибки fastLoginError:
[[+msg]]
Скрипт js, обрабатывающий событие отправки формы (нужен подключенный jquery):
<script type="text/javascript">
$(document).ready(function(){
$("#iWannaLogin").bind("submit", function() {
$("#authErrors").text("");
//здесь можно допилить подсветку полей с ошибкой
if ($("#loginForm").val().length < 1 && $("#passwordForm").val().length < 1) {
$.jGrowl("Введите логин и пароль", {group: "m-Error"});
return false;
}
if ($("#loginForm").val().length < 1) {
$.jGrowl("Введите логин", {group: "m-Error"});
return false;
}
if ($("#passwordForm").val().length < 1) {
$.jGrowl("Введите пароль", {group: "m-Error"});
return false;
}
$.ajax({
type: "POST",
cache: false,
url: "[[~[[*id]]]]",
data: $(this).serializeArray(),
beforeSend: function(){
$("#ajaxAuth .closeBlock").css("display", "none");
$("#ajaxAuth .ajaxLoad").css("display", "block");
$("#ajaxLoginButton").prop("disabled", true);
},
success: function(data) {
$("#ajaxAuth .closeBlock").css("display", "block");
$("#ajaxAuth .ajaxLoad").css("display", "none");
var errMessage = $(data).find("#authErrors").text();
if(errMessage == ""){
window.location = "адрес для переадресации при успешной авторизации";
}
else{
$("#authErrors").text(errMessage);
$.jGrowl($("#authErrors").text(), {group: "m-Error"});
}
},
complete: function(){
$("#ajaxLoginButton").prop("disabled", false);
}
});
return false;
});
});
</script>
— я еще подключил плагин jgrowl для отправления алертов. В его же вызове group: «m-Error» — класс для всплывающего бокса (красный, с ошибкой).
Если jgrowl не нужен — то вместо него вставляем в поле для ошибок желаемый ответ. Пример:
$("#authErrors").text("текст ошибки").css("display", "block");
#ajaxAuth .ajaxLoad — в моем примере форма с индикатором загрузки, которая появляется при обработке аякс-запроса.
Спасибо большое!
Спасибо. Работает, но не совсем, как хотелось. при регистрации происходит редирект на страницу, а можно, чтобы просто блок перегрузился и все. Понятно что можно заменить window.location на .html()/ Только как туда передать чанк?
Не нашли вариант авторизации без перезагрузки страницы?
Для вообще ленивых :), авторизация Login по ajax:
Вызов:
[[!Login? &loginTpl=`lgnLoginTpl` &logoutTpl=`lgnLogoutTpl` &errTpl=`lgnErrTpl` &loginResourceId=`52` &logoutResourceId=`[[*id]]`]]
Форма:
<div class="loginForm">
<div class="loginLogin">
<div class="loginMessage">[[!+errors]]</div>
<form class="loginLoginForm auth" action="[[~[[*id]]]]" method="post">
<fieldset class="loginLoginFieldset">
<label class="loginUsernameLabel" for="login">[[%login.username]]</label>
<input class="loginUsername put-focus" type="text" name="username" id="login">
<span class="error error-login"></span>
<label class="loginPasswordLabel" for="pass">[[%login.password]]</label>
<input class="loginPassword" type="password" name="password" id="pass">
<span class="error error-password"></span>
<input class="loginRememberme" type="checkbox" name="rememberme" id="checkbox-1" checked>
<label class="loginRemembermeLabel new-check" for="checkbox-1">Запомнить меня</label>
<input class="loginLoginValue" type="hidden" name="service" value="login">
<input type="submit" name="Login" value="[[+actionMsg]]">
<input class="returnUrl" type="hidden" name="returnUrl" value="[[+request_uri]]">
</fieldset>
<div class="text-center">
<a class="forgot-login" href="[[~45]]">Забыли логин или пароль?</a>
</div>
</form>
</div>
</div>
Скрипт:
<script>
$(document).ready(function(){
$(".auth").bind("submit", function() {
$("span.error, .loginMessage").text("");
$("input.error, textarea.error").removeClass('error');
if ($(".loginUsername").val().length < 1 && $(".loginPassword").val().length < 1) {
$(".error-login").text("Для входа введите Ваш логин");
$(".error-password").text("Для входа введите Ваш пароль");
$('.loginUsername, .loginPassword').addClass('error');
return false;
}
if ($(".loginUsername").val().length < 1) {
$(".error-login").text("Для входа введите Ваш логин");
$('.loginUsername').addClass('error');
return false;
}
if ($(".loginPassword").val().length < 1) {
$(".error-password").text("Для входа введите Ваш пароль");
$('.loginPassword').addClass('error');
return false;
}
$.ajax({
type : "POST",
cache : false,
url : "[[~[[*id]]]]",
data : $(this).serializeArray(),
success: function(data) {
var errMessage = $(data).find(".loginMessage").text();
if(errMessage == ""){
window.location = "[[~[[*id]]]]";
}else{
$(".error-login").text('Неправильный логин или пароль');
$('.loginUsername, .loginPassword').addClass('error');
}
}
});
return false;
});
});
</script>
Скрипт можно вынести в отдельный файл. Если не указывать параметр url в $.ajax, функция автоматически отправит запрос на текущую страницу
У меня работает такой вариант:
window.location = "[[~[[*id]]]]";
Можно также переназначить на любой документ:
window.location = "[[~85]]";
window.location = "[[~[[*id]]]]";
Можно также переназначить на любой документ:
window.location = "[[~85]]";
Спасибо за пример кода. Все работает.
Можете подсказать как сделать обновление данных через UpdateProfile + ajax.
Заранее благодарен за любую помощь.
Можете подсказать как сделать обновление данных через UpdateProfile + ajax.
Заранее благодарен за любую помощь.
AjaxForm + Register
modx.pro/help/19551
modx.pro/help/19551
Не подскажете, как сделать обновление профиля и изменение пароля по Ajax, сниппеты UpdateProfile и ChangePassword, подобным образом?
Есть недавно созданный замечательный компонент AjaxFormitLogin
{'!AjaxFormitLogin' | snippet : [
'form' => 'updateProfileForm',
'snippet' => 'FormIt',
'hooks' => 'AjaxIdentification',
'method' => 'update',
'successMessage' => 'Данные сохранены.',
'clearFieldsOnSuccess' => 0,
'-spamProtection' => 1
'validate' => 'email:required:email',
'validationErrorMessage' => 'Исправьте, пожалуйста, ошибки!',
'email.vTextRequired' => 'Укажите email.'
]}
Спасибо
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.