AJAX проверка логина при регистрации
рейтинг: 8.5/10, голосов: 2
Для того чтобы сделать AJAX проверку понадобиться серверная часть PHP и клиентская JavaScript. Файлы ядра Joomla при этом затрагиваться не будут. Данный пример рассматривается на стандартном шаблоне Beez 2.0, поэтому он может не работать на других шаблонах. Но суть останется та же.
Серверная часть
Для проверки существования логина пользователя нужно делать запрос в БД. Для этого можно использовать свой контроллер. Так как этот пример будет рассматривать стандартную регистрацию, соответственно контроллер должен быть в компоненте «com_users». Создадим файл со следующим содержанием:
<?php
defined('_JEXEC') or die;
jimport('joomla.application.component.controller');
/**
* Класс для AJAX проверок
*
* @package Joomla.Site
* @subpackage com_users
* @since 1.7
*/
class UsersControllerCheck extends JController
{
/**
* Метод проверки имени пользователя
*/
public function name()
{
// проверка значения сессии
JRequest::checkToken('get') or jexit(JText::_('JINVALID_TOKEN'));
$name = JRequest::getVar('name', null, 'GET');
if ($name) {
$db = JFactory::getDbo();
$query = $db->getQuery(true);
$query->select('id');
$query->from('#__users');
$query->where('username = '. $db->quote($name));
$db->setQuery($query);
if ($db->loadResult()) {
die('логин занят');
} else {
die('логин свободен');
}
}
}
}
В этом файле собственно и будет происходить проверка логина пользователя. На вход должны поступать две переменные — имя пользователя и значение сессии. Остается написать клиентскую часть, которая будет отправлять эти данные.
Клиентская часть
В данном примере будет рассмотрен пример на mootools. Переопределите макет регистрации «components/com_users/views/registration/tmpl/default.php» в шаблоне и добавьте в него следующий JavaScript:
<script type="text/javascript">
<!--
window.addEvent("domready", function(){
document.id("jform_username").addEvent("blur", function(){
//проверка на корректность заполнения поля
//стандартная валидация добавляет class invalid,
//если поле заполнено неправильно.
var regex=/invalid/g;
if (regex.test(this.get('class')) || this.value.length < 2) return;
//получаем значение сессии из формы
//Элемент с именем сессии
//В данном случае это будет последний input в div-e
var form = this.getParent('form');
var inputs = form.getChildren('div input');
var s = inputs[inputs.length-1].name;
//удаляем элемент если установлен
if(this.getNext('span')) this.getNext('span').destroy();
//создаем новый элемент
var myElement = new Element('span', {'style':'margin-left:10px'});
myElement.inject(this, 'after');
//создаем AJAX запрос
var myRequest = new Request({
url: 'index.php?option=com_users&task=check.name&format=raw',
method: 'get',
onRequest: function(){
myElement.set('text', 'проверка логина');
myElement.addClass('ajax-loader');
},
onSuccess: function(responseText){
myElement.removeClass('ajax-loader');
myElement.set('text', responseText);
if (responseText == 'логин занят') {
myElement.getPrevious('input').addClass('invalid');
}
},
onFailure: function(){
myElement.set('text', 'Запрос не удался');
}
});
//посылаем запрос с данными
myRequest.send('name='+this.value+'&'+s+'=1')
})
})
//-->
</script>
Для «прелооадера» AJAX, загрузите какую-нибудь картинку в директорию «images» в шаблоне, например «ajax-loader.gif». И добавьте в свой файл стилей CSS, примерно следующие строки:
.ajax-loader {background:url(../images/ajax-loader.gif) no-repeat left;padding-left:20px;}
По желанию, этот пример можно подкорректировать под свои нужды шаблона, путем небольшой правки JS и CSS.
После этих манипуляций при регистрации пользователя, в форме регистрации должны добавиться изменения. А именно, после того как фокус уйдет с поля «Логин» в форме, данное поле не будет пустым и будет соответствовать требованиям стандартной JS проверки. Рядом с этим полем появиться новый элемент «span». В котором будет отображаться результат проверки логина пользователя.
Кинулся попробовать, но с ходу не получилось. Можно по подробнее описать действия?