Rendering of an element depending on primefaces rating

Question

I started using primafaces and I came up with the following scenario. The user rates and element and if the rating is valid then a span block appears or it hides depending the case. I am based on the example here: (http://www.primefaces.org/showcase/ui/input/rating.xhtml ) with the ajax approach. Note that a rate is valid if the user clicks on any star. So here's what I've done so far:

<h:form>
                <p:panelGrid>
                    <p:row>
                        <p:column>
                            <p:rating value="#{searchBean.dateWeight}">
                                <p:ajax event="rate" listener="#{searchBean.addDatetoWeights}"
                                    update="dates" render="dates" />
                                <p:ajax event="cancel"
                                    listener="#{searchBean.removeDatefromWeights}"
                                    update="dates" />
                            </p:rating>
                            <h:panelGroup id="dates" rendered="#{searchBean.dateRated}">
                            <h:outputText  value="test"></h:outputText>
                            </h:panelGroup>
                        </p:column>
                    </p:row>
                </p:panelGrid>
</h:form>

segment of the bean:

boolean dateRated;
int dateWeight;

public void addDatetoWeights(){
        dateRated=true;
        weights.put("date",dateWeight);
        System.out.println(dateRated);
    }

public void removeDatefromWeights(){
        dateRated=false;
        if(weights.containsKey("date"))
            weights.remove("date");
    }

score 2 · Accepted Answer · edited May 23 '17 at 12:12

2

Let's go back to the basics: HTML and JavaScript. It's important to also know them before diving into JSF. JSF is in the context of this question merely a HTML/JS code generator.

With <p:ajax update="dates"> you're basically telling JavaScript to grab the HTML element by the given ID and then replace its contents with the new contents retrieved from server in ajax response. However, as the <h:panelGroup id="dates"> is in first place never rendered to the HTML output, JavaScript can't find the element by document.getElementById() stuff in order to replace its contents and then just ignores the instruction.

Instead, the <p:ajax update="dates"> must refer a component which is always rendered, so that JavaScript can actually find it. Only its contents can be conditionally rendered.

Here's a rewrite:

<h:panelGroup id="dates">
    <h:outputText value="test" rendered="#{searchBean.dateRated}" />
</h:panelGroup>

Firstly thx once again for your very informative answer! Secondly, why is there so much difference between what I've wrote and what you wrote. I mean the is not rendered from the first place like my approach. Yet your's case works while mine doens't. – JmRag Aug 29 '14 at 10:08
You're welcome. That's explained in the second paragraph of my answer (and the "see also" link). You're attempting to update an element which is never rendered in first place. – BalusC Aug 29 '14 at 10:13
I've read it but I can't understand why the is rendered and the isn't. Also the panelgroup would include many element so in order to do what I want I must explicity write the "rendered="{..}" " in every element. Is that a good technique? – JmRag Aug 29 '14 at 10:24
Wrap it in another `` or better, ``. – BalusC Aug 29 '14 at 11:09

Rendering of an element depending on primefaces rating

1 Answers1

See also: