Joomla - enqueueMessage with title and dismiss button on the front end

Question

I'm returning a notice from an ajax call with

$app = JFactory::getApplication();
$app->enqueueMessage('Joomla notice', 'info');

On the front end this results in the following (note empty heading):

<div id="system-message-container">
  <div id="system-message" class="alert alert-info">
    <h4 class="alert-heading"></h4>
    <div>
      <p>Joomla notice </p>
    </div>
  </div>
</div>

However I want to display the notice with a heading and a dismiss button too like it does in the backend, i.e.

<div id="system-message-container">
  <button type="button" class="close" data-dismiss="alert">×</button>
  <div class="alert alert-info">
    <h4 class="alert-heading">Info</h4>
    <p>Joomla notice</p>
  </div>
</div>

Is there a Joomla way to do this or do I have to come up with a work around?

Answer 1

The message is rendered in media/system/js/core.js by the Joomla.renderMessages function. You may override it in your template with

jQuery(function() {
     Joomla.renderMessages = function(messages) {
       // copy / adapt the original function here.
     }
});

Also, non-ajax messages can be customized by the html/message.php template override.

Answer 2

After you en-queued your message I suggest to send the message like

echo new JResponseJson($data);
JFactory::getApplication()->close();

Then you can on the client side work on the messages array like @Riccardo's solution. For example mine ajax success function looks like

success: function(responseText){
    var json = jQuery.parseJSON(responseText);
    Joomla.renderMessages(json.messages);
    ....

You can find the code here https://github.com/Digital-Peak/DPAttachments/blob/master/com_dpattachments/admin/libraries/dpattachments/core.php#L162