Module and ajax call

Question

I'm trying to create an ajax call to a custom controller.

I've been following: http://www.atwix.com/magento/ajax-requests-in-magento/ - which gives a brief example of how to create.

So I have the following files:

app/etc/moudles/BM_Sidebar.xml

<?xml version="1.0"?>
<config>
  <modules>
    <BM_Sidebar>
        <active>true</active>
        <codePool>local</codePool>
    </BM_Sidebar>
  </modules>
</config>

app/code/local/BM/Sidebar/controllers/IndexController.php

class BM_Sidebar_IndexController extends Mage_Core_Controller_Front_Action {

    public function indexAction() {
        echo "test data";
    }
}

app/code/local/BM/Sidebar/controllers/etc/config.xml

<?xml version="1.0"?>
<config>
  <modules>
    <BM_Sidebar>
      <version>0.1.0</version>
    </BM_Sidebar>
  </modules>
  <frontend>
    <routers>
      <sidebar>
        <use>standard</use>
        <args>
          <module>BM_Sidebar</module>
          <frontName>carfilter</frontName>
        </args>
      </sidebar>
    </routers>
    <layout>
      <updates>
        <sidebar>
          <file>sidebar.xml</file>
        </sidebar>
      </updates>
    </layout>
  </frontend>
</config>

I'm struggling to work out exactly what I'd need to put into sidebar.xml

Do I need to create a block class?

Thanks

Answer 1

How To AJAX

1. it always starts at the config.xml:

   2. 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>
      

   3. declare your layout file (you did that)

2. 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 call

3. create your phtml files (the ones you declared in the layout file):

   6. 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>
      

   7. 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)
              });
          }
      };
      

4. 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