how to display message in joomla using javascript

Question

I want to display a message after clicking a button in Joomla using:

Joomla.renderMessages({"success":"this is test message"});

but it displays the characters vertically and in descending order, whereas I want to display it like so:

this is test message

How can I achieve this?

Answer 1

It expects the messages to be passed in an array, even if there is only a single message, ie

Joomla.renderMessages({"success":["this is test message"]});

The formatting example given in the source code for the renderMessages function (\media\system\js\core-uncompressed.js) is:

var messages = {
     "message": ["Message one", "Message two"],
     "error": ["Error one", "Error two"]
};

Answer 2

The above answer is great, below is some code to add a title to the message. As a side note, you can also load other strings & use those to create a custom alert. The title of the string is added to the alerts main class.

Joomla.JText.load({success: "Success", custom_alert: "Custom Alert"});

Joomla.renderMessages({'success': ['This has a title!'], 'custom_alert': ['This has a title!']});

As you can see above the custom alert has the class alert-custom_alert added.

Answer 3

I want to add one more layer to complete the above 2 posts which are really good. If you want to use the translation service from Joomla, you can do that by doing the following:

1. Add this in your php code, I add this to my default.php file at the top

   JText::script('COM_YOURCOMPONENT_YOUR_MESSAGE');
   

2. In your JS file, add this code to the logic where your want to display the message

   var message = Joomla.JText._('COM_YOURCOMPONENT_YOUR_MESSAGE');
   Joomla.JText.load({success: "Success"});
   Joomla.renderMessages({'success': [message]});
   

3. In your Language/en-GB/en-GB.com_yourcomponent.ini file, add the translation

   COM_YOURCOMPONENT_YOUR_MESSAGE="your message"