Some JavaScript code snippets in Joomla worth keeping in your stash

In this blog, I will be explaining some JavaScript snippets which are very useful while developing extensions in Joomla. Let’s start one by one.

Code Snippet 1: JavaScript for adding messages

var message = {};

message.success = [];

message.success.push('Rendering success message');

Joomla.renderMessages(message);

Joomla has provided a way to render messages using JavaScript, Joomla.renderMessages() method that make rendering uniform messages on a Joomla site very easy.  

We can use this to inform users of the result of an AJAX request without writing any extra custom code. This method renders all messages same as they do when enqueuing messages from PHP.

If you run above code snippet in the browser console by opening any Joomla website this will show an output something like displayed below

If you want to display messages according to the different type of messages you can do that too.

For example:
var message = {};
message.success = [];
message.info = [];
message.success.push('Rendering success message');
message.info.push('Rendering information message');
Joomla.renderMessages(message);

If you run above code snippet in the browser console by opening any Joomla website this will show the output something like below

Note: The message has to be an array type then and then only it will output it correctly. if you pass the string it will print the message vertically.

Code Snippet 2: JavaScript for removing the messages

Joomla.removeMessages();

Joomla has provided a way to remove messages that have rendered on the web page. All the messages that have been rendered, It will remove from the HTML regardless of message type.

If you wanna see the result of the above snippet, firstly run the snippet of renderMessages in the browser console for the Joomla website and then to remove those messages run the Joomla.removeMessages() you will see the messages are removed from the web page.

Code Snippet 3: JavaScript to get the site's base path

Joomla.getOptions(‘system.paths’).base;

Traditionally, to get the Joomla site base path we have to use the PHP functions which gives the base path and then we have to assign that variable to any JavaScript variable to use it in the JavaScript file.

To avoid this hectic process you can use the above code snippet and you will get the respective base path of your site without doing any PHP code.

Code Snippet 4: JavaScript to check valid email

Joomla.isEmail(email);

If you wanna test the string is email or not you can directly use this above snippet and pass the respective email id to this function.

For example:

Joomla.isEmail(‘[email protected]’);

This statement will return true value as the string is a valid email, You can execute this statement in browser console right away and you will see the true value as output.

Note: This method is deprecated from Joomla 4.0 and there is no replacement for it, you can use form validator for it.

Note that to work above all code snippets make sure your Joomla site is loading the core.js file. otherwise, you will get errors.     

Hope these snippets will help you guys to work with Joomla extension using JavaScript, suggestions are most welcome, do you know any of code snippet which will help to avoid writing some extra coding in Joomla? If yes, feel free to comment it out below.

Happy coding!