ajaxSubmit 1.0 - отправка ajax-запросом данных любой формы MODx

Часто хочется чтобы какая-то веб-форма отправлялась без перезагрузки страницы и при этом чтобы работала проверка заполнения полей и капчи. Ведь по сути в момент когда мы хотим отправить форму нам нужна только эта форма, а всё остальное обновлять нет никакого смысла, тем более, что на это тратится время. Да, можно сделать проверку заполнения полей на JavaScript, а для капчи тоже какие-то скрипты. Но кроме капчи есть другие данные, которые можно проверить только на сервере. Например занято ли имя пользователя, который хочет зарегистрироваться или правильно ли пользователь ввел логин и пароль при авторизации. Тут приходится для каждой такой формы писать отдельные дополнительные PHP- и JS-скрипты. А как было бы удобно, если бы при отправке формы, если поля заполнены не верно, обновлялась бы только эта форма и появлялась информация о проверке заполнения. А что мешает так сделать? Современные средства парсинга HTML на PHP позволяют делать это очень просто.

Идея плагина ajaxSubmit для MODx Evolution состоит в том, чтобы вырезать всё лишнее из содержимого страницы, оставляя только вывод нужного сниппета, при аякс-запросах. Т.е. если страница запрашивается через Ajax (XMLHttpRequest), то выводится только нужный участок HTML-кода. Всё это делается с помощью парсера HTML. В данном плагине используется Zend_Dom_Query.

В комплект ajaxSubmit входит также сниппет, с помощью которого можно быстро настроить отправку формы. Подробная инструкция по установке вложена в архив (ссылка ниже). Сниппет устанавливать не обязательно. Можно написать свою функцию на JavaScript на примере того, что выводит сниппет:

  1. <script type="text/javascript">
  2. <!--
  3. function as_setAction(){
  4.     jQuery("#feedbackForm form:first")
  5.     .unbind('submit')
  6.     .bind('submit',function(){
  7.         jQuery.ajax({
  8.           url: window.location.href,
  9.           type: "post",
  10.           data: jQuery(this).serialize()+"&ajax_submit=#feedbackForm",
  11.           dataType: 'html',
  12.           success: function(response){
  13.             if(response=='success' || response.length <= 0){
  14.                 jQuery("#feedbackForm").html("Спасибо! Ваше письмо отправлено.");
  15.             }else{
  16.                 jQuery("#feedbackForm").html(response);
  17.             }
  18.           }
  19.         });
  20.         return false;
  21.     });
  22. }
  23. jQuery(document).bind('ready',as_setAction);
  24. //-->
  25. </script>

Значения полей из формы отправляются через POST этой же странице, которая открыта в данный момент.


Параметры сниппета

  • id - идентификатор. Полезно, если сниппет вызывается несколько раз на одной странице.
  • noJQuery - Не загружать jQuery (1|0). По умолчанию выключено (0).
  • form - селектор (формат CSS) формы. Например: `div.content form`.
  • postSignal - имя элемента POST, по которому будет определяться, что нам нужен только отдельный участок HTML-кода, а не вся страница. По умолчанию `ajax_submit`.
  • container - селектор контейнера формы.
  • msgElem - селектор елемента в котором выводятся сообщения об ошибках заполнения полей.
  • msgMinLength - минимальная длина сообщения в msgElem. Если число символов меньше или ровно этому значению, то будет показано сообщение (succesMessage).
  • succesMessage - Сообщение, которое будет выведено после удачной отправке формы.

Callback JavaScript функции

as_reqStartCallback() - перед ajax-запросом.

as_reqCompletCallback() - после выволнения ajax-запроса.

as_successCallback() - после завершения отправки формы (нет сообщений проверки заполнения полей).

Если функции с этими именами созданы, они будут вызваны в соответствующий момент. При использовании параметра &id к названиям функций нужно добавить этот ID.


Примеры использования

  1. [[ajaxSubmit? &container=`#feedbackForm`]]

  2. <div id="feedbackForm">

  3. [!eForm? &vericode=`1`&formid=`feedbackForm`&tpl=`feedbackForm`&report=`feedbackReport`&subject=`Письмо с сайта`!]

  4. </div>
  1. [[ajaxSubmit? &container=`#loginForm`]]

  2.  
  3. <div id="loginForm">

  4.  
  5. [!WebLogin? &tpl=`weblogin`!]

  6.  
  7. </div>
  1. [[ajaxSubmit? &container=`#loginForm`]]

  2.  
  3. <div id="loginForm">

  4.  
  5. [!WebLogin? &tpl=`weblogin`!]

  6.  
  7. </div>
  1. [[ajaxSubmit? &form=`#feedbackForm`&msgElem=`div.error`&succesMessage=`Письмо успешно отправлено.`]]

  2.  
  3. [!eForm? &vericode=`1`&formid=`feedbackForm`&tpl=`feedbackForm`&report=`feedbackReport`&subject=`Письмо с сайта`!]

  4.  
  5. <script type="text/javascript">

  6. function as_successCallback(){

  7.     $('#feedbackForm').get(0).reset();

  8. }

  9. </script>

  10.  
  11. -- чанк "feedbackForm" --

  12.  
  13. <div class="error">[+validationmessage+]</div>

  14.  
  15. <form id="feedbackForm" method="post" action="[ ~[ *id* ]~ ]">

  16. ...

  17. </form>

