How to fetch/load a node form using jquery/ajax?

Question

In my previous question, I asked on how to fetch views blocks, now I would like to do the same with the node form but somehow this is the code that almost worked for me:

setTimeout(function(){ 
  $('.custom-form').load('?q=node/add/custom #custom-node-form', function() {
    Drupal.attachBehaviors();
  });
}, 1000);

The ajax/jquery of the form doesn't work anymore, for example: date field - popup calendar, unlimited field.

I also tried this:

setTimeout(function(){ 
    $('.custom-form').load('?q=node/add/custom #custom-node-form', function() {
         Drupal.attachBehaviors($('#custom-node-form'));

      });
    }, 1000);

still not working.

Are there other ways to load the node form with all it's ajax/jquery settings?

I'm using this kind of approach because I have a super long form. When I try to print it on the template or on the regions/blocks, it affects the load speed. I don't want this to be part of the page load.

UPDATE: I'm also trying to load the formblock module using the method I used on the ajax views as an alternative, I also can't get it to work.

Thank you.

Answer 1

I don't think you've got the right parameters on the jQuery "load" method. The jQuery API page has this for the signature:

.load( url [, data ] [, complete ] )

This might be a working revision (not tested):

$('.custom-form').load('?q=node/add/custom', {}, function() {
     Drupal.attachBehaviors($('.custom-form'));
});

However, your strategy will load the entire Drupal page, not just the form. The AJAX-loaded page and form will not be in the expected request context - I'm not sure that the form can be successfully submitted in this circumstance.

You might try looking into implementing CTools Modal API instead, which is designed to allow the loading forms into modal windows via AJAX.