How to use AJAX in magento

How to use AJAX in magento:
In magento, some of the sections will use of ajax is the good idea to reduce the page loading timing. Ex: If you are using your custom coupon code concept in cart page, will use this ajax. With out page load we can apply the coupon code amount to the total section (code customization we have to do when your applying the custom coupon code).In this scenario we have to use JSON response is the good idea also we have to refresh our total block.

1. Place Textbox with Submit button or href link (with Ajax call, not page load) in cart page.
2. Create AjaxController in Your module (or extend default module with default controller, here AjaxController is my custom controller)
3. Add below code into Submit button or href.
Ex: here am using href
<a href=”javascript:void(0);” onclick=”return callajaxRequestController(Param1,Param2)”>Submit</a>

<script type=”text/javascript”>
function callajaxRequestController(p1,p2)
{
var url=”;
try {
jQuery(“#loadderimage”).show();
jQuery.ajax({
url : ‘<?php echo ‘BASEURL/MyModule/MyController/MyAcction/’;?>’,
dataType : ‘json’,
type : ‘POST’,
data: { p1: 10, p2 : 100},
success : function(data){
if(data.status == 1){
jQuery(“#loadderimage”).hide();
jQuery(‘.payment-totals-table’).replaceWith(data.refreshtotalBLK);
}else{
if(data.status == 0){
alert(data.message);
}
}
}
});
}catch(e) {}
}
</script>

4. Now your ajax acction is ready from template file. Now you have to write your acction from controller file.Like below
public function MyAcction(){
$p1 = Mage::app()->getRequest()->getPost(‘p1’);
……….. write yourcode …….
…………………………….
……………………………
$response[‘status’] = 0;
$sidebar= $this->getLayout()->createBlock(‘checkout/cart_totals’)->setTemplate(‘checkout/cart/totals.phtml’)->toHtml();
$response[‘refreshtotalBLK’] = $sidebar;
return $this->getResponse()->setBody(Mage::helper(‘core’)->jsonEncode($response));
}

5. Yes now your controller file also ready. Once yor call your request, the controller action will trigger also your action will send your response as Json. In your ajax call you can get this json value and use as it is.

6. jQuery(‘.payment-totals-table’).replaceWith(data.refreshtotalBLK), this code will use to refresh your total block once your changes is done from the total section

7 thoughts on “How to use AJAX in magento”

  1. Hello Sir,
    I’m new in magento, I have used simple ajax in my file, i want to change the status order on “Cancel” link click under my account.
    I have write the bellow code for that.

    <a href="#" onclick="javascript:orderstatusval(this.id);" id="entity_id ?>” class=”cancel”>__(‘Cancel’) ?>

    function orderstatusval(canid) {
    arguments0 = {
    arg1: canid,
    };
    jQuery.ajax({
    type: “POST”,
    url: “”,
    data: {arguments: canid},
    success: function(data) { alert(data);
    window.location.reload(true);
    }
    });
    return false;
    }

    //test.phtml
    echo $_POST[‘arguments’];
    require_once (‘/var/www/xxxx/app/Mage.php’))
    Mage::app(‘default’);
    if($_POST[‘arguments’]!=””) {
    $order = Mage::getModel(‘sales/order’)->load($_POST[‘arguments’]);
    $order->setState(Mage_Sales_Model_Order::STATE_CANCELED, true)->save();
    }

    I have get the corresponding order id in test.phtml
    But, in test.phtml file the magento functions not works.
    Please, give me solution soon ,how can I use the functions of magento in test.phtml file???

    Thanks,

    1. Hi ,
      Magento function is not working like , you have mentioned but what function did you declared there ?. Try to use below code, also mentioned your status in the function (what status you want to update)
      Mage::getModel(‘catalog/product_status’)->updateProductStatus($product->getId(), 0, $status);
      $product->save();
      I guess this code will helpful to resolve your issue

Leave a Reply