Nov 17, 2012

, Drupal hooks : Basic Ajax request/response with Drupal 7 menu hook





Hello world!
This tutorial assumes that you are at least 50% familiar with drupal hook_menu()  and Jquery Ajax and I apologize in advance because I’ll be sticked with the topic and never come out of it. please post a comment below if you need more clarifications in any other areas not-related to the topic. Thank you.
 
My goal: Very simple!

  • I am having a HTML form with a textfield in a page.
  • Once the text field is filled and when the cursor moves/changes from it I need to pass the textfield value to my Drupal module with the use of AJAX and receive the response from it.
Step 1
  • In my module file I right the hook_menu()

Code:

/*

* Implementation of hook_menu()
*/
function mymodule_menu() {
$items['any/path/% ] = array(
  'page arguments' => array(2),
  'page callback' => 'myAnyFunction',
  'access arguments' => array('access content'),
  'type' => MENU_CALLBACK
 );
 return $items;
}


$items['any/path/% ] :  This is where you define a path, the “%” is the parameter meter that will be passed from the AJax request.

'page arguments' => array(2) :  You get the second argument of the path which is the ‘%’ (so “any” is 0 , “path” is 1, ‘%’ is 2).

'page callback' => 'myAnyFunction', : This is the function that will be triggered once the defined path is called, here is where we are going to right the response for Ajax.

'access arguments' => array('access content'):  This should be specified definitely when creating a module,if not you might get permission issues.

'type' => MENU_CALLBACK : Specify the menu type [checkout the ccomplte refrence here for menu types ]

return $items; You return the menu.

Step 2
  • And right the below Jquery with ajax request
Code:
jQuery(document).ready(function() {
$('#mytextfield').change(function() {

//Get the value of the textfield on change
var textfieldvalue= $('#mytextfield').val();

//pass the value to the url you created in the hook_menu();
path = '/customer/autofill/'+textfieldvalue;
$.ajax({
            url: path,
            method: 'POST', //you can make use of the GET method tooo
            success: function(data) { // recieve the response from the defined function
                        alert(data);
            }
            });
              false;
            });

Step 3
  • Now the response to the ajax to be written in the module file again
  • Can you remember this 'page callback' => 'myAnyFunction'  we wrote in step 1
  • So “myanyfunction” will be the function to respond the Ajax request

Code: 


//The $argument1 is the value passed by ajax and retrieved by hook_
menu() and again passed to the function
function myAnyFunction($argument1){

//This will be printed as the response

echo ‘Successfully received ’. $argument1;
}

Hmmmm..! are we done?
BOOOOM! yes we did it.

Note :  This is a very basic thing that you can do with AJAX and Drupal, there are more complicated things that you can deal with. I’ll be coming up with a very nice tutorial to do auto-fill fields using Ajax and Drupal 7 Database layer.
Please place your valuable comments below. Thnak you.

Stay tuned by following me in twitter