Using Ajax in Drupal6 Select Box

Prabeen — Mon, 03 Jan 2011 10:01:58 +0000

Using Ajax in the Drupal is so easy but can be a little work around at the beginning. In this post I will go with the technique of how we can deploy the Ajax in Drupal Form in our custom module using Jquery , Drupal Api .
Basic Steps

Create a Page and its content where we make a Asynchronous javascript Request(AJAX) using Drupal ‘hook_menu()’.
We can make the output of the above page as simple HTML string or JSON object. (It depends )
Process the output and render in the requesting page using Javascript or Jquery.

Create a page using Drupal Hook_Menu().Put this code in you modules ‘.module’ file .

// create the page which will be called asynchronously by the client script (AJAX). 
function MYMODULE_menu() {
      // url of the page will be 'http://your_drupal_project/ajax_page'
      $items['ajax_page'] = array(
            'page callback' =>'my_content',
            'type' => MENU_CALLBACK,
            'access arguments' =>array('access content'),
      );
      return $items;
}
// content for the page , outputs the json object of the required information 
function my_content($category_id){ 
        $options = array(); 
	$sql = 'select * from my_table'; 
	if (!empty($category_id)){ 
		$sql .= " where category_id = '".$category_id."'"; 
	}  
	$result = db_query($sql); 
	while($row = db_fetch_object($result)) {
		$options[$row->product_id] = $row->product_name;
	} 
        if (!count($options)) $options['empty'] = true; // if the query returns no data 
	drupal_json($options); 
 }

Now lets suppose we have the block of the form or we can create like this .

// create a block using the drupal 'hook_block' api 
function MYMODULE_block($op = 'list', $delta = 0, $edit = array()) {
  $block = array();
  // we need javascript for Ajax request and Json object manipulation so call the javascript 
  drupal_add_js(drupal_get_path('module', 'MYMODULE') . '/MYMODULE.js');
  switch ($op) {
    case 'list':
      $block[0]['info'] = t('Drupal ajax select box');
	   break;
    case 'view':
      switch ($delta) {
        case 0:
          $block['subject'] = t('Drupal ajax select box');
          $block['content'] = drupal_get_form('my_form');// renders the from we created
          break;
      }
      break;
  }
  return $block;
}
// now create the form 
// here i have assume only two form elements with product and category information .
function my_form(){ 
  $form = array();
  $form['product_category'] = array(
    '#type' => 'select',
    '#title' => t('Product Category'),
    '#required' => FALSE,
    '#options'=>array(
	     '' =>'Select Category',
		 '1'=>'Category1',
		 '2'=>'Category2',
		 '3'=>'Category3',
	),
    '#attributes'=>array('id'=>'product_category'),
  );
  $form['product_name'] = array(
    '#type' => 'select',
    '#title' => t('Product Name'),
    '#required' => FALSE,
    '#options'=>array(
		 '' =>'All Product',	
	         '1'=>'Product1',
		 '2'=>'Product2',
		 '3'=>'Product3',
	),
    '#attributes'=>array('id'=>'product'),  
  );
  return $form;
}

Now its turn to create the Javascript file which has been already called on above drupal ‘hook_block’ api . On this Javascript file we will assign the event to that form element which will make AJAX request to get its child form elements options. In our case category select box will make AJAX request and fetch the product accordingly .Create the javascript file name as MYMODULE.js on your module folder.

jQuery(document).ready(function(){ 
	var Change_Option = { 
		Requesting_Element: $('#product_category'),
		Changing_Element  : $('#product'),
		Page	: "ajax_page/",
		_Ajax: function(){ 
			 this.Changing_Element.attr('disabled','disabled'); 
			 this.Ajax_Call(); 
		},
		Get_Argument:	function(){ 
			return  this.Requesting_Element.val(); 		
		},
		Ajax_Call: function(){ 
			var Self = this;
			$.get( this.Page+this.Get_Argument(), null, function(json_response){ 
				Self.Create_Option(json_response); 
				Self.Changing_Element.removeAttr('disabled'); 
			}); 
		}, 
 
		Create_Option:function(_json_response){ 
			 var _Json = Drupal.parseJson(_json_response);
			 if(_Json.empty){ 
				this.Changing_Element.html(this.Create_Option_Node('','No product')); 
			 }else {  
				 if (this.Get_Argument() == '') 
					this.Changing_Element.html(this.Create_Option_Node('','All Product'));
				 this.Changing_Element.html('')
				 for (i in _Json ) { 
					this.Changing_Element.append(this.Create_Option_Node(i,_Json[i]));
 
				 }
			 } 
		},
		Create_Option_Node:function(value,html){ 
			var _option = document.createElement('option');
			_option.value =  value; 
			_option.innerHTML = html;
			return _option; 
 
		},
		Create_Effect:function(){
			Change_Option._Ajax();
		}
 
	}
	Change_Option.Requesting_Element.change(function(){ 
		Change_Option.Create_Effect(); //event handler
	}); 
});

