This article started with a discussion about what we could do with the articles module in Joomla, that hadn’t been done yet. I suggested, “Customising it to make it do Ajax calls so it updates automatically”

Sounds straightforward enough doesn’t it? We all know what Ajax is, in theory. It loads new data into a page without reloading the page. Though the X, which stands for XML, is often replaced by JSON now.

This would probably work best on busy websites such as news websites where lots of content is created during the day. It could be possible to update the homepage, or a sidebar without the page being reloaded. Newsflashes would appear without the page being refreshed. Just like we see in news apps.

But how do we do that in an existing module? Overrides replace or update a view, they don’t change how the module behaves. I could have made a plugin, but I wasn’t sure that would work.

Beg, borrow, steal

I opted for copying the articles module, making it mine with a new name. This way I am not changing any core code, and it won’t be overwritten by updates.

So the first thing I did was to copy modules/mod_articles to modules/mod_articles_ajax

After that I updated the manifest file replacing folder details and the module name. I might also want to remove some of the parameters as the original articles module has quite a lot of options.

I also amended the namespace to try and avoid any issues if I used this module on the same page as the articles one:

<namespace path="src">Joomla\Module\ArticlesAjax</namespace>

And renamed the manifest file: mod_articles_ajax.xml

I made changes in the services/provider.php file and renamed the Helper to ArticlesAjaxHelper.php

Installing the module

As I did most of the copying and renaming via a File Manager, when it came to installing the module, it appeared directly in my Extensions: Discover window. Alternatively zip everything and then upload via System > Install > Extensions

If everything goes as expected, you’ll see a confirmation message and then when clicking into Site Modules > New the module should be available.

You will see that language strings aren’t pulled through from the Articles module, so I copied those files and named them with the word "ajax" appended.

The harder parts

Copying files and renaming namespaces is the easy bit. What I wanted was to make an Ajax instance that loads the articles into my default.php view file.

So within the ArticlesAjaxHelper (as I’ve now called it) we have the method getAjaxArticles and that’s what I’m aiming to call with javascript.

I added this to default.php

$wa->registerScript('mod_articles_ajax.ajax-fetch', 'modules/mod_articles_ajax/js/ajax-articles.js', [], [], ['core']);

$wa->useScript('mod_articles_ajax.ajax-fetch');

>

<div id="articles-container">

<p>Loading latest articles...</p>

</div>

The core of the javascript file relies on this call:

const response = await fetch('index.php?option=com_ajax&module=articles_ajax&format=json&method=getAjaxArticles');

On “success” the results.data is passed to a function called updateArticlesUI which creates a list of articles with title and introtext, that is inserted into the articles-container element in my default view. And it will make that call every x minutes / hours that the page is loaded in the web browser.

Only it didn’t work as easily as that.

Testing

My initial tests showed nothing in the page and I was only slightly encouraged when the screen turned red with a big Error 500 message, which meant at least the module was loading. A few tweaks with the Dispatcher.php file meant I was calling the correct method and I got something appearing on screen.

The bit that I didn’t understand was to do with rendering. We’re using com_ajax to make the call to a method in the module and my test was to do this straight from the browser using:

https://{my _domain}/index.php?option=com_ajax&module=articles_ajax&format=json&method=getAjaxArticles

Which gave me some JSON response but it turned out to be saying the method wasn’t found. After more searching I found I needed to put a “proxy” helper in the module root. And then I may have used some “legacy” workaround rather than the Joomla 5 way to make a database call via a method called getAjaxArticlesAjax (where Ajax is appended by com_ajax)

In Action

The expression is “like watching paint dry” so I have sped up the sequence so the call is made every 5 seconds. You can see articles appearing as they’re being published. There are refinements that can be made to the parameters for what is displayed but this video shows the order in which the articles are published.

Conclusion

This is definitely a “proof of concept” where I was just relieved to see content appear on screen rather than considering how I should have done this "properly". If anyone wants to discuss this further I will happily share my working code via GitHub. 

There’s a lot to consider in using Ajax this way. Do I really need to refresh my articles list every 5 minutes? Probably not. In my case once a month might work. But if you’re a large news website and news is being updated by the hour, or even quicker when it's breaking news, then “pushing” changes to your article list might be useful.