Méthode dans un bean qui vérifie si une ligne dans une databine Primefaces est toujours en cours d'édition

Question

Dans une application Java basée JSF et Primefaces, j'ai une table, où l'utilisateur peut ajouter dynamiquement des lignes afin d'ajouter des commentaires.

Voici le code d'un tableau avec des commentaires. Les commentaires peuvent être ajoutés en appuyant sur un bouton. Appuyez sur le bouton pour ajouter un commentaire en haut de la table. Tout fonctionne correctement si l'utilisateur appuie sur l'icône de vérification pour enregistrer le texte entré dans une nouvelle ligne. Cependant, lors de l'enregistrement de la page entière (code non inclus), seuls les champs auteur et date seront sauvegardés. Tout texte entré est perdu. J'essaie de trouver un moyen de savoir si une ligne dans une databine Primefaces est toujours en cours d'édition, afin de soit l'enregistrer, soit afficher un avertissement à l'utilisateur.

C'est le xhtml:

<div class="ui-g-6 no-vertical-padding"> 
    <f:event type="preRenderView" listener="#{commentController.initPage()}"/> 
    <h:form id="CommentsForm"> 
     <p:commandButton style="width: 1px; height: 1px; position: fixed; top: -1000px;" 
         action="#{mainController.save}" styleClass="cleanDirtyButton"/> 
     <p:fieldset legend="Comments" style="height: 309px"> 
      <p:remoteCommand name="onCellEdit" update="commentTable" partialSubmit="true" 
          ignoreAutoUpdate="true"/> 

      <!--<h:inputHidden id="hiddenSizeId" value="#{commentForm.itemsSize}"/>--> 
      <!--<h:inputHidden id="hiddenIxId" value="#{commentForm.newItemIx}"/>--> 

      <!-- workarround --> 
      <h:inputHidden id="hiddenSizeId" value="1000000"/> 
      <h:inputHidden id="hiddenIxId" value="999999"/> 

      <script type="text/JavaScript"> 
       function getNewItemPos() { 

        var noOfItems = $("#CommentsForm\\:hiddenSizeId").val(); 
        var itemIx = $("#CommentsForm\\:hiddenIxId").val(); 


        var bucketHt = $("#CommentsForm\\:commentTable .ui-datatable-scrollable-body").height(); 
        var scrollHt = $("#CommentsForm\\:commentTable .ui-datatable-scrollable-body").prop("scrollHeight"); 

        var itemHt = parseInt(scrollHt)/parseInt(noOfItems); 
        var noItemsInBucket = parseInt(bucketHt)/parseFloat(itemHt); 

        var itemNo = parseInt(itemIx) + 1; 
        var targetBucket = parseInt(itemNo)/parseFloat(noItemsInBucket); 
        var halfBucketHt = parseInt(bucketHt)/2; 

        var scrollPos = 
          (parseInt(bucketHt) * (parseFloat(targetBucket) - 1)) + parseFloat(halfBucketHt); 
        var scrollPosInt = Math.round(parseFloat(scrollPos)); 

        $('#CommentsForm\\:commentTable .ui-datatable-scrollable-body').animate({scrollTop: scrollPosInt}); 
       } 

       function setCellFocus() { 
        $('.focus_comment:visible').delay().focus(); 
       } 

       function cellEdit() { 
        setTimeout(setCellFocus, 1500); 
        $('.editTable .ui-datatable-data tr').last().find('span.ui-icon-pencil').each(function() { 
         jQuery(this).click() 
        }); 
       } 

      </script> 

      <p:dataTable id="commentTable" 
         widgetVar="commentTableWidget" 
         value="#{projectForm.project.Comments}" 
         sortOrder="DESCENDING" 
         sortBy="#{comment.changedOn}" 
         var="comment" 
         editable="true" 
         rowIndexVar="rowIndex" 
         resizableColumns="true" 
         scrollable="true" 
         scrollRows="10" 
         liveScroll="true" 
         scrollHeight="212" 
         style="margin-top: 5px;" 
         emptyMessage="No comment found" 
         styleClass="ui-corner-all plus-button editTable noBackground"> 

       <f:facet name="footer"> 
        <p:commandButton id="addlink" 
            action="#{commentController.addComment()}" 
            oncomplete="getNewItemPos();cellEdit();setCellFocus();" 
            disabled="#{commentForm.editMode or !pR.hasPermission('PROJECTS:write')}" 
            process="@this" 
            partialSubmit="true" 
            update="commentTable" 
            value="Add Comment" 
            styleClass="table-plus-button" 
            icon="fa fa-plus" iconPos="right"> 
         <p:ajax update=":CommentsForm:commentTable :CommentsForm:hiddenIxId :CommentsForm:hiddenSizeId"/> 
        </p:commandButton> 

       </f:facet> 

       <p:ajax event="rowEdit" listener="#{commentController.onRowEdit}" 
         update="commentTable" 
         oncomplete="if (args &amp;&amp; !args.validationFailed) {onCellEdit();} else {$('.editTable tbody.ui-datatable-data tr td .deleteButton').hide();}"/> 
       <p:ajax event="rowEditCancel" listener="#{commentController.onRowCancel}" 
         onsuccess="onCellEdit();" update="commentTable"/> 
       <p:ajax event="rowEditInit" listener="#{commentForm.setEditMode(true)}" 
         update="addlink" 
         onstart="$('.editTable tbody.ui-datatable-data tr td .ui-icon-pencil').hide();$('.editTable tbody.ui-datatable-data tr td .deleteButton').hide();"/> 

       <p:column width="18%" headerText="date" sortBy="#{comment.changedOn}" 
          styleClass="align-top" 
          sortOrder="DESCENDING"> 
        <h:outputText value="#{comment.changedOn eq null ? 
           (comment.createdOn eq null ? '': comment.createdOn) : comment.changedOn}"> 
         <f:convertDateTime type="date" pattern="dd.MM.yyyy" timeZone="CET"/> 
        </h:outputText> 
       </p:column> 

       <p:column width="30%" headerText="Text"> 
        <p:cellEditor> 
         <f:facet name="output"> 
          <span style="width: 100%; height: 100%"> 
           <h:outputText escape="true" style="white-space:pre-line;" 
               id="commentDisplay" 
               value="#{comment.text.length() > 200 ? comment.text.substring(0, 200).concat(' ...'): comment.text}"> 
           </h:outputText> 
           <p:tooltip id="commentDisplayToolTip" 
              for="commentDisplay,commentDisplayToolTipTxt" 
              rendered="#{comment.text.length() gt 200}" 
              beforeShow="$('.ui-tooltip:visible').hide()" 
              myPosition="left bottom" atPosition="right bottom" 
              hideDelay="500"> 
            <p:outputLabel id="commentDisplayToolTipTxt" 
                styleClass="scrollOutputLabel" 
                value="#{comment.text}"/> 
           </p:tooltip> 
          </span> 
         </f:facet> 
         <f:facet name="input"> 
          <p:message for="text" id="nameMsg"/> 
          <p:inputTextarea value="#{comment.text}" id="text" 
              onkeypress="setConfirmUnload(true); if ((($.browser.mozilla &amp;&amp; event.ctrlKey &amp;&amp; event.keyCode==13) ||(($.browser.msie||$.browser.chrome) &amp;&amp; event.ctrlKey)) 
              &amp;&amp; (! (event.altKey &amp;&amp; event.ctrlKey))) 
          {$('.editTable tbody.ui-datatable-data tr td .ui-icon-check:visible').click(); $('#buttonForm\\:speichern').addClass('unsaved'); setConfirmUnload(true); }" 
              title="Text" 
              styleClass="Wid90 input_mandatory focus_comment"> 
          </p:inputTextarea> 
         </f:facet> 
        </p:cellEditor> 
       </p:column> 

       <p:column width="30%" headerText="author" sortBy="#{comment.changedBy}" 
          styleClass="align-top" 
          sortOrder="DESCENDING"> 
        <h:outputText 
          value="#{comment.changedBy eq null ? 
         (comment.createdBy eq null ? '' : commentController.extractUserData(comment.createdBy)) 
         :commentController.extractUserData(comment.changedBy)}"/> 
       </p:column> 

       <p:column width="83" id="editor" styleClass="NoPadding align-top"> 
        <p:rowEditor/> 
        <h:panelGroup id="deleteSpan"> 
         <p:commandButton id="delete" partialSubmit="true" 
             style="height: 41px;" 
             title="Löschen" 
             action="#{commentController.removeComment(comment)}" 
             update="commentTable" 
             process="@this commentTable" 
             immediate="true" 
             icon="fa fa-close" 
             iconPos="center" 
             styleClass="deleteButton Fright" 
             disabled="#{empty commentForm.project.Comments}"> 
          <p:confirm header="Confirmation" message="Delete Comment?" 
             icon="ui-icon-alert"/> 
         </p:commandButton> 
        </h:panelGroup> 
       </p:column> 
      </p:dataTable> 
     </p:fieldset> 
    </h:form> 
