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.
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
