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

Greeley

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.

Unsnap

Just FYI I've finally had time to implement this and so have submited a few tweaks I needed to make it work! Thanks again for the post :) – Greeley

@Unsnap Hi Joe, could I ask for your attention at my new question? stackoverflow.com/q/49422168/2943403 – Whitebook

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

Imp

Answer 3

From my knowledge you can't do AJAX calls from the module to a function in the module itself (or similar).

You can build a component and create a view which returns RAW or JSON as a response. Because Joomla! itself will be called you can use the Joomla! API & all the goodies from it. It's also a security thing, because if you need to get sensitive data, you can also do ACL / user checks.

When you can call from the module something like:

index.php?option=com_mycomponent&task=getJson

The article Generating JSON output is a good starting point.

Estriol

I think this module does :) I'm ok with doing it through a component - it's a lot simpler doing it that way as you say. extensions.joomla.org/extensions/communication/shoutbox/43 – Greeley

You can simply do a $task = JRequest::getVar('task'); if($task == "getJson"){mySuperHelper::getJson();} – Unsnap

Answer 4

jQuery(document).ready(function () { 
    jQuery(".btnshow").click(function () {
        var pagename, pid;
        pid=jQuery(this).attr('rel');
        pagename="<?php echo JURI::root();?>index.php?option=com_componentname&view=result&Id="+pid;    
        jQuery.get(pagename, function (data) {
            jQuery('.para1').html(data);
        });
    }); 
});


<a href="JavaScript:void(0);" rel="<?php echo $id; ?>" title="<?php echo $id; ?>"><img src="<?php echo $image; ?>" alt="" /></a>

Publia

But can you replace com_componentname with mod_modulename and add in access the function within the helper.php class? As I said this is to access a module rather than component function. I've added in the JED link to the module I was trying to understand in my original post – Greeley

Answer 5

You can achieve the desired result by the following way:

$( "#addShout" ).click( function(event, ui) {
    $.ajax({
        type: 'GET',
        url: "<?php echo JURI::base() . "index.php?option=com_ajax&module=module_name_withot_prefix&method=methodName&anyparams="?>"  + encodeURIComponent(anyparamsvalue) + "&format=json",,
        success:function(data){
            $('#shouts').append(data);
        },
        error:function(){
            $('#errors').html('<p class="error"><strong>Oops!</strong> Try that again in a few moments.</p>');
        }
    });  
});

In the module helper file, you'll need to have a method with name 'methodName'.

Cp