</div> 

Et c'est le contrôleur:

@Named("commentController") 
@RequestScoped 
public class CommentController { 

    // this method is executed when pressing the add-comment button: 
    public void addComment() { 
     Comment comment = new Comment(); 
     commentForm.setComment(comment); 
     final DataTable commentTable = (DataTable) FacesContext.getCurrentInstance().getViewRoot().findComponent("commentsForm:commentTable"); 
     if (commentTable != null) { 
      commentTable.setValueExpression("sortBy", null); 
      commentTable.setValueExpression("sortOrder", null); 
     } 
     comment.setProject(projectForm.getProject); 
     projectForm.getProject().getComments().add(comment); 
     if (commentTable) { 
      commentTable.processValidators(getFacesContext()); 
     } 
    } 

    // not really relevant for my question, because: 
    // this method is only called when properly ending the rowEdit by pressing the green check 
    public void onRowEdit(RowEditEvent event) { 
     Comment comment = (Comment) event.getObject(); 
     if (!validateComment(comment)) { 
      getFacesContext().validationFailed(); 
     } else { 
      if (comment.getId() != 0 && commentForm.getProject().getComments().contains(comment)) { 
       projectForm.getProject().getComments().set(commentForm.getProject().getComments().indexOf(comment), comment); 
      } 
      commentForm.setEditMode(false); 
     } 
    } 
} 

Answer 1

j'ai pu résoudre le problème en ajoutant

<p:ajax update="commentTable"/> 

au

<p:inputTextarea...> 

après avoir trouvé ce post: stackoverflow.com/a/44710044/6426882