date_popup element not working when the form is rendered with ajax

Question

How to attach javascripts to form rendered with ajax?

In particular, I have problem with popup calendars in my form. They are not showing, when my form is rendered with ajax.

I am rendering form with javascript as follows:

$.get('/event-form', {}, function(data) {
$('#event-popup-container').html(data);

This code calls ajax callback "/event-form". returned variable 'data' containes my form. This form is displayed on web page in HTML element $('#event-popup-container'). It works OK, just date_popup elements in form don't show popup calendars. Propably I have to attach some javascripts somehow, when the form is not loaded with page load, but with ajax call. But I have no clue how.

I have such a code in my menu callback of path '/event-form':

<?php  
  //...
  $event_form = drupal_get_form('ef_event__form', $event_id, NULL);
  $output .= drupal_render($event_form);
  drupal_json_output($output);
?>

Can anybody help, how to make work all needed javascripts, when the form is loaded with ajax?

Answer 1

The problem is that you are not using any of AJAX helpers provided by Drupal. When you are using Form API AJAX, for example, all behaviors are re-initialised and functionalities like calendar added to new elements.

If you are not using Drupal-provided AJAX functionality, you need to manually call all behaviors with a proper context after your request is finished and DOM tree updated, probably by calling

Drupal.attachBehaviors(element)

on added DOM element.