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

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>

在对话框中按下 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 错误日志（在 chrome 中，它在检查元素中可用），它似乎正在生成任何导致按钮提交整个页面的 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>

然后在 backing-bean 上你会做类似的事情

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

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

import org.primefaces.context.RequestContext;

在 backing-bean 中让它工作。希望现在有帮助。