Alert/show message after saved VFP

Question

EDIT: Assume this is my VF page which i have simple input:

<apex:page standardController="Account" extensions="ErrorMessageInVfController">
 <apex:form >
   <apex:pageblock >
      <apex:pageMessages id="showmsg"></apex:pageMessages>
         <apex:panelGrid columns="2">
           Account Name: <apex:inputText value="{!acc.name}"/>
           Account Number: <apex:inputText value="{!acc.AccountNumber}"/>
           Account Phone: <apex:inputText value="{!acc.phone}"/>
           Account Site: <apex:inputText value="{!acc.site}"/>
           Account Industry: <apex:inputText value="{!acc.industry}"/>
           <apex:commandButton value="Update" action="{!save}" style="width:90px" rerender="showmsg"/>
         </apex:panelGrid>
    </apex:pageblock>
 </apex:form>
</apex:page>

Controller:

public with sharing class ErrorMessageInVfController {

public void save(){

     //... logic ... more code:
     //insert myRecord

       ApexPages.addmessage(new ApexPages.message(ApexPages.severity.CONFIRM,'Saved successfully!'));
}

The problem with the above approach is that once it displayed the ApexPages.message there is no way to close it will always be there until user refresh the entire page.

I'm looking a way to show the message and disappear by itself or have a close button next to the message.

I need a popup message to be displayed after user clicks on Save button in VF i have searched on the net but could not find anything close to it either its popup or a message is fine and any idea?

Answer 1

page

<apex:page standardController="Account" extensions="ErrorMessageInVfController">
 <style type="text/css">

        .popup
        {
            background-color: white;
            border-width: 2px;
            border-style: solid;
            z-index: 9999;
            left: 50%;
            padding:10px;
            position: absolute;
            width: 500px;
            margin-left: -250px;
            top:80px;
        }

        .popupBg
        {
            background-color:black;
            opacity: 0.20;
            filter: alpha(opacity = 70);
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 9998;
        }

    </style>
 <apex:form >
   <apex:pageblock >
         <apex:panelGrid columns="2">
           Account Name: <apex:inputText value="{!account.name}"/>
           Account Number: <apex:inputText value="{!account.AccountNumber}"/>
           Account Phone: <apex:inputText value="{!account.phone}"/>
           Account Site: <apex:inputText value="{!account.site}"/>
           Account Industry: <apex:inputText value="{!account.industry}"/>
           <apex:commandButton value="Update" action="{!showPopup}" style="width:90px" rerender="showmsg,popup"/>
         </apex:panelGrid>
    </apex:pageblock>
    <apex:outputPanel id="popup">
        <apex:outputPanel styleClass="popupBg" layout="block" rendered="{!displayPopUp}"/>
        <apex:outputPanel styleClass="popup" layout="block" rendered="{!displayPopUp}">
            <apex:commandButton value="X" action="{!closePopup}" rerender="popup"/>
            <apex:pageMessages id="showmsg"></apex:pageMessages>
        </apex:outputPanel>
    </apex:outputPanel>
 </apex:form>
</apex:page>

class

public with sharing class ErrorMessageInVfController {

    public ErrorMessageInVfController(ApexPages.StandardController controller) {

    }

    public boolean displayPopup {get; set;}
    public void closePopup()
    {       
        displayPopup = false;   
    }    
    public void showPopup()
    {       
        displayPopup = true;
        save();   
    }   
    public void save(){
       ApexPages.addmessage(new ApexPages.message(ApexPages.severity.CONFIRM,'Saved successfully!'));
    }

}

apex:pagemessage not really required

Answer 2

If you need to display a message w/without conditions within the visualforce page, you can use apex:pageMessage. Here is an example I read before.

Answer 3

I found another way to Alert a message by doing something like this:

<apex:commandButton value="Update Me" action="{!updateBtn}" oncomplete="updateMessage();" reRender="script_block"/> 

JavaScript:

        <apex:outPutPanel id="script_block">
         <script>
          accountNumber = '{!myobjectname.AccountNumber}';
        </script>
        </apex:outPutPanel>

       <script>
         var accountNumber;
         function updateMessage(){
            alert('Updated successfully!' + accountNumber);
        }    
      </script>