Commerce checkout does not work when loading from AJAX

Question

In D7, I have a dropdown form field that has an #ajax attribute pointing to a callback function that triggers when the drop down value is selected. In the callback function, I load the current Commerce order and then the Commerce checkout form using:

$commerce_form = commerce_checkout_router($order);    

I then render the checkout form and display in the template:

$commands[] = ajax_command_html('#checkout-section', '');
$commands[] = ajax_command_append('#checkout-section', render($commerce_form));

return array('#type' => 'ajax', '#commands' => $commands);

When I do that, it looks like my checkout form does not get properly bootstraped and I lose all the interactivity of the checkout form I've set up using hook_info's etc.

When I visit the checkout form without AJAX everything works well.

Do I need to somehow bootstrap Drupal Commerce inside AJAX callbacks if I want to use AJAX so all my hooks that customize the Commerce Checkout?

PS: I am doing a

require_once '../contrib/commerce/modules/checkout/includes/commerce_checkout.pages.inc';    

inside the callback. Without this I get functions not defined errors on core Commerce functions. (The Drupal Commerce and all related modules are enabled and it only happens in the AJAX callbacks.)

Thank you

Answer 1

I had exactly the same Problem, i think this page should help you: Loading a form by ajax.

I have solved this problem, but I think its a little bit ugly. The Problem was that I have loaded the checkout form, but not the scripts which are necessary on the checkout page. So i have loaded the scripts from the checkout page, too. After that i have done a

Drupal.attachBehaviors();

So all scripts can attach there functionality to the checkout form.