CODEWITHSUNDEEP
javajsfprimefaces
rubbyrubber
rubbyrubber

Reputation: 568

Clearing Output Fields on JSF

I have a little problem using JSF and PrimeFaces. I have a form with two <p:selectonemenu>s and two <h:outputText>s. The contents of the first <p:selectonemenu> update the second, and the two <h:outputText>s are updated with the second <p:selectonemenu>. Both <p:selectonemenu>s are dependent on values on my backing bean. The issue is that I haven't been able to clear the <h:outputText>s when the FIRST <p:selectonemenu> changes it's value.

I tried using <f:ajax> with a listener to clear the contents of the current entity being displayed.

Here's the xhtml:

<h:outputText value="#{bundle.BailmentFamiliesLabel_bailmentFamCode}"/>
<p:selectOneMenu id="bailmentFamilyCode" value="#{bailmentsController.selected.bailmentFamId}" required="false">
    <f:selectItems value="#{bailmentFamiliesController.itemsAvailableSelectOne}" var="famid"/>
    <f:ajax event="change" render="description price bailmentCode" listener="${bailmentsController.clearView(famid)}"/>
</p:selectOneMenu>
<h:outputText value="#{bundle.BailmentsLabel_bailmentCode}"/>
<p:selectOneMenu id="bailmentCode" value="#{bailmentsController.selected}" required="false">
    <f:selectItems value="#{bailmentsController.itemsAvailableSelectOneByFamId}"/>
    <f:ajax event="change" render="globalForm" listener="#{bailmentsController.view(bailmentsController.selected.bailmentCode,bailmentsController.selected.bailmentFamId)}" />
</p:selectOneMenu>
<h:outputText value="#{bundle.Label_description}"/>
<h:outputText value="#{bailmentsController.selected.description}" title="#{bundle.Title_description}" id="description"/>
<h:outputText value="#{bundle.BailmentsLabel_purchasePriceMsj}"/>
<h:outputText value="#{bailmentsController.selected.purchasePrice}" title="#{bundle.BailmentsTitle_purchasePrice}" id="price"/>

And the listener for the first <p:selectonemenu> on bailmentsController:

public void clearView(BailmentFamilies bf) {
    if (bf != null) {
        current = new Bailments();
        current.setBailmentFamId(bf);
    }
}

In my database, each Bailment is assigned a BailmentFamily, which is why I use a 2-step filter. The first <p:selectonemenu> lists all available BailmentFamilies, the second <p:selectonemenu> displays all available Bailments for the selected BailmentFamily. The <h:outputText>s display the information for the selected Bailment, which is why I need to clear them when BailmentFamily changes.

Can anyone suggest another course of action? As this has not proven productive. Thank you very much.

Upvotes: 0

Views: 1949

Answers (3)

Avinash Singh
Avinash Singh

Reputation: 3797

You can also use , 

<input type="button" value="Reset Form" onclick="this.form.reset()" />

This will reset the form values but not the backing bean , so this approach wouldn't be safe if u were using form data from an actionListener/action outside the form.

Upvotes: 0

rubbyrubber
rubbyrubber

Reputation: 568

I just solved the issue. Turns out I had to clear all the values within my entity. Silly perhaphs, but other developers could be stuck with this:

I edited my clearView() method. This was the code that worked:

public void clearView(BailmentFamilies bf) {
    if (bf != null) {
        // Create a new empty object to recieve the new BailmentFamily
        current = new Bailments();
        current.setBailmentFamId(bf); // This property has to be kept. 
        // I pass it as parameter and reassigned it to the current entity. 
        // Otherwise, the <p:selectonemenu> will clear upon rendering because of the new call above.
    }

    // Set ALL displayed properties to null
    current.setBailmentCode(null);
    current.setDescription(null);
    current.setPurchasePrice(null);
}

Hope this helps anyone.

Upvotes: 2

kolossus
kolossus

Reputation: 20691

Why are you expecting the <h:outputText> to be ajax updated when they've not been listed in the render attribute of the <f:ajax/> tag for the first select menu? You need to

  1. Assign id attributes to both <h:outputText>s 

    <h:outputText id="text1" value="#{bundle.BailmentFamiliesLabel_bailmentFamCode}"/>
<h:outputText id="text2" value="#{bundle.BailmentsLabel_bailmentCode}"/>

  2. Reference the ids in the <f:ajax/>

    <f:ajax event="change" render="description text1 text2 price bailmentCode" listener="${bailmentsController.clearView(famid)}"/>

So far it would work. For an optimal/best-practice standpoint

  1. Use <p:ajax/> instead. It's supposed to perform faster (because of the underlying jquery) and gives you access to other functionality

    <p:ajax update="description, text1, text2, price, bailmentCode" listener="${bailmentsController.clearView(famid)}"/>

  2. Use EL notation (#) instead of JSTL($)

    <p:ajax update="description, text1, text2, price, bailmentCode" listener="#{bailmentsController.clearView(famid)}"/>

Upvotes: 2

Related Questions