CODEWITHSUNDEEP
ajaxjsfprimefaces
Shashi
Shashi

Reputation: 1182

Primefaces Dialog not updating

I am facing issue in updating a primefaces dialog box

Currently I am displaying a primefaces dialog box with some form elements in editable format. There are some output text fields available in a form with a change link available when clicked on the change link the output text fields should be displayed in editable format in a dialog box with accept and cancel buttons in it.

Below is the code snippet which i am using i am calling a listener where i am setting the values to the properties to be displayed in the dialog box in editable format and each time I am updating the dialog box using 's render property.

render=id of the dialog.

Also when i am trying to update the contents inside the dialog box i am receiving some ajax error id not found.

I also tried to put the dialog inside a panel even this was not working.

            <h:panelGrid columns="5" >
            <h:outputText value="Overrride State Date" />
            <p:spacer width="5" height="5" />
            <h:outputText value="Overrride End Date" />
            <p:spacer width="5" height="5" />
            <h:outputText value="New Value"/>
            <p:calendar value="#{certInquiry.ovrStartDt}" showOn="button"/>
            <p:spacer width="5" height="5" />
            <p:calendar value="#{certInquiry.ovrEndDt}" showOn="button"/>
            <p:spacer width="5" height="5" />
            <h:inputText value="#{certInquiry.newVal}"/>
            </h:panelGrid>  
            <div align="center">
            <p:commandButton value="Accept"
                oncomplete="xyz.hide()" /> <p:spacer width="10"
                height="5" /> <p:commandButton value="Cancel"
                onclick="xyz.hide()" type="reset" /></div>

                </h:form>
        </p:dialog>

Here I am updating the dialog using render property of but I am not able to update the dialog and its still showing the previous data when I refresh the screen the data is shown correctly.

Please help me in solving this issue.

Thanks in advance.

Upvotes: 1

Views: 18848

Answers (4)

ThatsAMorais
ThatsAMorais

Reputation: 659

I see one closing but not the entire picture, although I have been down this road and have an answer for you.

If you have the form outside the dialog, try arranging it within the dialog, instead. For example,

<p:dialog ...>
    <h:form>
        ...contents...
    </h:form>
</p:dialog>

Upvotes: 0

hitesh israni
hitesh israni

Reputation: 1752

Is your dialog inside <ui:include> tag?

If yes then check the source or html of your page and verify that dialog has been added to the page only once. (you might have appendToBody set to true)

I had this problem where dialog was getting added to the body multiple times(perhaps due to JSF life-cycle). which would cause unexpected result like dialog not getting update.

I solved it by removing the dialog outside the <ui:include> or you can conditionally render your <ui:include> content

PS: i believe that you have followed other answers like wrapping the dialog content inside a container. And as @spauny mentioned you should post all relevant xhtml code.

Upvotes: 0

spauny
spauny

Reputation: 5096

First of all, you should post the entire xhtml code not just the dialog content and the closing tags...

However I think I know where the problem is: You shouldn't use a render attribute for the dialog, it's javascript function show and hide are more than enough. Also, you should know that you can't update something you haven't rendered, because a non-rendered component can't be found in a html page(client/user side). All you have to do is: 

    <h:form>
            <p:dialog id="myDialog" header="My Options" widgetVar="xyz" showEffect="fade" hideEffect="fade">

            <h:panelGrid columns="5" >
            <h:outputText value="Overrride State Date" />
            <p:spacer width="5" height="5" />
            <h:outputText value="Overrride End Date" />
            <p:spacer width="5" height="5" />
            <h:outputText value="New Value"/>
            <p:calendar value="#{certInquiry.ovrStartDt}" showOn="button"/>
            <p:spacer width="5" height="5" />
            <p:calendar value="#{certInquiry.ovrEndDt}" showOn="button"/>
            <p:spacer width="5" height="5" />
            <h:inputText value="#{certInquiry.newVal}"/>
            </h:panelGrid>  
            <div align="center">
            <p:commandButton value="Accept"
                oncomplete="xyz.hide()" /> <p:spacer width="10"
                height="5" /> <p:commandButton value="Cancel"
                onclick="xyz.hide()" type="reset" /></div>    
        </p:dialog>
<p:commandButton value="Update Dialog" action="#{MyBean.MyMethod}" update="MyDialog" />
</h:form>

So your form should be outside the dialog, it's better this way and simpler; as you can see the UpdateDialog button is outside the dialog and updates your dialog(but could also update a panel inside your dialog) after running the action method. Also I see that those Accept and Cancel buttons are just for test because they do the same thing without any server implementation...

Upvotes: 1

Michel Foucault
Michel Foucault

Reputation: 1732

You try with this code:

<p:dialog widgetVar="xyz" >
   <p:panel id="xyzBody">
...
</p:panel>
</p:dialog>


<p:commandButton value="Open dialog"  oncomplete="xyz.show()"
    update="xyzBody"
     actionListener="fillFieldListener"  />

Upvotes: 3

Related Questions