
How use AJAX in DRUPAL
We can easily use AJAX in DRUPAL framework. Drupal provide the jQuery javascript library so we can use jQuery for our AJAX implementation. First we write a module in which we are going to implement the server side logic. Suppose our module name is product and we will check the given product name is exist or not in our product table.
<?php /*product.module*/ function product_menu() { $items = array(); $items['product'] = array( 'page callback' => 'drupal_get_form', 'page arguments' => array('product'), 'access arguments' => TRUE, 'type' => MENU_CALLBACK, ); $items['product/check_name'] = array( 'page callback' => 'check_name', 'access arguments' => TRUE, 'type' => MENU_CALLBACK, ); return $items; } function product() { $path = drupal_get_path('module', 'product'); drupal_add_js($path . '/product.js', 'module'); $form['product_name'] = array( '#title' => t('Product Name'), '#type' => 'textfield', '#required' => TRUE, '#size' => 30, '#description' => t('Please enter product name.'), ); $form['check_name'] = array( '#type' => 'markup', '#value' => "<a href='#' id='check_name'>" . t('Check Product Name') . "</a><br/>", ); $form['status'] = array( '#type' => 'markup', '#value' => "<span id='status'></span><br/>", ); $form['submit'] = array( '#type' => 'submit', '#value' => t('Submit'), ); $form['cancel'] = array( '#type' => 'markup', '#value' => l(t('Cancel'), 'product_mgmt'), ); return $form; } function check_name() { $name = strtolower($_GET['name']); $query = "SELECT COUNT(*) AS total FROM {product} WHERE LOWER(product_name) LIKE ('%s')"; $rs = db_query($query, $name); $info = db_fetch_object($rs); $total = $info->total; if ($total) { echo "$('#status').html('This product is available.');"; } else { echo "$('#status').html('This product is not available.');"; } } ?>
Don’t return anything in “check_name()” function otherwise it will return the whole page when we access “product/check_name” path through AJAX.
/*product.js*/ // JavaScript Document $(document).ready(function() { $('#check_name').attr('href', 'javascript:void(0);'); $('#edit-product-name').keydown(function(event){ $('#status').html(''); }); $('#check_name').click(function() { var name = $.trim($('#edit-product-name').val()); if (name == '') { $('#status').html('Please enter product name.'); return; } $.ajax({ type: "GET", url: "/product/check_name", data: "name=" + encodeURI(name), success: function(msg){ eval(msg); } }); }); });
#1 by Praetorian - June 24th, 2009 at 22:54
Hello.. may i ask for full script (content type) / view for implement this sample script from you..? still learn on AJX in drupal..
Thank you.
#2 by Drupal Fan - July 5th, 2009 at 19:40
Hi,
A live example would have great. I mean, an implementation of this, to click and see what’s exactly happening(the behaviour).
Thanks,
#3 by jerk - January 3rd, 2010 at 07:53
Uncommented code and ~30 words of noncode text. Does this even qualify as a how to?
#4 by admin - January 3rd, 2010 at 07:58
@jerk
Jerk if you are a Drupal guy then this much of information is more than enough.
#5 by varun Bajaj - January 16th, 2010 at 19:57
Hey buddy you are my life savior, This tutorial is really worth a pizza
#6 by tomvons - January 24th, 2010 at 23:07
Thanks for this. I’m not really a Drupal guy (just using it for this particular site), but wouldn’t it make more sense to return json instead of js to be eval’d?
#7 by admin - January 26th, 2010 at 07:05
@tomvons
Yes we can return JSON instead of JS.
#8 by Filme Noi Cinema - February 24th, 2010 at 07:24
@jerk
Give the guy a break… This tutorial is excellent: short and to the point.
Indeed, it does not explain in detail or the inner-workings of drupal modules, hooks, “menu” callbacks, form api, or jquery… but all these are complex subjects which cannot be explained in a short “hands-on” tutorial.
Unfortunately you will need to look them up in the drupal developer api handbooks, to better understand what is happening in this code…
#9 by asd - July 28th, 2010 at 18:56
@ admin
#10 by diensh pal - August 3rd, 2010 at 12:05
thanks for this….
good posting for the drupal begineers…
once again thanks
#11 by Mo - September 27th, 2010 at 08:44
‘access arguments’ => TRUE
should be
‘access callback’ => TRUE
otherwise, you will get error in menu.inc
#12 by anon - October 1st, 2010 at 16:44
Getting warning: Invalid argument supplied for foreach() in /var/www/example.com/public_html/includes/menu.inc on line 258.
Changed ‘access arguments’ => TRUE
to
‘access callback’ => TRUE
but still getting the error.
#13 by aufumy - October 21st, 2010 at 06:19
@anon
be sure to clear your cache, and the error will go away.
@Drupal Fan to make this a live example, add a product.info file and create a product table in the database with a column called product_name
#14 by jatin - August 8th, 2011 at 21:33
hi….
this is great post..
but i have a question…
if i m using a simple tag (NOT USING FORM ELEMENT )and reff. this example ..how we go to the URL in DRUPAl …
i used both GET and POST..but cannot find any solution….
plz reply , if you have something solution…
thanxx in advance..
jatin (mail2jatingarg@gmail.com)