ВопросAjax-загрузка ajax-формы на страницу

Как правильнее всего загрузить на страницу форму через ajax, которую затем можно будет обрабатывать тоже через ajax? Т.е. как вместе с html формы подгрузить еще и необходимый js-код?

Комментарии

Аватар пользователя sergeybelya
sergeybelya написал:

Поясню, возможно, не совсем понятен вопрос: в кастомном модуле создана форма с помощью Forms API, но на странице она изначально отсутствует, а появляется через Ajax в определенном блоке при нажатии ссылки. Разметка формы подгружается, но задача - обрабатывать эту форму тоже через Ajax (wrapper и callback для свойства #ajax кнопки этой формы задаются в конструкторе формы). Как подгрузить необходимый js-код?

14.06.2013 00:01
Аватар пользователя Spleshka
Spleshka написал:

Если вы используете аттрибут #ajax для работы с AJAX в формах, то ничего больше подгружать не надо. Друпал подгрузит всё сам.

Если изначальная подгрузка формы делается кастомным скриптом, то на страницу вам надо добавить скрипт ajax.js с помощью drupal_add_library('system', 'drupal.ajax'), а затем после загрузки формы вызвать Drupal.attachBehaviors() в своём скрипте.

14.06.2013 00:54
Аватар пользователя sergeybelya
sergeybelya написал:

Да, подгрузка формы происходит аяксом при наступлении определенного события (просто через $.ajax(), ответ формируется по адресу страницы, созданной через hook_menu(), в виде отрендеренного массива формы). поэтому в данном случае естественно аякс для формы не срабатывает. Что нужно указать при вызове метода Drupal.attachBehaviors()?

14.06.2013 01:40
Аватар пользователя Spleshka
Spleshka написал:

Передайте туда id вашей формы. Например, Drupal.attachBehaviors('#my-form');

14.06.2013 10:06
Аватар пользователя sergeybelya
sergeybelya написал:

Splash, почему-то не срабатывает такой вариант. Библиотеку для аякса подключил, Drupal.attachBehaviors для формы вызвал. Но аякс для нее по-прежнему не срабатывает.

16.06.2013 00:12
Аватар пользователя Spleshka
Spleshka написал:

Есть сайт в интернетах? Так будет проще. Без этого сложно ответить.

16.06.2013 00:26
Аватар пользователя sergeybelya
sergeybelya написал:

Есть, на время выведу из режима обслуживания. Попробуйте положить в корзину и затем выбрать оформление заказа (планируется весь процесс покупки и чекаута осуществлять аяксом в диалоговом окне).
http://www.taniyaivanova.com/kollekcii/fw-2012-2013/1

16.06.2013 00:43
Аватар пользователя Spleshka
Spleshka написал:

К сожалению, когда я открыл ссылку, сайт уже был в режиме обслуживания.

16.06.2013 21:08
Аватар пользователя sergeybelya
sergeybelya написал:

Да, извините, просто нежелательно, чтобы сайт был проиндексирован в его нынешнем виде:). В любом случае спасибо за помощь, попробую дальше сам разобраться. Работу с формами и ajax в Друпал 7 освоил во многом благодаря вашему блогу. Если сделаете еще небольшой урок по моей теме - подгрузка формы на страницу через аякс и ее дальнейшая аякс-обработка - думаю, в числе благодарных вам буду не я один. Инфы по данному вопросу в сети практически нет, в том числе и на английском языке. Есть статья на хабре http://habrahabr.ru/post/147262/, но мне кажется задача реализована в ней не совсем правильно с точки зрения использования API Drupal. В книгах также подобного примера не нашел, включая лучшую из них - Pro Drupal 7 Development авторов Todd Tomlinson и John K. VanDyk. Есть некоторые модули, реализующие подобный функционал, например Colorbox Node, но к сожалению нет времени разбираться в исходниках:(.

17.06.2013 11:31
Аватар пользователя sergeybelya
sergeybelya написал:

Добавление в template.php строки drupal_add_js('misc/jquery.form.js'); и двух строк в js (после загрузки формы) Drupal.attachBehaviors('#my-ajax-cart-checkout-form'); $('#my-ajax-cart-checkout-form').ajaxForm(); приводит к тому что отправка формы через ajax срабатывает, но этого "не видно", т.е. все коллбеки и валидаторы на стороне сервера отрабатывают (в данном случае происходит завершение процесса чекаута в Commerce), но при этом не появляется ни прогрессбар, ни сообщения, вообще внешне ничего не изменяется. Чего же еще не хватает?

17.06.2013 23:52
Аватар пользователя Spleshka
Spleshka написал:

ajax.js должен быть подключен

18.06.2013 11:37
Аватар пользователя sergeybelya
sergeybelya написал:

да, этот скрипт тоже подгружается.

18.06.2013 12:31
Аватар пользователя sergeybelya
sergeybelya написал:

Похоже, нужно использовать функции ajax_render и ajax_deliver, но как пока не разобрался.

18.06.2013 12:42
Аватар пользователя sergeybelya
sergeybelya написал:

Наконец-то разобрался, помог пост
https://drupal.org/node/1517414#comment-6258156
Приведу решение, может кому пригодится.
Итак, в препроцесс добавляем строчку drupal_add_library('system', 'drupal.ajax'); (Splash, спасибо!). Далее, функция-колбек для страницы, на которую идет запрос за формой, должна выглядеть примерно следующим образом:
/**
* Callback for "Checkout" link click in cart block.
*/
function my_ajax_cart_checkout() {
$form_html = render(drupal_get_form('my_ajax_cart_checkout_form'));

$javascript = drupal_add_js(NULL, NULL);
$settings = FALSE;

if(isset($javascript['settings']))
{
$settings = '

';
}

//Add the settings to the form
$form_html .= $settings;

return drupal_json_output(array(
'checkout_form' => $form_html,
));
}

Наконец, в js после окончания ajax-запроса и размещения полученного через json html формы в нужном месте, вызываем метод Drupal.attachBehaviors('#my-ajax-cart-checkout-form') - Splash, спасибо еще раз!
Протестировал, все отлично работает, как если бы форма изначально присутствовала в коде страницы. Таким образом, скрестив Drupal Commerce и Forms API, получился полностью аяксовый процесс добавления в корзину, редактирования в корзине, и оформления заказа в одном диалоговом окне. Нужно конечно еще потестить и довести до ума.

18.06.2013 13:52

Комментировать