Upload and submit an AJAX form to Drupal 7

Recently, I needed to implement an AJAX form submit. In this case, the form should be loaded in the pop-up. It would seem a trivial task, but it turned out that there are still pitfalls.
The task is solved for Drupal 7. The fancybox is used as a library for creating popups.

First you need to connect the necessary libraries:

$ path = drupal_get_path ( 'module' , 'simple_ajax_popup' ) ;
drupal_add_js ( $ path . '/misc/fancybox/source/jquery.fancybox.pack.js' ) ;
drupal_add_css ( $ path . '/misc/fancybox/source/jquery.fancybox.css' ) ;
drupal_add_js ( $ path . '/misc/simple_ajax_popup.js' ) ;
drupal_add_js ( 'misc / jquery.form.js' ) ;

The jquery.form.js file is connected by a drupal every time a form is present on a page. This file is required to submit a form via AJAX. Since there is no page of this form at the time of rendering, Drupal will not connect this file and it must be manually connected.

Then in the menu hook you need to add the necessary callbacks:
')

/ **
* Implements hook_menu ().
* /
function simple_ajax_popup_menu ( ) {
$ items = array ( ) ;
$ items [ 'test' ] = array (
'type' => MENU_SUGGESTED_ITEM ,
'title' => t ( 'Test page' ) ,
'page callback' => 'simple_ajax_popup_page' ,
'access arguments' => array ( 'access content' ) ,
) ;
$ items [ 'callback' ] = array (
'type' => MENU_CALLBACK ,
'page callback' => 'simple_ajax_popup' ,
'access arguments' => array ( 'access content' ) ,
) ;

return $ items ;
}

The first callback will be the page on which the link for form upload will be, and the second callback will return the form.

To call the form, add a link to the page:

function simple_ajax_popup_page ( ) {
drupal_add_library ( 'system' , 'drupal.ajax' ) ;
return l (
'AJAX form' ,
'callback' ,
array (
'attributes' => array ( 'class' => array ( 'fancybox' , 'fancybox.ajax' ) ) ,
)
) ;
}

It is important not to forget to connect the Drupal library for working with AJAX.

Another important point is to attach the function for processing the form in javascript to the fancybox event afterShow:

function simpleAjaxPopupFormProcess ( ) {
Drupal. attachBehaviors ( '#simple_ajax_popup_form' ) ;
jQuery ( '#simple_ajax_popup_form' ) . ajaxForm ( ) ;
}

The form rendering function is extremely simple:

/ **
* Return popup with form.
* /
function simple_ajax_popup ( ) {
$ form = drupal_render ( drupal_get_form ( 'simple_ajax_popup_form' ) ) ;
print $ form ;
drupal_exit ( ) ;
}

The answer is ajax_deliver. The ajax_command_replace function allows you to add to the AJAX request response a command that replaces the content of the specified wrapper.

function simple_ajax_popup_form_submit ( $ form , & $ form_state ) {
$ form_state [ 'rebuild' ] = TRUE ;
watchdog ( 'ajax message' , $ _POST [ 'message' ] ) ;
$ commands = array ( ) ;
$ commands [ ] = ajax_command_replace (
'# simple-ajax-popup-form' ,
'<div class = "messages status"> The message has been added to the system log. </ div>'
) ;
ajax_deliver ( array ( '#type' => 'ajax' , '#commands' => $ commands ) ) ;
drupal_exit ( ) ;
}

Thus, you can show the error message:



Or a message about the successful sending:



In this case, the form simply adds the message to watchdog.

And finally - do not forget to add a special class to the submission button of the form, so that the form can be sent via AJAX.

$ form [ 'form_wrapper' ] [ 'submit' ] = array (
'#type' => 'submit' ,
'#value' => 'Submit.' ,
'#attributes' => array ( 'class' => array ( 'use-ajax-submit' ) ) ,
) ;

Full sample code can be downloaded here.

A real project where such form submission is used via the popup module comment comment .