How to make an Ajax request in Joomla Component

Question

This a screen shot of what I get when I call my ajax request:

How do I run only the task, without printing the whole page? This is my ajax call:

$.ajax
({
type: "POST",
url: "index.php?option=com_similar&task=abc",
    data: {
        id: id,
        name: name,
        similar_id: similar_id,
    },
cache: false,
success: function(html)
{
$("#flash").fadeOut("slow");
$("#content"+similar_id).html(html);
} 
});
});

$(".close").click(function()
{
$("#votebox").slideUp("slow");
});

});

Answer 1

Don't go with exit or die, Joomla! has it's nice way of dealing with this stuff.

The answers below are tested in Joomla! 2.5 & 3 (for 1.5. may work as well).

---

General

Your URL for the task needs to look like this:

index.php?option=com_similar&task=abc&format=raw

You than create the controller which will use the view, let's say Abc, which will contain the file view.raw.html (identical to a normal view file).

Below you have the code for generate a raw HTML response:

/controller.php

public function abc() 
{
    // Set view
    JRequest::setVar('view', 'Abc');
    parent::display();
}

/views/abc/view.raw.php

<?php
defined('_JEXEC') or die;

jimport('joomla.application.component.view');

class SimilarViewAbc extends JView
{
    function display($tpl = null)
    {
        parent::display($tpl);
    }
}

/views/abc/tmpl/default.php

<?php

echo "Hello World from /views/abc/tmpl/default.php";

Note: This is the solution I would use if I had to return HTML (it's cleaner and follows Joomla logic). For returning simple JSON data, see below how to put everything in the controller.

---

If you make your Ajax request to a subcontroller, like:

index.php?option=com_similar&controller=abc&format=raw

Than your subcontroller name (for the raw view) needs to be abc.raw.php.

This means also that you will / may have 2 subcontrollers named Abc.

If you return JSON, it may make sense to use format=json and abc.json.php. In Joomla 2.5. I had some issues getting this option to work (somehow the output was corrupted), so I used raw.

---

If you need to generate a valid JSON response, check out the docs page Generating JSON output

// We assume that the whatver you do was a success.
$response = array("success" => true);
// You can also return something like:
$response = array("success" => false, "error"=> "Could not find ...");

// Get the document object.
$document = JFactory::getDocument();

// Set the MIME type for JSON output.
$document->setMimeEncoding('application/json');

// Change the suggested filename.
JResponse::setHeader('Content-Disposition','attachment;filename="result.json"');

echo json_encode($response);

You would generally put this code in the controller (you will call a model which will return the data you encode - a very common scenario). If you need to take it further, you can also create a JSON view (view.json.php), similar with the raw example.

---

Security

Now that the Ajax request is working, don't close the page yet. Read below.

Don't forget to check for request forgeries. JSession::checkToken() come in handy here. Read the documentation on How to add CSRF anti-spoofing to forms

---

Multilingual sites

It may happen that if you don't send the language name in the request, Joomla won't translate the language strings you want.

Consider appending somehow the lang param to your request (like &lang=de).

---

New in Joomla 3.2! - Joomla! Ajax Interface

Joomla now provides a lightweight way to handle Ajax request in a plugin or module. You may want to use the Joomla! Ajax Interface if you don't have already a component or if you need to make requests from a module your already have.