CODEWITHSUNDEEP
jsfjsf-2primefaces
neni
neni

Reputation: 813

How to Hide/show <p:toolbar> onclick of a <p:menuitem>

I am working with JSF 2.0 and primefaces 3.3. I want to hide/show a toolbar onclick of a menuitem.

Here is the more info.

<p:menubar autoSubmenuDisplay="true" style="width:99%">
                    <p:submenu label="Projects">
                        <p:menuitem id="m11" value="Select Product" actionListener="#{menuBean.renderTool}" update="t1" />
                        <p:menuitem id="m12" value="Select Project" />
                        <p:menuitem id="m13" value="Select Contract" />
                    </p:submenu>
                    <p:menuitem id="m2" value="Global" />

                    <p:menuitem id="m7" value="Exit" />
                </p:menubar>

                <p:toolbar id="t1" rendered="#{menuBean.renderToolbar}">
                    <p:toolbarGroup align="left" style="height:20px;">
                        <h:outputText value="Projects " />
                        <h:outputText value=" - select Product" />
                    </p:toolbarGroup>
                </p:toolbar>

ManagedBean

private boolean renderToolbar = false;
//getters and setters
public void renderTool(ActionEvent actionEvent){
        System.out.println("inside renderTool method...");
        renderToolbar = true;
    }

The actionListener method is executing But, it's not updating or rendering the toolbar.

Upvotes: 0

Views: 6783

Answers (3)

siebz0r
siebz0r

Reputation: 20329

The solution Daniel provided works using a backing bean. However if showing/displaying some element isn't dependent on data but is more a client-side thing or a simple user controlled element I would advice against using a backing bean. Using a backing bean for client-side stuff causes delays or as a regular user would put it: "It's slow".

In stead use client side things like JavaScript as Jens suggested. Since you're using PrimeFaces you can make use of jQuery. A simple example to demonstrate jQuery's toggle(), show() and hide() functions:

<h:form>
    <p:menubar>
        <p:menuitem value="Toggle" onclick="$(&quot;[id='t1']&quot;).toggle()" />
        <p:menuitem value="Show" onclick="$(&quot;[id='t1']&quot;).show()" />
        <p:menuitem value="Hide" onclick="$(&quot;[id='t1']&quot;).hide()" />
    </p:menubar>
</h:form>

<p:toolbar id="t1" />

Note that if your p:toolbar lives in a container like a form or such the client-side ID is prefixed with the form's ID.

Upvotes: 1

Daniel
Daniel

Reputation: 37051

add some boolean variable to your bean

boolean someBoolean; //+ getter/setter

and inside your renderToolbar method add

someBoolean = !someBoolean; // toggle the disaplay on and off

in xhtml change

<p:toolbar id="t1" rendered="#{menuBean.renderToolbar}">

into

<h:panelGroup id="t1">
    <p:toolbar rendered="#{menuBean.someBoolean}">
.
.
.
</h:panelGroup>

Upvotes: 2

Jens
Jens

Reputation: 6383

Not much info that you provided.

However, one way to do it is using Javascript with the onclick event handler. Like this (untested code): 

<p:toolbar id="toolbarID" />
<p:menu>
    <p:menuitem onclick="$('#toolbarID').toggle();" />
</p:menu>

I think primefaces already includes jquery so you should be able to use jquery selectors out of the box.

Upvotes: 2

Related Questions