|
|
Интересные статьи
|
|
|
|
|
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.") 1 - Шаг первый, дополняем форму регистрации
Итак мы имеем стандартную форму регистрации движка версии 1.7.х. Нам потребуется файл templatesшаблонhtmlcom_usersregistrationdefault.php (либо же его исходник componentscom_usersviewsregistrationtmpldefault.php).
В самом начале находим строки 1. JHtml::_('behavior.keepalive'); 2. JHtml::_('behavior.tooltip'); 3. JHtml::_('behavior.formvalidation');
и после них добавляем 01. window.addEvent('domready', function() { 02. //Проверяем на лету поле с username (после ввода 3 символов) 03. var username = $('jform_username'); //где jform_username это ID поля 04. var log = new Element('span').injectAfter(username); 05. log.set('class', 'ajaxstatus'); 06. username.addEvents({ 07. 'keyup': function() { 08. if (username.value.length > 3) { //устанавливаем с какого символа начинать проверку, в данном случае в 4 09. log.highlight('#fff'); //подсветим на время обработки 10. log.set('html', 'проверка...'); 11. log.highlight('#ffe400'); 12. var usernameA = username.get('value'); //получем новое значение поля 13. var url = 'index.php?option=com_users&task=AjaxCheckUsername&format=row&username='+(usernameA); 14. var req = new Request({ 15. method: 'post', 16. url: url, 17. onComplete: function(response) { 18. if (response == 1) { 19. log.set('html','Логин занят'); 20. log.set('class','checkinvalid'); 21. } else { 22. log.set('html','Логин свободен'); 23. log.set('class','checkvalid'); 24. } 25. } 26. }).send(); 27. } else { 28. log.set('html', '') 29. }; 30. } 31. }); 32. 33. 34. //Проверяем на лету поле с email (после ввода @) 35. var email = $('jform_email1'); //где jform_username это ID поля 36. var log2 = new Element('span').injectAfter(email); 37. log2.set('class', 'ajaxstatus'); 38. email.addEvents({ 39. 'keyup': function() { 40. var emailA = email.get('value'); //получем новое значение поля 41. var dogtrue = emailA.test('@'); 42. if (dogtrue) { 43. log2.highlight('#fff'); //подсветим на время обработки 44. log2.set('html', 'проверка...'); 45. log2.highlight('#ffe400'); 46. var url = 'index.php?option=com_users&task=AjaxCheckEmail&format=row&email='+(emailA); 47. var req = new Request({ 48. method: 'post', 49. url: url, 50. onComplete: function(response) { 51. if (response == 1) { 52. log2.set('html','Email занят'); 53. log2.set('class','checkinvalid'); 54. } else { 55. log2.set('html','Email свободен'); 56. log2.set('class','checkvalid'); 57. } 58. } 59. }).send(); 60. } else { 61. log2.set('html', '') 62. }; 63. } 64. }); 65. 66. }); 2 Шаг второй - обработка
Файл componentscom_userscontroller.php В самом конце добавляем две новые функции 01. function AjaxCheckUsername() 02. { 03. $str = JRequest::getVar('username'); 04. $db =& JFactory::getDBO(); 05. $query = 'SELECT id FROM #__users WHERE LOWER( username ) = '.$db->quote($db->getEscaped($str), true); 06. $db->setQuery( $query ); 07. $result = $db->loadResult(); 08. $result ? $result = 1 : $result = 0; 09. echo $result; 10. $result = ''; 11. } 12. function AjaxCheckEmail() 13. { 14. $str = JRequest::getVar('email'); 15. $db =& JFactory::getDBO(); 16. $query = 'SELECT id FROM #__users WHERE LOWER( email ) = '.$db->quote($db->getEscaped($str), true); 17. $db->setQuery( $query ); 18. $result = $db->loadResult(); 19. $result ? $result = 1 : $result = 0; 20. echo $result; 21. } 3 Шаг третий - облагородим внешний вид CSS 1. #member-registration span.ajaxstatus {visibility:none;} 2. #member-registration span.ajaxstatus, #member-registration .checkinvalid, #member-registration .checkvalid {margin: 0px 0px 0px 20px; padding: 2px;} 3. #member-registration .checkinvalid {color: #fc0909;} 4. #member-registration .checkvalid {color: #3da157;} Скриншот, как выглядит Немного комментариев:
1 - в строках JS 1. var username = $('jform_username'); 2. .... 3. var email = $('jform_email1'); Самое главное правильно определить ID поля формы с именем и адресом соответственно.
2 - Далее мы начинаем отлавливать вводимые символы, если их более 3 (либо же встретился символ @) - получаем текущее значение в поле, введенное пользователю, и отправляем на обработку в компонент в гости к добавленным двум функциям.
3 - получив ответ (я в примере, не мудрствуя лукаво, сделал ответ в виде 1 0) пишется в response и от него уже происходит обновление спана ajaxstatus на новый класс и новое содержимое. И немного добавил анимации, пока происходит обработка данных этот спан с текстом "проверка" закрашивается цветом 1. log.highlight('#fff'); 2. log.set('html', 'проверка...'); 3. log.highlight('#ffe400');
На этом все, используя этот нехитрый пример, статью работы в предыдущей версии и документацию по Mootools можно самостоятельно внедрять любой интерактивный функционал самостоятельно. Источник: http://joomlablog.ru
|
|
|
5 способов для ускорения загрузки сайта на Joomla
Если вы обладаете достаточными навыками, то с помощью рук и напильника можно сократить подгружаемые скрипты до небольшого кол-ва необходимых скриптов, таким образом, избавив себя от последующей головной боли |
|
|
|
|