CODEWITHSUNDEEP
javascriptjqueryjsfprimefaces
John Alexander Betts
John Alexander Betts

Reputation: 5206

How to set a message to a p:messages component through jQuery?

I have the following p:messages component:

<p:messages id="messageId" autoUpdate="true" closable="true" redisplay="false" />

I need to show a message in it using jQuery like this:

jQuery(#messageId).val("Error message");

Is this possible?

Upvotes: 2

Views: 2475

Answers (2)

UHDante
UHDante

Reputation: 617

To simulate the proper behavior of primefaces you need to add this structure:

Is adapted to show only the sumary, you need to add the detail if you need it. 

function mensaje(message, type){
    return '<div class="ui-messages-' + type + ' ui-corner-all">'+
        '<a href="#" class="ui-messages-close" onclick="$(this).parent().slideUp();return false;">'+
            '<span class="ui-icon ui-icon-close" />'+
        '</a>'+
        '<span class="ui-messages-' + type + '-icon" />'+
        '<ul>'+
            '<li>'+
                '<span class="ui-messages-' + type + '-summary">'+
                message +
                '</span>'+
            '</li>'+
        '</ul>'+
    '</div>';
};

This will return the html structure of the message depending on the type you pass it as parameter ('error', 'info', 'warn', 'fatal').

Now you just need to place it in the right place:

$('#idPMessage').append(mensaje(yourMessage, 'yourType'));

This will prompt the message with the X to close it and the normal behavior of p:messages.

Hope this helps.

Upvotes: 1

Cagatay Civici
Cagatay Civici

Reputation: 6504

$('messageId').append('<div class="ui-messages-error ui-corner-all"><span class="ui-messages-error-icon"></span><ul></ul></div>').children('ul').append('<li><span class="ui-messages-error-summary">' + summary + '</span><span class="ui-messages-error-detail">' + detail + '</span></li>')

Assuming client id of messages component is messageId.

Upvotes: 3

Related Questions