#states and #ajax are not working on pop up

Question

I need to get form only with HTML. To do this, I've used delivery callback in hook_menu(). This is my sample code:

function test_menu() {
  $items['htmlform'] = array(
   'access callback'  => TRUE,
   'page callback'    => 'test_htmlform'
   'delivery callback' => 'delivery_text_plain',
   'type'             => MENU_CALLBACK,
 );
  return $items;
}

In this form, I've used #states and #ajax.

I've another form which is in the normal callback. I need to show htmlform into this Drupal form. So I've written a ajax callback to 'htmlform', get html, paste it into the drupal form & show this in pop up.

This is my ajax callback:

$.ajax({
    url: '/htmlform',
    success: function(data) {
      $('#formpopup').empty();
      $('#formpopup').html(data);
      $("#form_demo_pup").modal({backdrop: 'static',keyboard: false});
      Drupal.attachBehaviors($('#form_demo_pup'));
    }
  });

Now the drupal form page have all the CSS and JavaScript but the pop up (htmlform) have only the HTML.

On this pop-up, #states and #ajax are not working since it has no Drupal form JavaScript.

How do I fix this? Even I tried "Drupal.attachBehaviors" in my custom ajax.

Answer 1

You need to load the required JS on page load, not on Ajax load. You will need to load the Drupal.ajax library as well.