AjaxForm - Надсилання форм через Ajax

MODX Revolution має хороший компонент для форм — FormIt. Мене він усім влаштовує, крім одного — відсутності роботи з ajax. Проблема стара, вирішувалася сотнею різних способів на сотні різних сайтах, і просто не захотілося велосипедити у сто перший.

Наслідуючи відому мудрість "краще день втратити потім за п'ять хвилин долетіти", я взяв і написав новий безкоштовний компонент AjaxForm.

  • надсилання
  • надсилання
Сніппет працює просто:
  1. Реєструє необхідні скрипти на фронтенді (jQuery.Form та jQuery.jGrowl)
  2. Зберігає в сесію $scriptProperties при виклику сніпета
  3. Виводить вказану форму, прописуючи клас ajax_form та прихований input для отримання $scriptProperties
  4. Вішає обробник на форму, щоб вона вирушала через ajax
  5. При відправці запускає вказаний сніпет для обробки та повертає відповідь від нього
  6. Виводить повідомлення про успіх або помилки, якщо є
За замовчуванням усе розраховано працювати зFormIt, але можна вказати і власний сниппет.

Приклад виклику для FormIt:

Для виведення повідомлень про помилку заповнення поля, скрипт шукає у формі блок із класомerror_имяполяі вставляє повідомлення повідомлення (див. дефолтний чанк). При повторному надсиланні форми ці повідомлення видаляються.

По ідеї можна змінювати всі виклики FormIt на робочих сайтах, просто обертаючи їх в AjaxSubmit і переносячи форму зі сторінки в чанк - має працювати.

Звичайно ви можете використовувати і власний сніпет, який буде робити що завгодно (хоч створювати сторінки на сайті) і повинен повертати масив JSON з ключами:

  • status- 1 або 0, тобто успіх чи помилка
  • message— повідомлення про роботу сніпета
  • data- масив для полів зпомилками, у яких ключами є ім'я поля, а значенням – повідомлення про помилку
Для зручності роботи в параметрах СНІП передається змінна$AjaxFormз класом компонента. Раджу викликати з нього методиerrorтаsuccessпри видачі відповіді.

Найпростіший приклад свого сніпета:

Загалом, качаємо, тестуємо, пишемо відгуки. Це бета-версія, написана цілком за сьогодні і, швидше за все, містить помилки.

Сніппет можна використовувати ще одним цікавим чином - просто викликавши його на сторінці, ви отримуєте підключенийjQuery.jGrowlі можете легко показувати приємні спливаючі повідомлення на javascript:

Другим параметром можна вказати «прилипаючий» popup – його потрібно буде закрити вручну, буває корисним для показу серйозних помилок.

ajaxform