JSF change css style attribute onclick

Question

To be clear, I have a div with a certain style and when I click on a commandButton inside this div I want to set the display attribute to "none".

I want that the css style change by clicking on the commandButton.

So here is my xhtml :

<div class="details" id="detailsPopUp" style="#{detailsPopUpManager.style}">
                <h:commandButton image="resources/images/close Icon.png" 
                                 action="#{detailsPopUpManager.closePopUp()}" 
                                 class="closeIcon"/>
</div>

And this is the detailsPopUpManager code :

 @Named(value = "detailsPopUpManager")

 @SessionScoped

 public class DetailsPopUpManager implements Serializable {

    private String style;
    public DetailsPopUpManager() {
        style = "width:500px;\n" +
                "height:500px;\n" +
                "background: graytext;\n" +
                "position: absolute;\n" +
                "right: 25%;\n" +
                "top: 10px;\n" +
                "z-index: 1;";
    }

    public String getStyle() {
        return style;
    }

    public void setStyle(String style) {
        this.style = style;
    } 

    public void closePopUp()
    {
        style = "width:500px;\n" +
                "height:500px;\n" +
                "background: graytext;\n" +
                "position: absolute;\n" +
                "right: 25%;\n" +
                "top: 10px;\n" +
                "z-index: 1;\n" +
                "display: none;";
    }

Thank's for further help.

score 2 · Accepted Answer · answered Dec 15 '14 at 21:38

2

You need to use ajax to achieve that result.

<h:form id="myForm">
   <div class="details" id="detailsPopUp" style="#{detailsPopUpManager.style}">
                <h:commandButton image="resources/images/close Icon.png" 
                                 action="#{detailsPopUpManager.closePopUp()}" 
                                 class="closeIcon">
                   <f:ajax render="myForm"/>
                </h:commandButton>

   </div>
</h:form>

answered Dec 15 '14 at 21:38

Salih Erikci

5,076
12
39
69

Thank you for your help. With the "-1" on my post I presume I've asked something really simple but I'm new to jsf and not used to ajax. I've read, understood and made myself the exemple showing here : http://www.mkyong.com/jsf2/jsf-2-0-ajax-hello-world-example/ . But I'm not able to reproduce the same thing with css. Sorry to take your time but could you show me a clue of how you would do it? – MHogge Dec 16 '14 at 08:48
I always got a "null PK" whatever I'm trying to do (based on your code). – MHogge Dec 16 '14 at 09:11
1

You must be getting that Exception from somewhere else. Because my code is not capable of causing a null PK exception. It is related to a some Database operation. This code works fine on my pc. – Salih Erikci Dec 16 '14 at 09:29
1

Oh yes you were right. I tought it was link because it's only when I click on the commandButton that the null PK exception is thrown. Thank you for your help, I'll check my code ! – MHogge Dec 16 '14 at 09:33

JSF change css style attribute onclick

1 Answers1