I hope this helps for the Drupal newbie. If you have any problem with the above scripts, please feel free to throw comments or contact me with the contact box.
I think the above Javascript easy enough to customize as I have followed javascript OOP approach.

Show loader image on the middle of the page on Ajax request using Jquery.

Prabeen — Fri, 01 Oct 2010 07:18:41 +0000

Now a days , use of Ajax in the web pages has increased subsequently to build the better user experiences. We often put the XMLHttp request (Ajax) to the server scripts to get the results from server and manipulate the results as per desired using client side scripts (javascripts) . Basically we prefer using some loader images on ajax request to notify that user request is in process. So , here I have wrote simple jquery scripts to enhance better image loader on ajax request with inbuilt UI blocker (to restrict other events during request) . If we are using huge number of ajax request then , this script can sound helpful.In this script I have used Jquery with object oriented javascript approach . I did not bother to make it as plugin , becuase its not that huge and not any setting required.

DEMO

Here is my script.

<script language="javascript" type="text/javascript">
 
$(document).ready(function(){
	// author prabeen. 
	$.AjaxLoader = { 
		// public access 
		ImagePath : "ajax-loader.gif" ,
		// public access 
		BlockerOpacity:0,
		//private access
		ImageObject : null,  
 
		//public access 
		Initialize : function(){ 
			this.PreLoadImage();
		}, 
		//private access
		PreLoadImage: function(){ 
				this.ImageObject =  new Image(); 
				this.ImageObject.src = this.ImagePath;
				this.ImageObject.Height = 50; 
				this.ImageObject.Width  = 50; 
		}, 
		// pulic access
		AppendImageObject: function(){ 
 
			var _position =  this.FindMiddlePosition(); 
			$('body').append(this.ImageObject)
			.find("img:last") 
			.css({'position':'absolute','top':_position[1]+'px','left':_position[0]+'px','z-index':2000})
			.addClass('LoaderImage');
			this.AppendBlocker();
		},
		//private access		
		FindMiddlePosition:function(){ 
			var document_height = $(document).height(); 
			var window_width 	= $(window).width();
			var window_height 	= $(window).height() ;
			var left  =  	Math.round((window_width / 2)- this.ImageObject.Width); 
			var top   = 	Math.round((window_height / 2)- this.ImageObject.Height) + $(document).scrollTop(); 
			return [left,top ]; 
		},
		//public access
		RemoveImageObject:function(){ 
			$('img.LoaderImage').remove(); 
			this.RemoveBlocker(); 
		},
		//private access 
		AppendBlocker:function(){ 
			$('body').append('
')
			.find(':last')
			.addClass('ajax_blocker') 
			.css({'opacity':this.BlockerOpacity,'display':'block','position':'absolute','top':0,'left':0,'height':$(document).height()+'px','width':$(document).width()+'px','z-index':1000,'background-color':'white'}); 
 
 
		},
		//private access 
		RemoveBlocker :function(){ 
			$('div.ajax_blocker').hide().remove(); 
		}  
 
	} 	
});
script>

How to use this .

Lets say your Jquery ajax request script is like this

<script> 
$('yourElement').click(function(){ 
	$.ajax({
	   type: "POST",
	   // url of server side script
	   url: "some.php",
	   //your query parameters
	   data: "name=John&location=Boston",
	   //when ajax request is complete 
	   success: function(msg){
		 alert( "Data Saved: " + msg );
	   }
	 });
}); 
script>

Integrating above script to render ajax loader Image
Note:Make sure you have included above script and Jquery in the page .

<script> 
// set value for  the 'ImagePath' property  if you want to change the default image path i.e 'images/ajax-loader.gif'
$.AjaxLoader.ImagePath = 'myimagepath.gif'; 
// set value for  the 'BlockerOpacity' property  if you want to change the default opacity of UI blocker  i.e 0 (100% transparency ) .It can be between  0 to 1 
$.AjaxLoader.BlockerOpacity = 0.5; 
// if you want to pre load the loader image otherwise it is not required. 
$.AjaxLoader.initialize(); 
 
$('yourElement').click(function(){ 
 
	//show the loader image and UI blocker becauase we are sending the ajax request.  
	$.AjaxLoader.AppendImageObject()
 
	$.ajax({
	   // request method . 
	   type: "POST",
	   // url of server side script
	   url: "some.php",
	   //your query parameters
	   data: "name=John&location=Boston",
	   //when ajax request is complete 
	   success: function(msg){
 
		 // this method removes the loader image and UI blocker from the DOM  after completion of ajax request. 
		 $.AjaxLoader.RemoveImageObject();
 
		 /*  
		 	your script to manipulate ajax response. 
 
		 */
 
	   }
	 });
}); 
script>

Prabeen's Blog » Jquery

Using Ajax in Drupal6 Select Box

Show loader image on the middle of the page on Ajax request using Jquery.