В наше время, когда jQuery не используют только самые завзятые ретрограды, я чувствую себя самым завзятым ретроградом. Не сказать, что я не знаю jQuery и никогда не использую его. Использую, но как-то фрагментарно, не в должной мере и без должного понимания. Хотя, на самом деле, всё это довольно просто. Нужно просто брать и использовать, и как можно чаще.
Надеюсь эта шпаргалка поможет мне. Тем более тут описаны вещи которые должны использоваться практически в любом уважающем проекте:
- подсветка текущего поля
- валидация javascript (пока без ajax)
- простейший ajax
Эти примеры я наглым образом подсмотрел и заимствовал из инсталлятора PyroCMS.
Итак, начнём
Подсветка текущего поля
==============================
Делаем форму, поля которой формируем в ненумерованный список например. И вставляем такой jQuery-код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | $(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’, в который будем выводить результат проверки.
1 2 3 4 5 6 7 8 9 10 11 12 | $('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('<b>Пароли совпадают.</b>').removeClass('failure').addClass('success'); } else { $('#confirm_pass').html('<b>Пароли не совпадают.</b>').removeClass('success').addClass('failure'); } }); |
Ajax
===========================
Оказывается простое и элегантное решение на jQuery. Допустим стоит задача проверки правильности введённого пароля от БД (пример взят из инсталлятора PyroCMS)
На страницей с формой пишем примерно такой код
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | $('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
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 | 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 молча переставал работать 
Вот такие путанные мысли у меня в субботу утром. =)
Посты по теме:
RSS-подписка