对话框中的命令按钮正在刷新页面

Question

单击对话框中的命令按钮后，所有页面都被重新加载，但我不想重新加载所有页面，只有一个组件。当fileUpload事件启动并从bean打开对话框时，将显示对话框:

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>

在对话框中按下accept命令按钮后，我只想刷新显示裁剪图像的图像，而不是重新加载所有页面。你能告诉我为什么页面是bean重载的吗?

注意:accept动作中的代码:

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);
    }
}

我已经解决了最初的问题，纠正了javascript代码中的一些错误，取消了ajax标签的注释。现在的问题是，对话框只显示了第一次，下一次，对话框没有打开。没有错误和异常显示

Answer 1

只是检查你的html错误日志(在chrome中它是可用的在inspect元素)，它似乎正在产生任何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 = false?

---

好吧，我在这里改变我的答案，以便可以更清楚地看到周围的工作是简单地避免commandButton呈现任何东西，但允许支持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");

这种方法对我有用，所以我希望它对你有用。顺便说一句，你需要包括

import org.primefaces.context.RequestContext;

，以使其工作。