Ajax call not working

Question

I'm trying to call a .phtml via an ajax call and I followed this example on stackoverflow but I'm either missing some aspect or just doing it wrong. When the ajax runs it gets a 404 and I did try to view it directly through the browser and it could not find it. Based on this I assume some aspect of the file structure that I set up is wrong but I can't figure what exactly.

I have controller located at local/CheckoutAjax/controllers/AjaxController.php

    <?php
    class Checkoutajax_AjaxController extends Mage_Core_Controller_Front_Action {

    public function indexAction() {
          $this->loadLayout();
          $this->renderLayout();
      }
   }

In local/CheckoutAjax/etc/config.xml I have the following

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

I have this in mytemplate/default/layout/checkoutajax.xml

  <?xml version="1.0"?>
  <layout>
  <checkoutajax_ajax_index>
    <block type="checkout/checkoutajax" name="root" output="toHtml" template="checkoutajax/index.phtml" />
 </checkoutajax_ajax_index>
 </layout>

and finally I have in mytemplate/default/template/checkoutajax/index.phtml

   <?php
   echo 'this is a test'

Finally this is the ajax call

   JQuery.ajax({
            url: "/checkoutajax/ajax/index",
            type: "POST",
            data: data,
            success: function(data) {
            $j('#results').html(data);
            document.getElementsByClassName('minicart-content')[0].style.display = 'block';
            }
        });

All help is greatly appreciated.

Answer 1

Some troubleshooting tips:

Do you have a module registered in app/etc/modules?

If not, it should be as such:

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

This module naming looks incorrect - it is expected to be separated with an underscore indicating namespace -- so, not this:

<module>Checkoutajax</module>

All modules are named as Company_Module, etc. Checkoutajax_AjaxController is then not a valid classname. Check your general PHP error log (or Apache logs) and you should see something to the effect of class not exists.

Change/update this to ThomasRyan_Checkoutajax or similar. All instances of Checkoutajax will need to be updated in the module xml definition.

The frontName also has issues, namely, it should be lowercase:

<frontName>Checkoutajax</frontName>

I'm not sure if Magento forces the lowercase on the routename.

The updated code, then:

<?xml version="1.0"?>
<config>
  <modules>
    <ThomasRyan_Checkoutajax>
      <version>0.1.0</version>
    </ThomasRyan_Checkoutajax>
  </modules>
  <frontend>
    <routers>
      <Checkoutajax>
        <use>standard</use>
        <args>
          <module>ThomasRyan_Checkoutajax</module>
          <frontName>checkoutajax</frontName>
        </args>
      </Checkoutajax>
    </routers>
    <layout>
     <updates>
       <checkoutajax>
         <file>checkoutajax.xml</file>
       </checkoutajax>
     </updates>
   </layout>
 </frontend>
</config>

And the controller:

<?php

class ThomasRyan_Checkoutajax_AjaxController extends Mage_Core_Controller_Front_Action {

    public function indexAction() {
        $this->loadLayout();
        $this->renderLayout();
    }
}

Edit:

This is just a quick update to explain how routes/controllers/actions work in Magento. Let's say that this is your URL:

www.yourstore.com/checkoutajax/ajax/index

This represents three different entities:

• checkoutajax is the route name, also called frontName in the module definition XML
• ajax here represents the controller name. This controller file should be named AjaxController.php and located in the /controllers directory of your module.
• index represents the indexAction method.

So, to visualize:

www.yourstore.com/checkoutajax/ajax/index
---------route--------^
---------controller-------------^
---------action-----------------------^

Answer 2

You have a typo in your filename. Controller file should be named local/CheckoutAjax/controllers/AjaxController.php (without an s)