Primefaces : confirmDialog의 commandButton이 동일한 형식의 datatable을 업데이트 할 수 없습니다.

Question

각 행의 편집 및 삭제 명령 단추를 포함하는 1 개의 데이터 테이블이 있습니다. 삭제 버튼은 클릭 대화 상자에 확인 대화 상자를 표시하고 actionListener에 의해 currentObject 변수가 동일한 행에 속한 객체로 설정됩니다.

확인 대화 상자에서 예는 명령 단추이기도하며 bean의 delete (object) 메소드를 호출합니다.

모두 정상적으로 작동합니다. 삭제 기능은 다음과 같습니다 :

public void delete(ActionEvent actionEvent) { 
    categoryRepository.delete(currentCategory); 
    currentCategory = new Category(); 
    categoryList = categoryRepository.findAll(); 
} 

내가 삭제 후 데이터 테이블을 업데이트합니다. 그러나 datatable에서는 업데이트가 작동하지 않습니다. @form 만 업데이트 할 수 있지만 이번에는 페이지의 모든 내용이 비활성화되고 아무 것도 선택할 수 없습니다. 버그가 될 수 있습니다.

<h:form id="categoryForm"> 
       <p:commandButton id="addCategoryButton" value="New" 
        onclick="categoryDialog.show();" type="button" /> 

       <p:dataTable var="cat" value="#{categoryBean.categoryList}" 
        rowKey="#{cat.id}" paginator="true" rows="10" 
        selection="#{categoryBean.selectedCategories}" id="categoryTable" 
        widgetVar="categoryTable"> 

        <f:facet name="header"> 
     Category List 
    </f:facet> 
        <p:column selectionMode="multiple" /> 
        <p:column headerText="Name" sortBy="#{cat.name}" 
         filterBy="#{cat.name}" id="name"> 
        #{cat.name[categoryBean.currentLocale.language]} 
        </p:column> 
        <p:column headerText="Sort Order" sortBy="#{cat.sortOrder}" 
         filterBy="#{cat.sortOrder}" id="sortOrder"> 
         #{cat.sortOrder} 
        </p:column> 
        <p:column headerText="Actions" id="actions"> 
         <h:commandButton action="#{categoryBean.edit(cat)}" value="Edit" /> 

         <h:commandButton value="Delete" 
          onclick="deleteConfirmation.show()" type="button"> 
          <f:setPropertyActionListener value="#{cat}" 
           target="#{categoryBean.currentCategory}" /> 
         </h:commandButton> 

        </p:column> 

       </p:dataTable> 
       <p:confirmDialog id="deleteConfirmDialog" message="Are you sure?" 
        header="Initiating destroy process" severity="alert" 
        widgetVar="deleteConfirmation"> 

        <p:commandButton id="confirm" value="Yes Sure" 
         update=":categoryForm:categoryTable" 
         oncomplete="deleteConfirmation.hide()" 
         actionListener="#{categoryBean.delete}" /> 
        <p:commandButton id="decline" value="Not Yet" 
         onclick="deleteConfirmation.hide()" type="button" /> 
       </p:confirmDialog> 

       <p:dialog id="categoryDialog" header="Category Detail" 
        widgetVar="categoryDialog" resizable="false" style="width:90%;" 
        showEffect="explode" hideEffect="explode"> 
        <p:panel id="panel" header="Edit Category" 
         style="margin-bottom:10px;"> 
         <p:messages id="messages" /> 
         <h:panelGrid columns="3"> 
          <h:outputLabel for="nameTabView" value="Name: " /> 
          <p:tabView id="nameTabView"> 
           <c:forEach var="locale" items="#{categoryBean.userLocales}"> 
            <p:tab title="#{locale.displayLanguage}"> 
             <h:panelGrid columns="2" cellpadding="10"> 
              <h:inputText 
               value="#{categoryBean.currentCategory.name[locale.language]}" /> 
             </h:panelGrid> 
            </p:tab> 
           </c:forEach> 
          </p:tabView> 
         </h:panelGrid> 
         <p:commandButton id="saveCategoryButton" value="Save" 
          oncomplete="categoryDialog.hide()" 
          actionListener="#{categoryBean.save}" 
          update="categoryTable, categoryDialog" /> 
        </p:panel> 

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

Answer 1

