Concrete5 shows a list of formatted error messages at the top of a single page or in a box at the top of a dashboard page. Extend this with messages from JavaScript or Ajax.

JavaScript acting within the page can also need to report error messages to the user, or report messages from Ajax responses from the server. These messages can be shown as an extension of the existing Concrete5 message lists.

Dashboard Messages

A typical dashboard error message will come from html like:

<div id="ccm-dashboard-content-inner">
  <div class="message error">
    <strong>The following errors occurred when attempting to process your request:</strong>
    <ul>
      <li>Error message text from the dashboard page controller</li>
    </ul>
  </div>

  <!-- rest of dashboard content -->

</div>

To show a new message in this context, we can create a small JavaScript function:

var showDashboardErrorMessage = function (my_message){
  // If no messages yet, create a container
  if ($('#ccm-dashboard-content-inner div.message').length < 1){
    $('#ccm-dashboard-content-inner').
      prepend(
        '<div class="message error"><strong>'+
        'The following errors occurred when attempting to process your request:'+
        '</strong><ul></ul></div>'
        );
  }
  // Add message to container
  $('#ccm-dashboard-content-inner div.message ul').
    append('<li>'+my_message+'</li>');
};

The first part of the function checks to see if a list structure to contain the messages already exists, then creates it at the top of '#ccm-dashboard-content-inner' if it does not already exist.

The second part of the function appends the new message to the end of the list of messages.

Any JavaScript executing within the page can now show an error message with a call to our function:

showDashboardErrorMessage ('Error message from JavaScript processing');

Single Page Messages

Similar html is used within single pages for displaying messages. The list of error messages will be within an unordered list with class 'ccm-error'. However, the html is unfortunately not as standardised across single pages or themes. The following is consequently a generalisation that may need adapting to a particular single page and theme.

The example below is taken from the plain yoghurt Concrete5 login page, as shown in the on-line Concrete5 eCommerce demonstration. Here content is wrapped in a div with the id of 'ccm-theme-wrapper'.

<div id="ccm-theme-wrapper">
  <ul class="ccm-error">
    <li>Invalid username or password.</li>
  </ul>

  <!-- rest of single page content including the login form -->

</div>

Our JavaScript function is similar, though this time tests for an unordered list with the class 'ccm-error', again creating a list if one does not already exist.

var showSinglePageErrorMessage = function (error_message){
  // If no messages yet, create a container
  if ($('ul.ccm-error').length < 1){
    // Addapt to specific single page structure
    $('#ccm-theme-wrapper').
      prepend(
        '<ul class="ccm-error"></ul>'
        );
  }
  // Add message to container
  $('#ccm-theme-wrapper ul.ccm-error').
    append('<li>'+error_message+'</li>');
};

JavaScript executing within the page can now show an error message with a call to the function:

showSinglePageErrorMessage ('Error message from JavaScript processing');

A typical use here would be for displaying messages from JavaScript performing validation before the login form is submitted. However, in this case it may be more appropriate to show validation error messages next to the offending input element. The technique becomes more appropriate in more complex situations, such as displaying messages from the server following an Ajax transaction.

Read more How-tos by JohntheFish