<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>A K Chauhan's Blog &#187; AJAX</title>
	<atom:link href="http://www.akchauhan.com/tag/ajax/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.akchauhan.com</link>
	<description>PHP, MySql, JavaScript, JQuery, Prototype, Drupal, HTML, CSS and more...</description>
	<lastBuildDate>Mon, 02 Jan 2012 03:29:10 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>How use AJAX in DRUPAL</title>
		<link>http://www.akchauhan.com/how-use-ajax-in-drupal/</link>
		<comments>http://www.akchauhan.com/how-use-ajax-in-drupal/#comments</comments>
		<pubDate>Mon, 22 Jun 2009 04:26:41 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[AJAX]]></category>
		<category><![CDATA[Drupal]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.akchauhan.com/?p=442</guid>
		<description><![CDATA[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 [...]]]></description>
			<content:encoded><![CDATA[<p><div id="attachment_393" class="wp-caption aligncenter" style="width: 403px"><img src="http://www.akchauhan.com/wp-content/uploads/2009/06/drupal-ajax.jpg" alt="How use AJAX in DRUPAL" title="How use AJAX in DRUPAL" width="393" height="198" class="aligncenter size-full wp-image-445" /><p class="wp-caption-text">How use AJAX in DRUPAL</p></div><br />
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.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span>
<span style="color: #666666; font-style: italic;">/*product.module*/</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">function</span> product_menu<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  	<span style="color: #000088;">$items</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000088;">$items</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'product'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span>
		<span style="color: #0000ff;">'page callback'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'drupal_get_form'</span><span style="color: #339933;">,</span>
		<span style="color: #0000ff;">'page arguments'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'product'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
    		<span style="color: #0000ff;">'access arguments'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #009900; font-weight: bold;">TRUE</span><span style="color: #339933;">,</span>
    		<span style="color: #0000ff;">'type'</span> <span style="color: #339933;">=&gt;</span> MENU_CALLBACK<span style="color: #339933;">,</span>
  	<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
  	<span style="color: #000088;">$items</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'product/check_name'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span>
    		<span style="color: #0000ff;">'page callback'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'check_name'</span><span style="color: #339933;">,</span>
    		<span style="color: #0000ff;">'access arguments'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #009900; font-weight: bold;">TRUE</span><span style="color: #339933;">,</span>
    		<span style="color: #0000ff;">'type'</span> <span style="color: #339933;">=&gt;</span> MENU_CALLBACK<span style="color: #339933;">,</span>
  	<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
  	<span style="color: #b1b100;">return</span> <span style="color: #000088;">$items</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">function</span> product<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000088;">$path</span> <span style="color: #339933;">=</span> drupal_get_path<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'module'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'product'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	drupal_add_js<span style="color: #009900;">&#40;</span><span style="color: #000088;">$path</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">'/product.js'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'module'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000088;">$form</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'product_name'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span>
		<span style="color: #0000ff;">'#title'</span> <span style="color: #339933;">=&gt;</span> t<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Product Name'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
		<span style="color: #0000ff;">'#type'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'textfield'</span><span style="color: #339933;">,</span>
		<span style="color: #0000ff;">'#required'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #009900; font-weight: bold;">TRUE</span><span style="color: #339933;">,</span>
		<span style="color: #0000ff;">'#size'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #cc66cc;">30</span><span style="color: #339933;">,</span>
		<span style="color: #0000ff;">'#description'</span> <span style="color: #339933;">=&gt;</span> t<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Please enter product name.'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
	<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000088;">$form</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'check_name'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span>
		<span style="color: #0000ff;">'#type'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'markup'</span><span style="color: #339933;">,</span>
		<span style="color: #0000ff;">'#value'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">&quot;&lt;a href='#' id='check_name'&gt;&quot;</span> <span style="color: #339933;">.</span> t<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Check Product Name'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">&quot;&lt;/a&gt;&lt;br/&gt;&quot;</span><span style="color: #339933;">,</span>
	<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
&nbsp;
	<span style="color: #000088;">$form</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'status'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span>
		<span style="color: #0000ff;">'#type'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'markup'</span><span style="color: #339933;">,</span>
		<span style="color: #0000ff;">'#value'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">&quot;&lt;span id='status'&gt;&lt;/span&gt;&lt;br/&gt;&quot;</span><span style="color: #339933;">,</span>
	<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
&nbsp;
	<span style="color: #000088;">$form</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'submit'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span>
		<span style="color: #0000ff;">'#type'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'submit'</span><span style="color: #339933;">,</span>
		<span style="color: #0000ff;">'#value'</span> <span style="color: #339933;">=&gt;</span> t<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Submit'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
	<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000088;">$form</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'cancel'</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span>
		<span style="color: #0000ff;">'#type'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'markup'</span><span style="color: #339933;">,</span>
		<span style="color: #0000ff;">'#value'</span> <span style="color: #339933;">=&gt;</span> l<span style="color: #009900;">&#40;</span>t<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Cancel'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'product_mgmt'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
	<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
	<span style="color: #b1b100;">return</span> <span style="color: #000088;">$form</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">function</span> check_name<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000088;">$name</span> <span style="color: #339933;">=</span> <span style="color: #990000;">strtolower</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$_GET</span><span style="color: #009900;">&#91;</span><span style="color: #0000ff;">'name'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000088;">$query</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;SELECT COUNT(*) AS total FROM {product} WHERE LOWER(product_name) LIKE ('<span style="color: #009933; font-weight: bold;">%s</span>')&quot;</span><span style="color: #339933;">;</span>
	<span style="color: #000088;">$rs</span> <span style="color: #339933;">=</span> db_query<span style="color: #009900;">&#40;</span><span style="color: #000088;">$query</span><span style="color: #339933;">,</span> <span style="color: #000088;">$name</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #000088;">$info</span> <span style="color: #339933;">=</span> db_fetch_object<span style="color: #009900;">&#40;</span><span style="color: #000088;">$rs</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #000088;">$total</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$info</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">total</span><span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$total</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">&quot;$('#status').html('This product is available.');&quot;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #b1b100;">else</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">&quot;$('#status').html('This product is not available.');&quot;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<p>Don&#8217;t return anything in &#8220;<strong>check_name()</strong>&#8221; function otherwise it will return the whole page when we access &#8220;<strong>product/check_name</strong>&#8221; path through AJAX.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">/*product.js*/</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// JavaScript Document</span>
$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#check_name'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'href'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'javascript:void(0);'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#edit-product-name'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">keydown</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>event<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#status'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#check_name'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> <span style="color: #000066;">name</span> <span style="color: #339933;">=</span> $.<span style="color: #660066;">trim</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#edit-product-name'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
		<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000066;">name</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#status'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Please enter product name.'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
&nbsp;
		$.<span style="color: #660066;">ajax</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
   			type<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;GET&quot;</span><span style="color: #339933;">,</span>
			url<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;/product/check_name&quot;</span><span style="color: #339933;">,</span>
   			data<span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;name=&quot;</span> <span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">encodeURI</span><span style="color: #009900;">&#40;</span><span style="color: #000066;">name</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
   			success<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>msg<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
				<span style="color: #000066; font-weight: bold;">eval</span><span style="color: #009900;">&#40;</span>msg<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   			<span style="color: #009900;">&#125;</span>
 		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://www.akchauhan.com/how-use-ajax-in-drupal/feed/</wfw:commentRss>
		<slash:comments>16</slash:comments>
		</item>
	</channel>
</rss>

