VF, show RemoteAction error message

Question

I'm writing VF page and I'm curious. What is the best way to show error message on page from RemoteAction? Should I just create some <div> and set to it's error message or there is way to set text to <apex:messages> from JS?

Answer 1

There are some solutions for that. I am using my own framework for showing error messages from the @RemoteAction methods. It is based on the HTML, JavaScript and Bootstrap. If some error occurrs, then I show the message text in the popup window. Bootstrap is just a nice helper framework, it is not necessarily required.

Here is a javascript function snippet that calls a RemoteAction method. If an event status have some message - it should be displayed to the user:

ClassName.remoteMethode(param, function(result, event)
{
    if(event.status) 
    {
        // All is OK
    }
    else
    {
        // Error occurred
        jQuery('#errorText').text(event.message);
        jQuery('#errorDialog').modal();
    }
}

And here is an HTML-popup based on the bootstrap example (you could create your own structure based on the requirement):

<div class="modal" id="errorDialog">
    <div class="modal-dialog" style="top: 35%;">
        <div class="modal-content" style="text-align: center;">
            <div class="modal-header">
                <span class="glyphicon glyphicon-warning-sign" style="font-size:26px; color:orange;margin: 0 10px 0 0;vertical-align: bottom;" aria-hidden="true"></span> 
                Error occurred!
            </div>
              <div class="modal-body">
                    <div id="errorText"></div>
              </div>
            <div class="modal-footer" style="text-align: center;">
                <button id="scanButton" class="btn btn-warning" type="button" onclick="jQuery('#errorDialog').modal('hide');">Close</button>
            </div>
        </div>
    </div>
</div>

And the result looks like this then: