如何同时显示模态和执行动作答案

【问题标题】：How to display a modal and execute action at the same time如何同时显示模态和执行动作
【发布时间】：2013-10-17 23:37:51
【问题描述】：

我的 JSF 页面中有这段代码：

<a href="#adios" data-toggle="modal">
<h:commandButton value="Pay!" action="#{basketManager.pay(accountManager.currentAccount.username)}" 
class="btn btn-primary btn-lg"></h:commandButton>
</a>

模态显示，但action 未执行...如何同时执行两个操作（显示模态和调用方法）？

【问题讨论】：

为什么首先要在链接中提交？
@LuiggiMendoza 好吧，不是我想要“链接”，我只是想引用脚本，所以当我按下按钮时它被激活。当我按下此按钮而不是使用链接时，是否有另一种方法来运行脚本？这会很有帮助。

标签： java javascript jquery jsf

【解决方案1】：

 <h:form>
    <p:remoteCommand name="callAction" onstart="Place your javascript code to show the model"
       action="#{basketManager.pay(accountManager.currentAccount.username)}"  
       update="@form" />
    <h:commandButton value="Pay!" class="btn btn-primary btn-lg" 
                     onclick="callAction();" />
 </h:form>

在这里您可以在 javascript 函数上调用您的 ManagedBean 方法。当远程命令开始执行时，它会显示模型，甚至调用操作方法

希望对你有帮助

【讨论】：

它向我抛出以下错误：类 'org.primefaces.component.fileupload.FileUploadRenderer' 缺少运行时依赖项：java.lang.NoClassDefFoundError: org/apache/commons/fileupload/FileItem。有关详细信息，请参阅 server.log。
<p:commandButton value="Pay!" update="@form" action="#{basketManager.pay(accountManager.currentAccount.username)}" />
@JeanCarlosSuárezMarranzini 只是一个简单的问题，您的UICommand 即<h:commandButton> 在<h:form> 内吗？
@LuiggiMendoza 是的，它在 <h:form> 内

【解决方案2】：

如果您想在提交表单时执行脚本，您可以在 commandButton 标记中使用onclick="alert('Clicked submit button!');" 事件。

执行这两种操作的方法之一是在您的 bean 中使用 @ManagedProperty 注释。例如，将您的 sumbit 按钮更改为这个

<h:form>
    <h:commandButton value="Pay!" action="#{basketManager.pay()}" 
    class="btn btn-primary btn-lg" onclick="alert('Clicked submit button!');" />
</h:form>

那么你的 Bean 可能更像这样：

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean(name = "basketManager")
@RequestScoped
public class BasketManager implements Serializable {

    @ManagedProperty(value="#{accountManager}")
    private AccountManager accountManager;

    //this is nessesery!
    public void setAccountManager(AccountManager accountManager) {
        this.accountManager = accountManager;
    }

    public String pay() {
        if(accountManager != null) {
            //... do something using accountManager.currentAccount.username
        }
        return ""; // your action result
    }
}

您必须记住 BasketManager bean 的范围必须与 AccountManager bean 相同或更小。例如，如果 AccountManager 是 @SessionScoped，那么 BasketManager 可以是 @SessionScoped 或 @ViewScoped 或 @RequestScoper。那不可能是@ApplicationScoped！

【讨论】：