How use AJAX in DRUPAL

How use AJAX in DRUPAL

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. #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. #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. #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. #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. #5 by varun Bajaj - January 16th, 2010 at 19:57

    Hey buddy you are my life savior, This tutorial is really worth a pizza :D

  6. #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. #7 by admin - January 26th, 2010 at 07:05

    @tomvons
    Yes we can return JSON instead of JS.

  8. #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…

(will not be published)


Submit Comment
Subscribe to comments feed