22

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);
        }
    });
4
  • 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? Commented Jan 12, 2012 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
    Commented Jan 12, 2012 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
    Commented Jan 12, 2012 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
    Commented Mar 14, 2014 at 16:32

1 Answer 1

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);
    }
});
1
  • 1
    Excellent, that's the solution! Thank you!
    – Adam Moss
    Commented Jan 12, 2012 at 14:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.