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命令按钮后我想刷新图像以显示裁剪图像，而不是重新加载所有页面。你能帮我理解为什么页面被bean重新加载了吗？

注意：接受操作中的代码：

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中它在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>

然后在back-bean上你会做类似

的事情

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

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

import org.primefaces.context.RequestContext;

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

Primefaces - 对话框中的CommandButton是刷新页面

3 个答案: