How To AJAX
it always starts at the config.xml:
declare your router: use the same router name as the content of the
frontName
tag<frontend> <routers> <carfilter> <use>standard</use> <args> <module>BM_Sidebar</module> <frontName>carfilter</frontName> </args> </carfilter> </routers> </frontend>
declare your layout file (you did that)
in your layout file you need 2 handles: 1 for the init state and one for the ajax. The handles match the url you are working with:
<layout version="0.1.0"> <carfilter_ajax_index> <reference name="head"> <action method="addItem"><type>skin_js</type><name>js/carfilter.js</name></action> </reference> <reference name="content"> <block type="core/template" name="carfilter" as="carfilter" template="carfilter/init.phtml" /> </reference> </carfilter_ajax_index> <carfilter_ajax_ajax> <remove name="right"/> <remove name="left"/> <block type="core/template" name="carfilter_ajax" as="carfilter_ajax" template="carfilter/ajax.phtml" output="toHtml" /> </carfilter_ajax_ajax> </layout>
note: pay attention to the
output
attribute in the declaration of the block for the AJAX callcreate your phtml files (the ones you declared in the layout file):
init.phtml: create the div that will be updated with the result of the AJAX and initiate the javascript object
first state <div id="div-to-update"></div> <script type="text/javascript"> //<![CDATA[ new Carfilter('<?php echo $this->getUrl('carfilter/ajax/ajax') ?>', 'div-to-update'); //]]> </script>
ajax.phtml: the html you want to show with the AJAX
var Carfilter = Class.create(); Carfilter.prototype = { initialize: function(ajaxCallUrl, divToUpdate) { this.url = ajaxCallUrl; this.div = divToUpdate; this.makeAjaxCall(); }, makeAjaxCall: function() { new Ajax.Request(this.url, { onSuccess: function(transport) { var response = transport.responseText.evalJSON(); $(this.div).update(response.outputHtml); }.bind(this) }); } };
the controller: 2 actions in this example, the index when the page loads, and the ajax:
<?php class BM_Sidebar_AjaxController extends Mage_Core_Controller_Front_Action { public function indexAction() { $this->loadLayout(); $this->_initLayoutMessages('customer/session'); $this->getLayout()->getBlock('head')->setTitle($this->__('Page title')); $this->renderLayout(); } public function ajaxAction() { $isAjax = Mage::app()->getRequest()->isAjax(); if ($isAjax) { $layout = $this->getLayout(); $update = $layout->getUpdate(); $update->load('carfilter_ajax_ajax'); //load the layout you defined in layout xml file $layout->generateXml(); $layout->generateBlocks(); $output = $layout->getOutput(); $this->getResponse()->setHeader('Content-type', 'application/json'); $this->getResponse()->setBody(Mage::helper('core')->jsonEncode(array('outputHtml' => $output))); } } }
And for answering your question, you don't necessarily need to create your own block (in my example I haven't), but you will probably want to to have the functions needed in the template files in a handy place