Using Basic AJAX calls within Magento

Question

I'm writing a module to carry out a simple Ajax call in Magento, but I'm unable to get it work thus far - I feel like I'm missing a vital component somewhere. These are the files I currently have:

Creare/Groupedajax/controllers/AjaxController.php:

class Creare_Groupedajax_AjaxController extends Mage_Core_Controller_Front_Action {

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

Creare/Groupedajax/etc/config.xml:

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

My Ajax Call:

$j.post("groupedajax/ajax/index", { size: $j(this).val()}, function(data) {
        $j('#results').html(data);
    });

layout/groupedajax.xml:

<?xml version="1.0"?>
<layout version="1.0">
  <groupedajax_ajax_index>
    <block type="groupedajax/groupedajax" name="root" output="toHtml" template="groupedajax/groupedajax.phtml" />
  </groupedajax_ajax_index>
</layout>

My .phtml file simply has 'test' in it at the moment. I just need my results div to return the 'test' value. I just want to know if all the bits are in place for this to work?

This is the tutorial I have followed: http://www.atwix.com/magento/ajax-requests-in-magento/

======================== SOLVED ========================

I just needed a forward slash at the beginning of my url:

$j.ajax({
        url: "/groupedajax/ajax/index",
        type: "POST",
        data: "size="+$j(this).val(),
        success: function(data) {
        $j('#results').html(data);
        }
    });

Break the problem into smaller tasks. What happens if you access the URL "example.com/groupedajax/ajax/index" directly? Since jQuery is given a relative path is it accessing the correct URL? Use Firebug to check. Do you have a block class that matches the type `groupedajax/groupedajax` or could the simpler `core/template` be used instead? — clockworkgeek, Jan 12 '12 at 12:45
When I got to /groupedajax/ajax/index I see 'test' so that's working. I have changed the type to 'core/template' because I don't have a matching Block class which was an oversight on my part. I'll keep checking... perhaps the Jquery ajax call stopped working... — Adam Moss, Jan 12 '12 at 13:05
I have figured it out - my Jquery URL script needed a forward slash at the beginning: $j.post("/groupedajax/ajax/index", { size: $j(this).val()}, function(data) { $j('#results').html(data); }); — Adam Moss, Jan 12 '12 at 13:14
@AdamMoss I'm trying to do something similar. One question, where should the JavaScript code be placed? Should I just simply create an .js file with my ajax function, place it in the js folder and create the reference to it in the xml? Thanks — Sebastian, Mar 14 '14 at 16:32

score 22 · Accepted Answer · answered Jan 12 '12 at 14:31

22

If your javascript is being output from a .phtml template file then you can use a convenience function to make the URL fully-qualified which will then be the safest way to proceed.

$j.ajax({
    url: "<?php echo $this->getUrl('groupedajax/ajax/index') ?>",
    type: "POST",
    data: "size="+$j(this).val(),
    success: function(data) {
    $j('#results').html(data);
    }
});

answered Jan 12 '12 at 14:31

clockworkgeek

37,650
9
89
127

1

Excellent, that's the solution! Thank you! – Adam Moss Jan 12 '12 at 14:46

Using Basic AJAX calls within Magento

1 Answers1

Linked