Loading a form by ajax

Have you tried the Ajax module?

You are on the right track, but there are a few issues with your code. First, lets look at your ajax callback function, _custom_retrieve_webform():

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>';
}

The function you've mapped to your AJAX callback path is _custom_retreive_webform(). At the end if your function, you've returned some HTML.

The code that you return from this function is then wrapped in the page HTML, which includes blocks, content, scripts, css files - everything for an entire page load. The content for that page is div#myform, which contains the form that you've rendered. Next, we'll look at your JavaScript:

$('a.clickme').click(function(e) {
  // Note - following code adjusted for readablity
  $('#justadiv').load('/d7/my-test/ajax_loaded #webform-client-form-12');
}

In the above code, when a.clickme is clicked, the jQuery $.load() function requests data from the path /d7/my-test/ajax_loaded. The jQuery selector that is attached is then used as a filter, and everything outside this div is stripped off, and thrown away.

The problem as you can see, is that a lot of unnecessary HTML is generated on the server, as it is just thrown away by the javascript. To fix this, instead of returning the HTML from your page callback function, you can kill the script right there, as you already have everything you need:

  // Was: return '<div id="myform">' . drupal_render($form) . '</div>';

  // New code:
  die(render($form));

The render() function will render the form and send the HTML to the browser, which means the remainder of the page is not loaded or rendered, so less HTML is sent to the browser, meaning your AJAX responses will be faster as well.

Then, in your JavaScript, you can do the following:

$('a.clickme').click(function(e) {
  $('#justadiv').load('/d7/my-test/ajax_loaded');
});

Because your PHP function only returns the form, there is no need to filter anything from the URL you've called. So you can load the entire contents of the response into div#justadiv.

Next, lets look at your usage of Drupal.attachBehaviors():

$('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]);
});

First, you don't need to pass anything to Drupal.attachBehaviors(). You can, and should, call it with no arguments:

Drupal.attachBehaviors();

This will allow all modules to attach any behaviors on the new HTML that has been added. Some other module may be specifically watching form elements, and since you have now added form elements, you want to allow all modules to do whatever they want.

The other issue is that you are calling Drupal.attachBehaviors() twice - once when your $.load() function has completed, and once on the $.click() handler you've set on a.askme. This means that every time you click that button, Drupal.attachBehaviors() is called. But you only want to call it when new content has been added, so you should remove your second call to Drupal.attachBehaviors().

One final point on your JavaScript, your $.click() handler will be attached every time Drupal.attachBehaviors() is called. This is no good, as you will end up having your code called multiple times each time the a.askme is clicked. To get around this, you can use Drupal 7's $.once() function. This function ensures that the contained code will only be executed one time. This is achieved by tracking html elements using a custom class name in the HTML (in the following case, .my-custom). Here is a bit of a rewrite of your javascript:

(function($)
{
  Drupal.behaviors.myCustom= {
    attach:function() {
      $('a.clickme').once("my-custom", function() {
        // $(this) refers to a single instance of a.clickme
        $(this).click(function() {
          $('#justadiv').load('/d7/my-test/ajax_loaded', function() {
            Drupal.attachBehaviors();
          });
        });
      }
    }
  };
}(jQuery));

Finally, lets return back to your menu callback function, as there is one more step that needs to happen for the AJAX on your form to work. 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. Here is the adjusted callback function:

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);

  // Generate the settings:
  $settings = FALSE;
  $javascript = drupal_add_js(NULL, NULL);
  if(isset($javascript['settings'], $javascript['settings']['data']))
  {
    $settings = '<script type="text/javascript">jQuery.extend(Drupal.settings, ';
    $settings .= drupal_json_encode(call_user_func_array('array_merge_recursive', $javascript['settings']['data']));
    $settings .=  ');</script>';
  }

  // Return the rendered form and the settings
  die(drupal_render($form) . $settings);
}

The above merges the returned settings for your form, with the original settings, so that when Drupal.attachBehaviors() is called, your form can be #ajaxified.

Good luck! Code not tested, so there may be typos.

H