Add AJAX to form that was loaded through AJAX

Question

I may be missing something really basic here but it has been bothering me for a couple of days now.

I have a page that basically contains a link which loads another page through AJAX. The page that is loaded is basically a simple node/add form for articles. The problem is that the form that is loaded does not contain any AJAX behavior (I even installed the AJAX example module and the simple ajax checkbox that it is adding does not work). I do not know if it relevant but the fieldsets in the node add form are not working either.

I did some research and I am suspecting that I need to do something on the AJAX callback that loads the form. I read about Drupal.attachBehaviors which I tried attaching to the element where I'm loading my form but it does not seem to be working.

I'd be happy to edit my question to add some code but I was wondering if I'm missing something really basic.

Edit (my current code):

PHP:

function aforms_menu() {
  $items = array();

  $items['aforms/article'] = array(
    'page callback' => 'aforms_get_form',
    'type' => MENU_CALLBACK,
    'access callback' => TRUE,
    'delivery callback' => 'aforms_ajax_callback',
  );

  return $items;
}

function aforms_get_form() {

  global $user;

  module_load_include('inc', 'node', 'node.pages');
  drupal_add_library('system', 'drupal.ajax');

  $node = (object) array(
    'uid' => $user->uid,
    'name' => (isset($user->name) ? $user->name : ''),
    'type' => 'article',
    'language' => LANGUAGE_NONE,
  );

  $form = drupal_get_form('article_node_form', $node);

  return $form;

}

function aforms_ajax_callback($form) {

  print drupal_render($form);

  drupal_page_footer();

}

JS:

(function ($) {

Drupal.behaviors.aforms = {
    attach: function(context, settings) {
        $('body').on("click", "#load-me-up", function() {

            $('#target-container').load('/aforms/article', function() {
                console.log('Before attach behaviors executed');
                console.log(context);
                console.log(settings);
                Drupal.attachBehaviors();
                console.log('After attach behaviors executed');
                console.log('Drupal object:');
                console.log(Drupal);
            });

        });
    }
}

})(jQuery);

Answer 1

You need to provide Drupal.attachBehaviors with the context (what was added) and the Drupal.settings. You should also use context in your script, so the JS should be rewritten something like this (not tested)

(function ($) {

  Drupal.behaviors.aforms = {
    attach: function(context, settings) {
      $('body', context).on("click", "#load-me-up", function() {
        $('#target-container').load('/aforms/article', function() {
          Drupal.attachBehaviors($(this), settings);
        });
      });
    }
  }

})(jQuery);

You need to use context on the $('body') to avoid the handle to be attached multiple times. In the load callback you need to add $('#target-container') to attachBehaviors, but in this case $(this) should be the same thing.