Using Ajax in Drupal6 Select Box

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

Storing and displaying the image stored as varbinary in MSSQL server using PHP (CodeIgniter)

admin — Mon, 05 Jul 2010 13:11:53 +0000

I am not used to MSSql server with php . MSSQL server has very less documentation compared to Mysql . So here I am writing a short snippets to upload image to MSSQL server in field type ‘varbinary’ and display the image to browser using php framework codeIgniter. Using framework for php application development is always a good idea.

Here is a php snippet to store the uploaded image in the MSSQL server ( datatype = varbinay(MAX)) .

function do_upload()
	{
		$config['upload_path'] = './uploads/';
		$config['allowed_types'] = 'gif|jpg|png';
		$config['max_size']	= '100';
		$config['max_width']  = '1024';
		$config['max_height']  = '768';
 
		$this->load->library('upload', $config);
 
		if ( ! $this->upload->do_upload())
		{
			$error = array('error' => $this->upload->display_errors());
 
			$this->load->view('upload_form', $error);
		}	
		else
		{
			$data = $this->upload->data(); 
 
 
                        $dataString = file_get_contents($data['full_path']);
                        $arrData = unpack("H*hex", $dataString);
                        $data_string = "0x".$arrData['hex'];
                        // now we can insert the $data_string variable into the sql server using it respective sql query.
			delete_files($data['full_path']) // we don't want the image to be stored in the web server. 
                        //$this->load->view('upload_success', $data);
		}
	}

Now its little tricky to render the image in the browser that is stored in the MSSQL server ,varbinary(MAX) datatype.

$this->config->item('BASEURL');?>display_image/convert_image/$row->id?> width="74" height="53" />
 
// baseurl returns the base_url().'index.php/'  (my custom config) 
// display_image is controller name  
// convert_image is method name 
//$row->id returns the primary key of that particular image row.It is used for query to the database.

Now here is my controller to render image on the browser .

 if ( ! defined('BASEPATH')) exit('No direct script access allowed');
 
class Display_Image extends Controller
{ 
	function Display_Image() 
	{ 
		parent::Controller(); 
	} 
	function convert_image()
	{ 
 
		$row =  $this->my_model->get_row($this->uri->segment(3));// to get the image data from the database where my_model is model to fetch the row. 
                $image_data = $row->image; 
		header("Content-Type: image/jpeg");// to tell browser that content type is jpeg image.  
		print $image_data; 
 
	} 
 
} 
?>

This is how we can store and display image using MSSQL server in datatype varbinary (MAX).
I hope this information is helpful who are having hard time to find the solution .

Prabeen's Blog » Php

Using Ajax in Drupal6 Select Box

Storing and displaying the image stored as varbinary in MSSQL server using PHP (CodeIgniter)