Шпаргалка jQuery. Подсветка, валидация, Ajax.

Скорый наш вперед летит... В наше время, когда jQuery не используют только самые завзятые ретрограды, я чувствую себя самым завзятым ретроградом. Не сказать, что я не знаю jQuery и никогда не использую его. Использую, но как-то фрагментарно, не в должной мере и без должного понимания. Хотя, на самом деле, всё это довольно просто. Нужно просто брать и использовать, и как можно чаще.

Надеюсь эта шпаргалка поможет мне. Тем более тут описаны вещи которые должны использоваться практически в любом уважающем проекте:

  • подсветка текущего поля
  • валидация javascript (пока без ajax)
  • простейший ajax

Эти примеры я наглым образом подсмотрел и заимствовал из инсталлятора PyroCMS.
Итак, начнём

Подсветка текущего поля
==============================
Делаем форму, поля которой формируем в ненумерованный список например. И вставляем такой jQuery-код:

$(document).ready(function() {
   
    // Highlight current step in header
    $('#current').closest('li').addClass('current');
   
    // Add that cool orange bkg to the input that has focus
    $('input, select').bind({
        focusin: function() {
            var wrapper = $(this).closest('.input');
            $(wrapper).addClass('focus');
        },
        focusout: function() {
            var wrapper = $(this).closest('.input');
            $(wrapper).removeClass('focus');
        }
    });
}

Вот собственно и всё. Осталось разрисовать стили current и focus как душе угодно.

Валидация Javascript
================================
Речь идёт о простейшей валидации, которую можно провести до отправки формы. Например проверить заполнение обязательных полей, или совпадение дважды введённого пароля.

Допустим у нас есть форма в которой два поля user_confirm_password и user_password. Кроме того есть блок id=’confirm_pass’, в который будем выводить результат проверки.

    $('input[name=user_confirm_password]').bind('keyup focus', function() {
     
      password                = $('input[name=user_password]').val();
      password_confirmation   = $(this).val();
     
      if (password == password_confirmation) {
          $('#confirm_pass').html('Пароли совпадают.').removeClass('failure').addClass('success');
      } else {
          $('#confirm_pass').html('Пароли не совпадают.').removeClass('success').addClass('failure');
      }
     
  });

Ajax
===========================
Оказывается простое и элегантное решение на jQuery. Допустим стоит задача проверки правильности введённого пароля от БД (пример взят из инсталлятора PyroCMS)
На страницей с формой пишем примерно такой код

    $('input[name=password]').bind('keyup focus', function() {
     
        $.post(base_url + 'index.php/ajax/confirm_database', {
                server: $('input[name=hostname]').val(),
                username: $('input[name=username]').val(),
                password: $('input[name=password]').val()
            }, function(data) {
                if (data.success == 'true') {
                     $('#confirm_db').html(data.message).removeClass('failure').addClass('success');
                }
                else {
                    $('#confirm_db').html(data.message).removeClass('success').addClass('failure');
                }
            }, 'json'
        );
     
  });

Ajax будет вызывать скрипт на серверной стороне. В данном случае это метод confirm_database контроллера ajax. Речь идёт о CodeIgniter, хотя абсолютно аналогично можно работать с Kohana и просто отдельным скриптом.

А вот реализация функции ajax/confirm_database

    public function confirm_database()
   {

   $server     = $this->input->post('server');
   $username   = $this->input->post('username');
   $password   = $this->input->post('password');
   $port       = $this->input->post('port');

   $host = $server . ':' . $port;

   $link = @mysql_connect($host, $username, $password, TRUE);

   if ( ! $link )
   {
       $data['success'] = 'false';
       $data['message'] = lang('db_failure').mysql_error();
   }
   else
   {
       $data['success'] = 'true';
       $data['message'] = lang('db_success');
   }
   
   // Set some headers for our JSON
   header('Cache-Control: no-cache, must-revalidate');
   header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
   header('Content-type: application/json');
   
   echo json_encode($data);

   }

Всё до чёртиков просто. Если сравнивать этот способ с Xajax, который я практиковал раньше, то это значительно лучше. Хотя бы тем что прозрачнее.

Например Xajax делал POST запрос на тот же URL, на котором находилась форма. Любопытно, правда? Ну а мудрый контроллер сам определял, что идёт xajax запрос и подставлял уже нужное действие. И всё работало. Только не дай бог попробовать кешировать эту функцию. Тогда Xajax молча переставал работать :)

Вот такие путанные мысли у меня в субботу утром. =)