丰富的模态面板自动关闭答案

【问题标题】：Rich modalpanel closes automatically丰富的模态面板自动关闭
【发布时间】：2011-05-06 17:59:14
【问题描述】：

我面临与Rich modalpanel closes automatically此处所述相同的问题

我正在使用 Richfaces 3.3.0（包含在接缝 2.12 中）。我试图隔离问题，Firebug 显示在模态面板出现后，会生成对服务器的请求。面板在几毫秒后关闭。我为rich_modalPanel 标签尝试了几个位置（在外面的表单内）。

有什么想法吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:a="http://richfaces.org/a4j"
    xmlns:s="http://jboss.com/products/seam/taglib">
<head />
<body id="pgHome">
<f:view>
    <div id="document">
        <h:form id="login">
        <fieldset>
            <h:outputLabel id="UsernameLabel" for="username">Login Name</h:outputLabel>
            <h:inputText id="username" value="#{identity.username}" style="width: 175px;" />
        </fieldset>
        <h:commandButton id="search2" value="modal"
            onclick="#{rich:component('mp')}.show()" />

        </h:form> 
        <rich:modalPanel id="mp" height="200" width="500">
            <f:facet name="header">
                <h:outputText value="Modal Panel Title" />
            </f:facet>
        </rich:modalPanel>
    </div>
</f:view>
</body>
</html>

编辑：

我终于用了这个例子：

<rich:modalPanel id="modalPanelID">
    <f:facet name="header">
        <h:outputText value="header" />
    </f:facet>
    <a onclick="Richfaces.hideModalPanel('modalPanelID');" href="#">Hide</a>
</rich:modalPanel>
<a onclick="Richfaces.showModalPanel('modalPanelID');" href="#">Show</a>

【问题讨论】：

按下按钮时面板是否应该打开，如onclick="#{rich:component('mp')}.show()"中所述

标签： jsf richfaces seam

【解决方案1】：

我有一个类似的问题。我使用命令按钮上传文件。使用 onClick-Event 触发事件而不点击加载页面。如果我使用该操作，我的模式面板会自动隐藏。单击 commandButton 后，modalPanel 应保持打开状态。我需要提交表单来处理bean中上传的数据。

这是我的代码...

<h:commandButton id="Button"
    process="@this,attachmentPanel"
    binding="#{actionButton}"
    value="#{messages['view.attachment.add']}"
    action="#{myHandler.addAttachment()}"
    reRender="attachmentFramePanel">
</h:commandButton>

【讨论】：

【解决方案2】：

尝试使用<a4j:commandButton> 而不是<h:commandButton>。

但是由于您只是拥有onclick，因此您根本不需要commandButton - 使用<input type="button" onclick=".." />

【讨论】：

这仍然会发布表单并导致相同的行为
@Shervin 不，不会的。 <a4j:commandButton 使用 ajax 调用 action。

【解决方案3】：

这种行为是正常的，因为您使用以下代码使用 commandButton 显示您的 ModalPanel：

<h:commandButton id="search2" value="modal" onclick="#{rich:component('mp')}.show()" />

commandButton 将显示ModalPanel，然后将提交表单。这将强制页面完全重新显示，这就是您得到此行为的原因。

要解决您的问题，您必须在onclick 事件的末尾return false;，这可以翻译为显示模态面板然后停止任何处理，即不要提交表单。使用的代码如下：

<h:commandButton id="search2" value="modal" onclick="#{rich:component('mp')}.show(); return false;" />

【讨论】：

【解决方案4】：

我的猜测是，由于您使用的是h:commandButton，因此您正在发布表单，除非这是您想要做的，否则就是问题所在。

至少让按钮返回 false，这样它就不会发布，或者使用普通的 html 按钮。

【讨论】：

+1 谢谢，抱歉，我不明白您所说的“返回 false”是什么意思，因为 romaintaz 回答有效，这是正确的。