Теоритически с помощью ajaxSubmit можно отправить "аяксом" форму любого сниппета MODx.
Я проверял на eForm и WebLogin. С точки зрения безопасности не вижу никаких проблем, ведь обращение идет к той же самой странице, а какой тип запроса значения не имеет. Проблемы могут возникнуть только в случае ошибок в HTML-коде, он должен быть валидым. Если в браузере отключен JavaScript, форма тоже будет работать. Рекомендуемая кодировка - UTF-8.

Демо

Скачать


Комментарии (19)

  1. 07.09.2011 16:36:07
    Иван

    Класс, спасибо)))

  2. 03.10.2011 20:34:31
    Константин

    Шикарно, с первого раза все отправилось. Andchir, в очередной раз спасибо за полезный плагин

  3. 25.10.2011 03:35:02
    Иван

    Подскажи, почему у меня при успешной отправке формы выдает сообщение "Данные успешно отправлены. Нет нужды отправлять данные несколько раз."

  4. 12.11.2011 02:35:04
    Кирилл

    Приветствую! Спасибо за замечательный инструмент, частенько пользуюсь. Но вот наткнулся на странный баг - в Opera 11.52 (+jquery 1.6.2) после отправки формы в целевой контейнер грузится вся страница, а не только ответ.
    Не подскажете, в чем может быть дело?
    З.Ы. http://demo-evo.modx-shopkeeper.ru/ajaxsubmit-demo.html - тут наблюдается та же ошибка.

  5. 12.11.2011 13:00:54
    Andchir

    Кирилл, проверил в Опере 11.52. Описанной вами проблемы не наблюдаю.

  6. 12.11.2011 13:44:11
    Кирилл

    Andchir, действительно - посмотрел сегодня на нескольких других компах с той же версией оперы, все отлично работает, проблемы нет. Буду ковырять настройки браузера - может там чего слетело. Сори за беспокойство.

  7. 26.11.2011 02:14:02
    Александр

    После установки плагина, сервер все время выдает ошибку 500. Отключаешь плагин все нормально, в чем может быть проблема?

  8. 26.11.2011 12:35:54
    Andchir

    Александр, возможно такая причина: http://modx-shopkeeper.ru/forum/viewtopic.php?id=482
    Всё можно увидеть в логе ошибок на сервере.

  9. 14.12.2011 00:09:02
    yos

    А есть идеи как реализовать подобное для FormIt? Или направить в нужном направлении.

  10. 21.12.2011 13:43:20
    Александр

    А что если не используя этот плагин, а просто создать ресурс с чистым шаблоном, а к шаблону подцепить снипет который будет обрабатывать результаты и посылать ответ, а в аякс запросе указать эту страницу, так наверное сервер меньше движений будет делать. поправте если неправ.

  11. 21.12.2011 14:20:58
    Andchir

    Ерунду написали. Откуда этот сниппет узнает как ему обрабатывать запрос? Ему нужно узнать все параметры сниппета, который выводит форму, а для этого надо парсить страницу, с которой отправляется запрос. Вот и придём туда откуда начали.

  12. 21.12.2011 14:51:58
    Александр

    Ну у меня он получает данные с этой страницы, уже проверил)))

  13. 21.12.2011 14:59:14
    Александр

    С самим запросом посылать некий индификатор по которому будет снипет знать как обрабатывать данные,

  14. 21.12.2011 15:17:24
    Andchir

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

  15. 22.01.2012 11:33:08
    Akool

    А возможно ли на данный обработчик посадить отправку двух (и более) форм с одной страницы?

  16. 31.01.2012 21:48:52
    Сергей

    сделал в первый раз, и всё без бубна помогло, сделал на втором сайте с русскоязычным доменом, в IE не работает(((

  17. 06.02.2012 07:26:10
    Роман

    Все гуд, только AjaxSearch некорректно работает с ним (вызов такой [!AjaxSearch? &ajaxSearch=`0` &landingPage=`131` &showResults=`0` &advSearch=`oneword` !] )

  18. 06.02.2012 07:28:06
    Роман

    Вот что выводится в форме поиска:
    AjaxSearch error: Z:/home/u.ru/www/assets/plugins/ajax_submit/configs/default.config.php not found !
    Check the existing of this file!

  19. 06.02.2012 07:40:12
    Роман

    Есть ответ на этот вопрос.
    В сниппете ajaxSubmit, который на самом деле лежит в плагинах (сниппет инклудит один файл)
    есть замечательная строчка define('AS_PATH', ...);
    Абсолютно не в курсе зачем она там, но именно из-за неё всё и ломается, потому что она переопределяет AS_PATH, который активно использует ajaxSearch.






Разрешённые теги: <b><i><br> Комментарий: