How to display the pop-up from error message block

Question

i am displaying the error message in visualforce page by using apex:pageMessages in this error block i need the hyperlink when i click on hyper it have to open the custom pop-up in that pop-up i have to display the some error information, can any one suggest me how to call the custom-pop method.

Visualforce

<apex:outputpanel id="messages">
<apex:pageMessages escape="false"/> 
</apex:outputpanel>  

Apex Clas:

addErrorMessage(duplicates +' values alerdy there.<a href="/">test</a>');

Answer 1

Well, you are doing it correctly. You will be required to add and event handler on the <a> tag you have defined. I tried it using jQuery dialog.

Apex Page:

<apex:page controller="ErrorMSG" >
    <apex:pageMessages escape="false" rendered="true" ></apex:pageMessages>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css"/>        
    <div id="dialog" title="Basic dialog">
        <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
    </div>
    <script>
    $j = jQuery.noConflict();
    $j( "#popup" ).click(function(){
        $j( "#dialog" ).dialog();
    })
    </script>
</apex:page>

Controller

public class ErrorMSG {
    public ErrorMSG(){
        ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.WARNING , 'You have received an error <b><u> <span id="popup">Click for Details</span><u></b>'));
    }
}

Result

You will be required to refine the code and surround the dialog by outputpanel and re-render it if there is a failure and hide dialog at start.

Answer 2

I would like to add something in Manjit's answer. If you want show different error massage you can define it in your Apex.pages.Massages based on conditions.

Try below code.

public class ErrorMSG {
    public ErrorMSG(){

      if(1 != 1){
        ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.WARNING , 'You have received an error <b><u> <span id="popup">Click for Details</span><u></b> <div style="Display:none;" id="dialog" title="Basic dialog"> <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the "x" icon.</p></div>'));

       }else{

       ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.WARNING , 'You have received an error <b><u> <span id="popup">Click for Details</span><u></b> <div style="Display:none;" id="dialog" title="Basic dialog"> <p>This is diffrent error massage.</p></div>'));

       } 
    }


}

VF page

<apex:page controller="ErrorMSG" >
    <apex:pageMessages escape="false" rendered="true" ></apex:pageMessages>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css"/>  

    <script>
    $j = jQuery.noConflict();
    $j( "#popup" ).click(function(){
        $j( "#dialog" ).dialog();
    })
    </script>
</apex:page>