Putting AJAX in a Joomla Module

Question

I've made a basic Joomla module for my site as a shoutbox. But I'd like to put AJAX in it (I know a similar module with AJAX already exists on JED but this more a project for me to learn how AJAX works in a Joomla module).

The usual AJAX stuff where you redirect to a new php file obviously doesn't work as the file will not be defined as

   defined('_JEXEC') or die('Restricted access');

will fail in a new page. And defining _JEXEC to be equal to one (as I've read in several posts on SO) as far as I've read on Joomla Docs is a security risk as it provides an entry point onto the site.

The way the other shoutbox module I've seen does is to point back at a function in the helper.php file. Which makes sense to me as that is where all the functions should normally be stored. However I'm unclear as to how to the module was accessing the helper.php file on a onSubmit() (or a related) command and was hoping someone could shed some light on this.

I don't actually need anything specific to my shoutbox module - this is more a question of how to get AJAX functionality in Joomla modules and how it is arranged

Answer 1

The other two were onto the right track you need to remember that when you make your AJAX call you can't directly access a php file in Joomla. So instead it's better to make calls to your module. In this case and have the module check for variables in your POST or in the URL.

I'm a big fan of JQuery's ajax it's a lot more self contained than the method the guy who built that shoutbox used.

$( "#addShout" ).click( function(event, ui) {
                $.ajax({
                    type: 'GET',
                    url: "<?php echo JURI::base() . "index.php?option=mod_mymodule&task=getCustomerJson&selectedCustomer="?>"  + encodeURIComponent(value),
                    success:function(data){
                        $('#shouts').append(data);
                    },
                    error:function(){
                        $('#errors').html('<p class="error"><strong>Oops!</strong> Try that again in a few moments.</p>');
                    }
                });  
        });

Then as I mentioned in my comment to Valentin you:

$task = JRequest::getVar('task'); 
if($task == "getCustomerJson"){mySuperHelper::getCustomerJson();}

You only call the necessary functions when the variables exist.

To explain part of the process it's kinda like this:

1. If there are no variables in the POST or URL it will simply display the module the way Joomla expects.
2. If the variable are detected call the method to add it to the database and the javascript function that will add it the the display. Also prevent the normal display from happening.

The module you referenced was quite interesting. The helper functions that the main file referenced does what a model would normally handle in MVC and the Javascript was also kinda all over. If you really want to understand how that one worked you really need to dig into the fatAjax.js file as it contains all of the AJAX and sets the variables that the mod_shoutbox.php listens for.

Answer 2

Fron Joomla 3.2 if you needed to make an AJAX request in Joomla! from a custom module or plugin, you can build the URL as below.

index.php?option=com_ajax&module=your_module_name&method=YourMethodName&format=json

Explanation of each parameter

1. index.php?option=com_ajax : ALL requests must be routed through com_ajax.

2. module=your_module_name: The first part of this is the type of extension you're using. This can either be 'module' or 'plugin'. The second part is the name of the extension. please take care you're not including the prefix 'mod_' or 'plg_', just the name.

3. method=YourMethodName: This is the method name that you are trying to call. If you're using this in a module then the method must be appended with 'Ajax'. So, the method represented here will be YourMethodNameAjax. If you're using this on a plugin, the method must be prepended with 'onAjax'. So, the method represented here will be onAjaxYourMethodName.

Check more at Joomla doc