Open Primefaces dialog and Process Full JSF Lifecycle

Question

I'm doing a <p:commandLink value="#{bundle['registered.home.search.TEXT']}" onclick="webSearchDlg.show();"></p:commandLink> in order to show the below dialog. The p:outputPanel id="searchPnl" always renders after its initially rendered. It never disappears even though the dialogs closeListener="#{dreamSearch.close}" onCloseUpdate="searchTxtPnl,searchPnl" is executed. When I open the dialog after closing it, the panelGrid appears and the <p:inputText id="searchText"> displays the previous value that I tried to clear in the below closeListener method. Any ideas...code below...

<p:dialog header="#{bundle['dreamSearch.HEADER']}"
    widgetVar="webSearchDlg" modal="true" styleClass="dialog dialog2"
    draggable="false" resizable="false" showEffect="fade"
    hideEffect="fade" closeListener="#{dreamSearch.close}" onCloseUpdate="searchTxtPnl,searchPnl">
    <div class="dialog-top-reg"></div>
    <div class="dialog-middle-reg">
        <div class="close-button">
            <h:form>
                <p:commandButton onclick="webSearchDlg.hide()" />
            </h:form>
        </div>
        <h:form class="dialog-content dialog-content2"
            binding="#{dreamSearch.dreamSearchFrm}">
            <h1 class="dream-search">
                <h:outputText value="#{bundle['dreamSearch.HEADER']}" />
            </h1>
            <p class="dream-search">
                <h:outputText value="#{bundle['dreamSearch.SUBHEADER']}" />
            </p>
            <div class="dream-search-wrap">
                <fieldset>
                <p:outputPanel id="searchTxtPnl">
                    <p:inputText id="searchText" value="#{dreamSearchBean.searchText}"/>
                </p:outputPanel>
                    <p:commandButton styleClass="form-btn1"
                        value="#{bundle['dreamSearch.search.button.TEXT']}" onclick="webImageSearch()"/>
                </fieldset>
            </div>
            <p:remoteCommand name="webImageSearch" process="searchText, @this" actionListener="#{dreamSearch.search}" update="searchPnl"/>
            <p:outputPanel id="searchPnl" styleClass="data-grid-wrap">
                <h:outputText value="#{bundle['dreamSearch.imageResults.TEXT']}" rendered="#{dreamSearchBean.shouldRender}"/>
                <p:dataGrid var="img" value="#{dreamSearchBean.images}" columns="5"
                    rows="10" paginator="true" effect="true"
                    paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                    rowsPerPageTemplate="10,15,20" paginatorPosition="bottom" rendered="#{dreamSearchBean.shouldRender}">
                    <p:column>
                        <h:panelGrid columns="1" style="width:100%">
                            <p:graphicImage value="#{img}" width="40" height="50" />
                        </h:panelGrid>
                    </p:column>
                </p:dataGrid>
            </p:outputPanel>
        </h:form>
    </div>
    <div class="dialog-bottom-reg"></div>
</p:dialog>


@Named
@Scope("request")
public class DreamSearch extends BaseAction {
    @Inject
    DreamService dreamService;
    @Inject
    ImageSearchService flickrSearchImpl;
    @Inject
    private DreamSearchBean dreamSearchBean;
    private UIForm dreamSearchFrm;


    public void init(){
        if (!FacesUtils.isPostback()) {
            dreamSearchBean.setShouldRender(false);
            dreamSearchBean.setSearchText(null);
        }
    }

    public void setDreamSearchFrm(UIForm dreamSearchFrm) {
        this.dreamSearchFrm = dreamSearchFrm;
        init();
    }

    public void search(ActionEvent e){
        try {

            if(dreamSearchBean.getSearchText() != null && !dreamSearchBean.getSearchText().isEmpty()){
                List<String> searchResults = flickrSearchImpl.searchByKeyWord(dreamSearchBean.getSearchText());
                dreamSearchBean.setImages(searchResults);
                dreamSearchBean.setShouldRender(true);
            }else{
                dreamSearchBean.setShouldRender(false);
            }

        } catch (Exception e1) {
            // TODO Auto-generated catch block
            e1.printStackTrace();
        }

    }

    public void close(CloseEvent e){
        dreamSearchBean.setShouldRender(false);
        dreamSearchBean.setSearchText(null);
    }

    public UIForm getDreamSearchFrm() {
        return dreamSearchFrm;
    }
}

    @Named
@Scope("session")
public class DreamSearchBean extends BaseSessionBean {
    private List<String> images;
    private String searchText;
    private boolean shouldRender;



    public String getSearchText() {
        return searchText;
    }

    public void setSearchText(String searchText) {
        this.searchText = searchText;
    }

    public boolean isShouldRender() {
        return shouldRender;
    }

    public void setShouldRender(boolean shouldRender) {
        this.shouldRender = shouldRender;
    }

    public List<String> getImages() {
        return images;
    }

    public void setImages(List<String> images) {
        this.images = images;
    }

}

Answer 1

Don't really know what the reason for this behavior is, but you could try the following:

For the <p:outputPanel id="searchPnl"> : try to set the rendered tag on the panel and not on the h:outputText and p:dataGrid .

For the searchText try to update the <p:outputPanel id="searchTxtPnl"> instead of the h:inputText .

Answer 2

I noticed that the scope of your bean is request. If your doing ajax updates this really needs to be a ViewScoped bean with the JSF @ManagedBean and @ViewScoped annotations.

Another thing: make sure your not updating the form where the dialog resides in. This could have unwanted results.