Primefaces - 對話框中的CommandButton正在刷新頁面

Question

在對話框中單擊命令按鈕後，所有頁面都正在重新加載，但我不想重新加載所有頁面，只有一個組件。 的對話框時，文件上傳的事件展開表演，並從豆打開的對話框：

RequestContext.getCurrentInstance().execute("openCropImageDialog('artistImageCropperDialog',"+this.MAX_SIZE_PX+");"); 

這是對話部分的代碼：

<composite:implementation> 

     <h:panelGroup layout="block" styleClass="links"> 
      <h:panelGroup id="imageCropperDialog" layout="block" styleClass="hidden"> 
       <h:form id="imageCropperForm"> 
        <p:imageCropper id="cropperImage" value="#{cc.attrs.croppedImage}" 
           image="/upload/#{cc.attrs.imageTmp}" 
           initialCoords="#{cc.attrs.initialCoords}" 
           aspectRatio="1" 
           minSize="#{cc.attrs.minSize}" 
           /> 
        <h:commandButton id="acceptButton" action="#{cc.attrs.acceptCropAction}" styleClass="hidden"> 
         <f:ajax execute="@form" render="@form :messages :form:pictureHandler:updatableElements" onevent="onAcceptCropEvent"/> 
        </h:commandButton> 

        <h:commandButton id="cancelButton" action="#{cc.attrs.cancelCropAction}" styleClass="hidden"> 
         <f:ajax execute="@this" render="@form :messages"/> 
        </h:commandButton> 


       </h:form> 
      </h:panelGroup> 
     </h:panelGroup> 
    </composite:implementation> 

和之後按Acept命令按鈕對話框我只想刷新顯示裁剪圖像的圖像，而不是重新加載所有頁面。 你能幫我瞭解爲什麼頁面被重新加載了嗎？

注：該代碼接受行動：

public void cropImage(){ 
    try { 
     if(croppedImage!=null){ 
      // Remove the old picture and add the new one 
      this.entity.getPictures().clear(); 
      this.entity.getPictures().add(newPicture); 
      this.newPictures.add(newPicture); 
      int x=getOriginalSize(croppedImage.getLeft()); 
      int y=getOriginalSize(croppedImage.getTop()); 
      int width = getOriginalSize(croppedImage.getWidth()); 
      int height = getOriginalSize(croppedImage.getHeight()); 
      BufferedImage bImage = ImageIO.read(cropInputStream); 
      BufferedImage selectedImage = bImage.getSubimage(x, y, width, height); 
      OutputStream os = new ByteArrayOutputStream(); 
      ImageIO.write(selectedImage, newPicture.getType().name().toLowerCase(), os); 
      InputStream newIS = new ByteArrayInputStream(((ByteArrayOutputStream) os).toByteArray()); 
      int length = ((ByteArrayOutputStream) os).toByteArray().length; 
      this.pictureController.createOrUpdateCompress(newPicture, newIS, length,true); 
     } 

    } catch (Exception e) { 
     addFacesMessage(FacesMessage.SEVERITY_ERROR, MessageKeys.GENERIC_ERROR_IMAGEPROCESSING, 
       newPicture.getFileName(), newPicture.getType().name(), e.getMessage()); 
     this.newPictures.remove(newPicture); 
    } 
} 

我已經解決了最初的問題，糾正javscript代碼，並取消註釋AJAX標籤的一些錯誤。 現在的問題是，對話框只顯示第一次，下一次，對話框不被操作。沒有錯誤，也沒有例外。

Answer 1

只要檢查你的html錯誤日誌（在鉻它是在檢查元素中可用），它似乎是產生任何JavaScript錯誤，導致按鈕提交整個頁面。

Answer 2

爲什麼你評論ajax？嘗試這個。

<h:commandButton id="acceptButton" action="#{cc.attrs.acceptCropAction}" styleClass="hidden"> 
     <f:ajax execute="@form" render=":cropperImage" onevent="onAcceptCropEvent"/> 

</h:commandButton> 

Answer 3

原始

您是否嘗試過使用屬性AJAX =假？

---

編輯

好吧，我在這裏改變我的回答，以便它可以看到更清晰的解決辦法是簡單地從渲染什麼，但允許支持bean來執行更新避免命令按鈕。在那裏，你可以做這樣的事情

<h:commandButton id="acceptButton" action="#{cc.attrs.acceptCropAction}" 
styleClass="hidden" value="#{cc.attrs.acceptCropActionLabel}"> 
    <f:ajax execute="@form" render="@none" /> 
</h:commandButton> 

然後你會做這樣的事情

RequestContext.getCurrentInstance().update("id_of_whatever_you_want"); 

的支持bean和這種方式爲我工作，所以我希望它爲你工作。順便說一句，你需要包括

import org.primefaces.context.RequestContext; 

在它的支持bean的工作。希望現在有所幫助。