큰 실수를 저질 렀습니다. 나는 태그를 사용했다. 나는 정점에 사용해야합니다.

   <h:form id="categoryForm"> 
       <p:commandButton id="addCategoryButton" value="New" 
        onclick="categoryDialog.show();" type="button" /> 

       <p:dataTable var="cat" value="#{categoryBean.categoryList}" 
        rowKey="#{cat.id}" paginator="true" rows="10" 
        selection="#{categoryBean.selectedCategories}" id="categoryTable" 
        widgetVar="categoryTable"> 

        <f:facet name="header"> 
     Category List 
    </f:facet> 
        <p:column selectionMode="multiple" /> 
        <p:column headerText="Name" sortBy="#{cat.name}" 
         filterBy="#{cat.name}" id="name"> 
        #{cat.name[categoryBean.currentLocale.language]} 
        </p:column> 
        <p:column headerText="Sort Order" sortBy="#{cat.sortOrder}" 
         filterBy="#{cat.sortOrder}" id="sortOrder"> 
         #{cat.sortOrder} 
        </p:column> 
        <p:column headerText="Actions" id="actions"> 
         <p:panelGrid columns="2" styleClass="actions" cellpadding="2"> 
          <p:commandButton action="#{categoryBean.edit(cat)}" value="Edit" /> 
          <p:commandButton value="Delete" 
           onclick="deleteConfirmation.show()"> 
           <f:setPropertyActionListener value="#{cat}" 
            target="#{categoryBean.currentCategory}" /> 
          </p:commandButton> 
         </p:panelGrid> 
        </p:column> 

       </p:dataTable> 
       <p:confirmDialog id="deleteConfirmDialog" message="Are you sure?" 
        header="Initiating destroy process" severity="alert" 
        widgetVar="deleteConfirmation"> 

        <p:commandButton id="confirm" value="Yes Sure" 
         update=":categoryForm:categoryTable" 
         oncomplete="deleteConfirmation.hide()" 
         actionListener="#{categoryBean.delete}" /> 
        <p:commandButton id="decline" value="Not Yet" 
         onclick="deleteConfirmation.hide()" type="button" /> 
       </p:confirmDialog> 

       <p:dialog id="categoryDialog" header="Category Detail" 
        widgetVar="categoryDialog" resizable="false" style="width:90%;" 
        showEffect="explode" hideEffect="explode"> 
        <p:panel id="panel" header="Edit Category" 
         style="margin-bottom:10px;"> 
         <p:messages id="messages" /> 
         <h:panelGrid columns="3"> 
          <h:outputLabel for="nameTabView" value="Name: " /> 
          <p:tabView id="nameTabView"> 
           <c:forEach var="locale" items="#{categoryBean.userLocales}"> 
            <p:tab title="#{locale.displayLanguage}"> 
             <h:panelGrid columns="2" cellpadding="10"> 
              <h:inputText 
               value="#{categoryBean.currentCategory.name[locale.language]}" /> 
             </h:panelGrid> 
            </p:tab> 
           </c:forEach> 
          </p:tabView> 
         </h:panelGrid> 
         <p:commandButton id="saveCategoryButton" value="Save" 
          oncomplete="categoryDialog.hide()" 
          actionListener="#{categoryBean.save}" 
          update="categoryTable, categoryDialog" /> 
        </p:panel> 

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

당신의 도움이

Answer 2

이는 AJAX 요청 후 DOM을 업데이트에 문제가 될 것으로 보인다 : 여기

는 XHTML 코드입니다. 나는 당신이 페이지 마크 업을 제공하지 않았기 때문에 확신 할 수 없다. 그러나 다음과 같은 이유 때문이라고 생각한다 :

ajax 호출이 완료된 후 페이지의 일부를 업데이트하려면 다음을 수행해야한다. 값으로 업데이트 할 구성 요소의 ID를 명령 단추/명령 링크의 update 특성에 제공하십시오. 나는 네가 한 짓이라고 생각해.

문제는 요청을 트리거 한 구성 요소와 동일한 명명 컨테이너 내에있는 경우 업데이트 할 구성 요소의 서버 측 ID 만 제공 할 수 있다는 것입니다. 다음 ID를 사용하여 <p:commandButton action="xxx" update=":myForm:myTable" /> 테이블을 업데이트하여 ID "myForm"ID가있는 테이블을 ID "myForm"이 업데이트 된 양식으로 만들 수 있습니다.