Loading a form by ajax

Question

I've been stucked on problem since two weeks. Basically, what i'am trying to do is: 1) Create a page, in which there is an link ("Click me"), When i click on it, a form is fetched from another page and added to the current page. The form is correctly fetched, but it seems any javascript/ajax related to the form is lost. I have a custom Ajax submit callback for this form, on the page of the form(submit button has class ajax-processed), it is working correctly but when fetched by Ajax(submit button does not has the class ajax-processed), it doesn't.

Below is my code:

<?php

function custom_preprocess_page(&$vars){

  drupal_add_library('system', 'drupal.ajax');
  drupal_add_library('system', 'drupal.form');
    drupal_add_js(drupal_get_path('module','custom').'/custom.js', 'file');
}

/**
 * Implements hook_menu
 * @return string
 */
function custom_menu() {

    $items['my-test/my_form'] = array(
        'title' => 'Ajax test',
        'description' => 'Page containing form',
        'page callback' => '_custom_retrieve_webform',
        'access callback' => TRUE,
    );

    $items['my-test/retrieve_form'] = array(
        'title' => 'Ajax test',
        'description' => 'Page where form should be loaded by ajax',
        'page callback' => '_custom_retrieve_html',
        'access callback' => TRUE,
    );
    return $items;
}
function _custom_retrieve_html(){
    return '<div id="justadiv"><a class="clickme">'. t('click me'). '</a></div>';
}
function _custom_retrieve_webform(){

   $node = node_load(12);
   $submission = (object) array();
   $enabled = TRUE;
   $preview = FALSE;
   $form= drupal_get_form('webform_client_form_12', $node, $submission, $enabled, $preview);
  return '<div id="myform">'.drupal_render($form).'<div>';
}




function custom_form_alter(&$form, &$form_state, $form_id) {
    if ($form_id == 'webform_client_form_12') {
        $nid = $form['#node']->nid;
        $form['submitted']['gender']['#default_value'] = 'M';
        $form['actions']['submit']['#ajax'] = array(
            'callback' => 'mymodule_webform_js_submit',
            'wrapper' => 'webform-client-form-' . $nid,
            'method' => 'replace',
            'effect' => 'fade',
        );

       //$form['#theme']=array('custom_web_form');

       array_unshift($form['#theme'], 'custom_web_form');
    }
}

function mymodule_webform_js_submit($form, $form_state) {
      // define the $sid variable (submission id from webform)
      $sid = $form_state['values']['details']['sid'];
      // if we have a sid then we know the form was properly submitted, otherwise, we'll just return the existing $form array
      if ($sid) {

        dsm($sid);

        $confirmation = array(
          '#type' => 'markup',
          '#markup' => 'sucess',
        );
        // return the confirmation message
        return $confirmation;
      }
      else {
        // return the form
        return $form;
      }
    }

My js:

(function($){

    Drupal.behaviors.my_custom= {

        attach:function(context,settings){
            $('a.clickme').click(function(e){
                $('#justadiv').load('/d7/my-test/ajax_loaded #webform-client-form-12', function(response, status, xhr) {

                    Drupal.attachBehaviors('#webform-client-form-12');


                });
                Drupal.attachBehaviors($('#webform-client-form-12')[0]);
            });

        }



    }

})(jQuery)

CAn anyone tell me what is wrong ?

Answer 1

Solution posted here:

basically:

You need to generate the javascript settings for the form, and send them to the browser to be merged with the existing settings. Without doing this, any AJAX on your form will not work.

https://drupal.org/node/2009252