Ajax in Magento

There are some instances when we are required to use Ajax features in Magento.

Prototype javascript library used in Magento has inbuilt functionality for Ajax.

I am describing here the basic method to use ajax.

I have used version 1.6.0.0 of Magento.

I am using the existing Contacts module for explanation, you can make any new module or use any of your local module.

This code will generate the hash of the Text inserted into Name field of Contacts Form

1) Override existing controller app/code/core/Mage/Contacts/controllers/IndexController.php or you can use the same file

Paste the below mentioned code into that file inside the class

 public function hashAction()
    {
    	$name = $this->getRequest()->getParam('name');    
    	
    	if(!empty($name))
		{				
			$name = trim($name);							
			echo md5($name);			
		}else
		{
			echo 'n';
		}
    }

2) Now copy the directory app/design/frontend/base/default/template/contacts (including the file form.phtml 🙂 ) and paste it in into app/design/frontend/default/default/template

3) Copy the below shown commented code into app/design/frontend/default/default/template/contacts/form.phtml
Also check I have added the event ‘onkeyup’ in Name input text box.

	    <li class="fields">
                <div class="field">
                    <label for="name" class="required"><em>*</em><?php echo Mage::helper('contacts')->__('Name') ?></label>
                    <div class="input-box">
                        <input name="name" id="name" title="<?php echo Mage::helper('contacts')->__('Name') ?>" value="<?php echo 

$this->htmlEscape($this->helper('contacts')->getUserName()) ?>" class="input-text required-entry" type="text" onkeyup="md5_hash_get('<?php echo 

$this->getUrl('contacts/index/hash'); ?>',this.value)" />
                    </div>
                </div>  
            </li>
            <!-- copy only this code-->
            <!--start-->		
            <li>
            <div class="field">
                    <label for="namehash" class="required">Hash:</label>
                    <div class="input-box" id="nh"></div>
                </div>
            </li>     
            <!--end-->

4) Also copy the below mentioned javascript code at the end of the file. Please not Here I have showed two functions , one using GET method and other using POST method. Both will give the same result, you simply need to change the function in ‘onkeyup’ event

<script type="text/javascript">
//<![CDATA[
    var contactForm = new VarienForm('contactForm', true);
//]]>
function md5_hash_get(url,val)
{	
	if(val.replace(/\s/g,"") == '')
	{	
		alert('Invalid Request');																			
	}else
	{		
		url = url+'name/'+val;
		new Ajax.Request(url, {
		  method: 'get',		  
		  onComplete: function(req) {		
		  									  
  				if(req.responseText == 'n')
				{
					alert('Invalid Request');
				}else{
					$('nh').innerHTML = req.responseText;					
				}
		  }
		});
	}
}
function md5_hash_post(url,val)
{	
	if(val.replace(/\s/g,"") == '')
	{	
		alert('Invalid Request');																			
	}else
	{		
		new Ajax.Request(url, {
		  method: 'post',
		  parameters: { name: val },
		  onComplete: function(req) {		
		  									  
  				if(req.responseText == 'n')
				{
					alert('Invalid Request');
				}else{
					$('nh').innerHTML = req.responseText;					
				}
		  }
		});
	}
}
</script>

This is how it will look

Thats it you are done, hope this will clear the idea about using Ajax in Magento .