Refreshing forms

[benpad]

Hello,

I'm trying to develop a dataTable that can delete each row. I added a commandLink inside the dataTable that deletes the current row.

<h:form id="recentVideosForm">
<h:dataTable value="#{videoBean.recentlyAddedVideoList}" id="videosAddedList" var="video">
<p:column styleClass="datatable-header">
<h:outputText value="#{video.title}"/>
<p:commandLink actionListener="#{videoBean.deleteSelectedVideo(video)}" update="videosAddedList" value="Delete"/>
</p:column>
</h:dataTable>
</h:form>

I tried changing the update attribute of the commandLink to @this videosAddedList and @form but the dataTable is not updating. The delete in the backend is working fine. Thank you.

[cagatay.civici]

What I would do is;

Code: Select all

<h:form id="recentVideosForm">
<p:outputPanel id="videosListContainer">
<h:dataTable value="#{videoBean.recentlyAddedVideoList}" id="videosAddedList" var="video">
<p:column styleClass="datatable-header">
<h:outputText value="#{video.title}"/>
<p:commandLink actionListener="#{videoBean.deleteSelectedVideo(video)}" update=":videosListContainer" value="Delete"/>
</p:column>
</h:dataTable>
</p:outputPanel>
</h:form>

[benpad]

Hi Prime. Thanks for the solution but the problem still there. Here's the complete code. Maybe I'm missing something.

Code: Select all

<p:dialog widgetVar="addDialog"
          id="addDialog"
          draggable="false"
          resizable="false"
          modal="true"
          header="Add Video"
          width="900"
          height="500"
          closeListener="#{videoBean.cleanCreateVideo}">

    <p:tabView activeIndex="0" id="addTabView" collapsible="false" dynamic="false">
        <p:tab title="Video Details">
            <h:panelGrid columns="2" columnClasses="video-details-col, recent-videos-col">
                <h:form id="videoDetailsForm">
                    <!-- Messages here -->
                    <p:messages id="messages" showDetail="false" showSummary="true"/>

                    <h:panelGrid columns="2" id="videoDetailsPanel" styleClass="video-details-panel" columnClasses="col1, col2">
                        <h:outputLabel for="title" value="Title: *" styleClass="form-label"></h:outputLabel>
                        <h:inputText value="#{videoBean.video.title}" id="title" required="true" label="Title" styleClass="form-textbox" size="40">
                            <f:validateLength minimum="2" maximum="100"/>
                        </h:inputText>   

                        <h:outputLabel for="addNew" value="" styleClass="form-label"/>
                        <p:commandButton value="Add New" actionListener="#{videoBean.create}" async="true" ajax="true" id="addNew" update="@form, recentVideosForm:videosAddedList"/>
                    </h:panelGrid>
                </h:form>
                <h:form id="recentVideosForm">
                    <p:outputPanel id="videosListContainer">
                    <h:dataTable value="#{videoBean.recentlyAddedVideoList}"
                                 id="videosAddedList"
                                 width="100%"
                                 var="video"
                                 columnClasses="col1, col2"
                                 styleClass="datatable">
                        <p:column styleClass="datatable-header">
                            <h:outputText value="#{video.title}"/> -
                            <h:outputText value="#{video.id}"/> |
                            <p:commandLink actionListener="#{videoBean.deleteSelectedVideo(video)}" update=":videosListContainer" value="Delete"/>
                            <p:commandLink actionListener="#{videoBean.prepareUpdate}" update="videoDetailsForm" value="Update"/>
                        </p:column>
                    </h:dataTable>
                    </p:outputPanel>
                </h:form>
            </h:panelGrid>
        </p:tab>
    </p:tabView>
</p:dialog>

What I need to accomplish:
1. Add a video title from the form and update the dataTable beside. (OK)
2. Refresh the form inputs and clear the values for the next add. (OK)
3. DataTable has a delete and update link which deletes the video in a row. (OK)
4. Refresh the dataTable. (FAIL)

When I try to add again, the dataTable updates. Not when the delete link called.

[benpad]

Hi Prime! I made it. i did some work around.

Code: Select all

<h:form id="videoDetailsForm">
    <!-- Messages here -->
    <p:messages id="messages" showDetail="false" showSummary="true"/>

    <h:panelGrid columns="2" id="videoDetailsPanel" styleClass="video-details-panel" columnClasses="col1, col2">
        <h:outputLabel for="title" value="Title: *" styleClass="form-label"></h:outputLabel>
        <h:inputText value="#{videoBean.video.title}" id="title" required="true" label="Title" styleClass="form-textbox" size="40">
            <f:validateLength minimum="2" maximum="100"/>
        </h:inputText>   

        <h:outputLabel for="addNew" value="" styleClass="form-label"/>
        <p:commandButton value="Add New" actionListener="#{videoBean.create}" async="true" ajax="true" id="addNew" update="@form, recentVideosForm:videosAddedList"/>
    </h:panelGrid>

    <p:remoteCommand update="recentVideosForm:videosAddedList" name="deleteRemoteUpdate" id="deleteRemoteUpdate"/>
</h:form>
<h:form id="recentVideosForm">
    <p:outputPanel id="videosListContainer">
    <h:dataTable value="#{videoBean.recentlyAddedVideoList}"
                 id="videosAddedList"
                 width="100%"
                 var="video"
                 columnClasses="col1, col2"
                 styleClass="datatable">
        <p:column styleClass="datatable-header">
            <h:outputText value="#{video.title}"/> -
            <h:outputText value="#{video.id}"/> |
            <p:commandLink actionListener="#{videoBean.deleteSelectedVideo(video)}" value="Delete" oncomplete="deleteRemoteUpdate()"/>
            <p:commandLink actionListener="#{videoBean.prepareUpdate}" update="videoDetailsForm" value="Update"/>
        </p:column>
    </h:dataTable>
    </p:outputPanel>
</h:form>

After the delete commandLink, I called a remoteCommand from the other form and that's it.

[cagatay.civici]

Cool