0

I want to fade out my apex:pagemessage when I click anywhere on the window. For that jquery gives a simple way :

$(window).click(function(){$("#id").fadeOut();});

But here I am not able to use the <apex:pagemessage> id within my jquery. How can I access this element?

<apex:page extensions="arema"> 
    <script>
        $(window).click(function(){$("#showmsg").fadeOut();});
    </script>
    <apex:pageMessages id="showmsg"></apex:pageMessages>  
    <apex:commandButton action="{!saveTemplate}" value="Show Message"  rerender="showmsg"/>
</apex:page>

Apex class

global class arema{
    public void saveTemplate()
    {   
       ApexPages.addmessage(new ApexPages.message(ApexPages.severity.CONFIRM,'Saved changes successfully'));
    }
}
Improve this question
4
  • 2
    Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question.
    – Raul
    Commented Jun 6, 2017 at 6:33
  • Rahul I have updated my question clearly. Please look
    – Aruna
    Commented Jun 6, 2017 at 6:34
  • 3
    Time to debug. Ensure that the selector is working by logging it. If it is then you will need to debug the JS and event handlers. Try to hide it from the JS console in the browser using the real Id of the element.
    – Eric
    Commented Jun 6, 2017 at 6:47
  • @Aruna, the bellow answer seems more than appropriate, however, you seem to keep bumping into other issues which are/were not described in your Original post, if possible, please select an answer, and open a new post pointing towards any other issue you might be encountering rather than following up in the comments. Thanks
    – glls
    Commented Oct 21, 2017 at 17:26

1 Answer 1

Reset to default
9

VF adds to the Ids if not all elements has an id. It will be like jd_0.showmsg

So use a Ends With selector as below

$("[id$=showmsg]")

Did you include jQuery?

The following works fine for me:

Class

global class arema{
    public arema(){
        ApexPages.addmessage(new   ApexPages.message(ApexPages.severity.CONFIRM,'Saved changes successfully'));
    }
}

Page

<apex:page controller="arema"> 
        <script>
        <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"/>
          $(window).click(function(){
                $("[id$=showmsg]").fadeOut();
            });
        </script>
      <apex:pageMessages id="showmsg"></apex:pageMessages>  

     </apex:page>
Improve this answer
6
  • Eric, I did like u said but my apex:pagemessage is not fading with window click .
    – Aruna
    Commented Jun 6, 2017 at 6:45
  • I gave an alert within my jquery function and the alert message is coming with the button click not with window click also the messaging is not fading.
    – Aruna
    Commented Jun 6, 2017 at 6:59
  • It is dissapering? If so then if you are having issues with the fade that would be better asked on SO. The above example works. How the message get there initially is irrelevant
    – Eric
    Commented Jun 6, 2017 at 7:01
  • The message is disappearing now, but it works only when I click on the borders of window. When I click on content area or edit the contents the message is not fading.
    – Aruna
    Commented Jun 6, 2017 at 7:18
  • 1
    Then you have other things in play you have not posted. The example works for me when I click anywhere.
    – Eric
    Commented Jun 6, 2017 at 7:20

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .