Ноя 21

AJAX проверка для формы регистрации для Joomla 1.7

JavaScript, Joomla, Главная, Хаки Комментировать
1074
Рейтинг
Thanks!
An error occurred!

AJAX проверка для формы регистрации для Joomla 1.7
Рассмотрим один из примеров использования AJAX технологий с использованием стандартного Mootools 1.3, встроенного в Joomla 1.7, на примере формы регистрации — на лету при вводе проверить, свободны ли имя пользователя и email.

Для Joomla 1.5 коллега SmokerMan уже приводил пример, но нам он не подходит по причине другой версии mootools и мы хотим чуть расширить возможности (по этой же причине ни в коем случае (irony) не читайте эту статью http://docs.joomla.org/Ajax_using_MooTools, поскольку авторы сами предупреждают «This article applies to Joomla! 1.5 only as Joomla! 1.6 ships with a later version of MooTools which has a different way of handling Ajax requests.»)

Посмотреть в работе можно здесь — http://beliyadm.rcoi.net/joomla17demo/index.php/using-joomla/extensions/components/users-component/registration-form
Тестовые логины — admin, test
Тестовый email — test@mail.ru

1 — Шаг первый, дополняем форму регистрации

Итак мы имеем стандартную форму регистрации движка версии 1.7.х. Нам потребуется файл templates/шаблон/html/com_users/registration/default.php (либо же его исходник components/com_users/views/registration/tmpl/default.php).

В самом начале находим строки

1
2
3

JHtml::_('behavior.keepalive');
JHtml::_('behavior.tooltip');
JHtml::_('behavior.formvalidation');

и после них добавляем после закрытия php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

<script type="text/javascript">
  window.addEvent('domready', function() {
    //Проверяем на лету поле с username (после ввода 3 символов)
    var username = $('jform_username'); //где jform_username это ID поля
        var log = new Element('span').injectAfter(username);
        log.set('class', 'ajaxstatus');
    username.addEvents({
      'keyup': function() {
        if   (username.value.length > 3) { //устанавливаем с какого символа начинать проверку, в данном случае в 4
        log.highlight('#fff'); //подсветим на время обработки
        log.set('html', 'проверка...');
        log.highlight('#ffe400');
        var usernameA = username.get('value'); //получем новое значение поля
        var url = 'index.php?option=com_users&task=AjaxCheckUsername&format=row&username='+(usernameA);
                var req = new Request({
            method: 'post',
            url: url,
            onComplete: function(response) {
            if (response == 1) {
              log.set('html','Логин занят');
              log.set('class','checkinvalid');
            } else {
              log.set('html','Логин свободен');
              log.set('class','checkvalid');
            }
            }
          }).send();
      } else {
        log.set('html', '')
      };
      }
    });
 
 
    //Проверяем на лету поле с email (после ввода @)
    var email = $('jform_email1'); //где jform_username это ID поля
        var log2 = new Element('span').injectAfter(email);
        log2.set('class', 'ajaxstatus');
    email.addEvents({
      'keyup': function() {
        var emailA = email.get('value'); //получем новое значение поля
        var dogtrue = emailA.test('@');
        if (dogtrue) {
          log2.highlight('#fff'); //подсветим на время обработки
          log2.set('html', 'проверка...');
          log2.highlight('#ffe400');
          var url = 'index.php?option=com_users&task=AjaxCheckEmail&format=row&email='+(emailA);
                  var req = new Request({
              method: 'post',
              url: url,
              onComplete: function(response) {
              if (response == 1) {
                log2.set('html','Email занят');
                log2.set('class','checkinvalid');
              } else {
                log2.set('html','Email свободен');
                log2.set('class','checkvalid');
              }
              }
            }).send();
      } else {
        log2.set('html', '')
      };
      }
    });
 
  });</script>

2 Шаг второй — обработка

Файл components/com_users/controller.php
В самом конце добавляем две новые функции

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

  function AjaxCheckUsername()
  {
    $str = JRequest::getVar('username');
    $db    =& JFactory::getDBO();
    $query = 'SELECT id FROM #__users WHERE LOWER( username ) = '.$db->quote($db->getEscaped($str), true);
    $db->setQuery( $query );
    $result = $db->loadResult();
    $result ? $result = 1 : $result = 0;
    echo $result;
    $result = '';
  }
  function AjaxCheckEmail()
  {
    $str = JRequest::getVar('email');
    $db    =& JFactory::getDBO();
    $query = 'SELECT id FROM #__users WHERE LOWER( email ) = '.$db->quote($db->getEscaped($str), true);
    $db->setQuery( $query );
    $result = $db->loadResult();
    $result ? $result = 1 : $result = 0;
    echo $result;
  }

3 Шаг третий — облагородим внешний вид CSS

1
2
3
4

#member-registration span.ajaxstatus {visibility:none;}
#member-registration span.ajaxstatus, #member-registration .checkinvalid, #member-registration .checkvalid {margin: 0px 0px 0px 20px; padding: 2px;}
#member-registration .checkinvalid {color: #fc0909;}
#member-registration .checkvalid {color: #3da157;}

Скриншот, как выглядит

AJAX проверка для формы регистрации для Joomla 1.7

Немного комментариев:

1 — в строках JS

1
2
3

var username = $('jform_username');
....
var email = $('jform_email1');

Самое главное правильно определить ID поля формы с именем и адресом соответственно.

2 — Далее мы начинаем отлавливать вводимые символы, если их более 3 (либо же встретился символ @) — получаем текущее значение в поле, введенное пользователю, и отправляем на обработку
в компонент в гости к добавленным двум функциям.

3 — получив ответ (я в примере, не мудрствуя лукаво, сделал ответ в виде 1 0) пишется в response и от него уже происходит обновление спана ajaxstatus на новый класс и новое содержимое. И немного добавил анимации, пока происходит обработка данных этот спан с текстом «проверка» закрашивается цветом

1
2
3
4

 
log.highlight('#fff');
log.set('html', 'проверка...');
log.highlight('#ffe400');

На этом все, используя этот нехитрый пример, статью работы в предыдущей версии и документацию по Mootools можно самостоятельно внедрять любой интерактивный функционал самостоятельно.

3 комм. на “AJAX проверка для формы регистрации для Joomla 1.7”

  1. Yazov говорит:
    Январь 30th, 2012 at 07:34

    В 2.5 почему то не работает =(
    Все сделал по примеру, единственное — не менял id мыла и логина. Они вроде подходят…

    Reply

    Beliyadm Reply:
    Январь 30th, 2012 at 10:12

    Для 2.5 постараюсь сегодня глянуть, возможно там что изменилось

    Reply

    Yazov Reply:
    Январь 30th, 2012 at 10:14

    буду благодарен!

    Reply

Оставить коммент

Design by:FoxTheme & Photoshop Brushes
Site RSS Comments RSS