【问题标题】:Jsf 2.2 h:commandButton not working inside bootstrap modalJsf 2.2 h:commandButton 在引导模式中不起作用
【发布时间】:2015-09-26 14:35:39
【问题描述】:

我正在尝试使用带有 CDI 的纯 JSF 2.2 从引导模式更新 h:dataTable 中的值。

这是数据表:

<h:dataTable id="tabNotas" value="#{notaBean.notas}" var="nota"
                        styleClass="table table-hover">
                        <h:column>
                            <f:facet name="header">
                                <h:outputText value="ALUNO" />
                            </f:facet>
                            <h:outputText value="#{nota.aluno.nome}" />
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                <h:outputText value="Disciplina" />
                            </f:facet>
                            <h:outputText value="#{nota.disciplina.nome}" />
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                <h:outputText value="TIPO" />
                            </f:facet>
                            <h:outputText value="#{nota.tipo.descricao}" />
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                <h:outputText value="NOTA" />
                            </f:facet>
                            <h:outputText value="#{nota.valor}" />
                        </h:column>
                        <h:column>

                            <h:commandLink class="btn btn-primary" value="Alterar">
                                <f:passThroughAttribute name="data-toggle" value="modal" />
                                <f:passThroughAttribute name="data-target" value="#myModal" />
                                <f:ajax listener="#{notaBean.editarNota(nota)}"
                                    render="formModalNotas" />
                            </h:commandLink>
                        </h:column>
                    </h:dataTable>

这里是模态:

<div id="myModal" class="modal fade">
                <h:form id="formModalNotas" role="form">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <h:messages showSummary="true" errorClass="alert alert-danger"
                                infoClass="alert alert-success" for="formModalNotas" />
                            <input type="hidden" name="id" value="#{notaBean.nota.aluno.id}" />
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"
                                    aria-hidden="true"></button>
                                <h4 class="modal-title">Alterar</h4>
                            </div>
                            <div class="modal-body">
                                <div class="form-group ">
                                    <label for="tipoNota">Tipo da Nota:</label>
                                    <h:inputText value="#{notaBean.nota.tipo.descricao}"
                                        styleClass="form-control" id="tipoNota" disabled="true" />
                                </div>
                                <div class="form-group ">
                                    <label for="nota">Nota:</label>
                                    <h:inputText value="#{notaBean.nota.valor}"
                                        styleClass="form-control" id="nota" />
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default"
                                    data-dismiss="modal">Close</button>
                                <h:commandButton value="Salvar" action="#{notaBean.alterar}"
                                    styleClass="btn btn-primary">
                                </h:commandButton>
                            </div>
                        </div>
                    </div>
                </h:form>
            </div>

模式工作得很好,问题在于从未调用过的 action="#{notaBean.alterar}" 。

我做错了吗?以前有人做过吗?

编辑

我正在使用 Tomcat 8。这是 NotaBean 的代码,我已更改为 ViewScoped 仍然没有 =/

@Named(value = "notaBean")
@ViewScoped
public class NotaBean implements Serializable {

private static final long serialVersionUID = 5134990385063835570L;

@Inject
private NotaDao notaDao;

@Inject
private Dao<Curso> daoCurso;

@Inject
private Dao<Disciplina> disciplinaDao;

@Inject
private Nota nota;

private Aluno aluno;

private List<Disciplina> disciplinas;

@PostConstruct
public void init() {
    nota.setDisciplina(new Disciplina());
}

public Nota getNota() {
    return nota;
}

public void setNota(Nota nota) {
    this.nota = nota;
}

public Aluno getAluno() {
    return aluno;
}

public void setAluno(Aluno aluno) {
    this.aluno = aluno;
}

public List<Disciplina> getDisciplinas() {
    if (aluno == null || aluno.getCurso().getId() == null) {
        disciplinas = null;
    } else {
        Curso cursoSelecionado = daoCurso.buscaPorId(aluno.getCurso()
                .getId());
        disciplinas = cursoSelecionado.getDisciplinas();
    }

    return disciplinas;
}

public void setDisciplinas(List<Disciplina> disciplinas) {
    this.disciplinas = disciplinas;
}

@Transacional
public void cadastrar() {
    try {
        nota.setAluno(aluno);
        nota.setDisciplina(disciplinaDao.buscaPorId(nota.getDisciplina()
                .getId()));
        validar(nota);
        notaDao.adiciona(nota);
        FacesContext facesContext = FacesContext.getCurrentInstance();
        FacesMessage facesMessage = new FacesMessage(
                "Nota cadastrada com sucesso!");
        facesMessage.setSeverity(FacesMessage.SEVERITY_INFO);
        facesContext.addMessage(null, facesMessage);
    } catch (Exception e) {
        e.printStackTrace();
        FacesContext facesContext = FacesContext.getCurrentInstance();
        FacesMessage facesMessage = new FacesMessage(e.getMessage());
        facesMessage.setSeverity(FacesMessage.SEVERITY_ERROR);
        facesContext.addMessage(null, facesMessage);
    }
}

private void validar(Nota nota) throws Exception {
    if (nota.getValor() == null) {
        throw new Exception("Valor da nota � obrigat�rio");
    }

    if (nota.getValor() < 0 || nota.getValor() > 10) {
        throw new Exception("Valor da nota deve ser entre 0 e 10");
    }

    for (Nota notaAluno : aluno.getNotas()) {
        if (notaAluno.getDisciplina().equals(nota.getDisciplina())) {
            if (notaAluno.getTipo().equals(nota.getTipo())) {
                throw new Exception("Nota de " + nota.getTipo()
                        + " para a disciplina " + notaAluno.getDisciplina()
                        + " j� cadastrada");
            }
        }
    }
}

public List<TipoNota> getTiposNota() {
    return Arrays.asList(TipoNota.values());
}

public List<Nota> getNotas() {
    return notaDao.buscarNotasAluno(aluno.getId());
}

public void editarNota(Nota nota) {
    this.nota = nota;
}

@Transacional
public void alterar() {
    try {
        validar(nota);
        notaDao.atualiza(nota);
        FacesContext facesContext = FacesContext.getCurrentInstance();
        FacesMessage facesMessage = new FacesMessage(
                "Nota alterada com sucesso!");
        facesMessage.setSeverity(FacesMessage.SEVERITY_INFO);
        facesContext.addMessage(null, facesMessage);
    } catch (Exception e) {
        e.printStackTrace();
        FacesContext facesContext = FacesContext.getCurrentInstance();
        FacesMessage facesMessage = new FacesMessage(e.getMessage());
        facesMessage.setSeverity(FacesMessage.SEVERITY_ERROR);
        facesContext.addMessage(null, facesMessage);
    }
}
}

【问题讨论】:

  • 能否提供你的服务器和版本以及NotaBean的源代码?
  • 检查客户端的 html 表单是否在“对话框”中(或者至少是对话框中的内容),如果它完全呈现...
  • @AntoineSabot-Durand 我已经用 NotaBean 源代码编辑了这个问题。我正在使用 Tomcat 8
  • @Kukeltje 对话框中有一个表单。对话框呈现正常,只是没有调用操作。
  • 可能是因为 CDI 没有激活。您的 CDI 实施和版本是什么。为什么不使用像 TomEE、Glassfish 或 wildfly 这样的 Java EE 服务器,它会让您的生活更轻松。

标签: twitter-bootstrap jsf-2 cdi jsf-2.2


【解决方案1】:

如果你把&lt;h:form&gt;&lt;/h:form&gt;放在模态框外面,问题就解决了:​

<h:form>
.... modal.....
</h:form>

根据我在模态中的说法,命令按钮应与&lt;f:ajax&gt;&lt;/f:ajax&gt; 一起使用,否则它将重新加载页面。

【讨论】:

  • ???我不明白为什么这会有所帮助。是的,没有f:ajax 会这样做,但这是一个不相关的问题
  • 它对我有用,我认为通过将表单保持在外面,模态表单将呈现在 html 中(如果你把它放在里面,它可能不会呈现并与你的其他表单冲突,或者如果我也可以工作将表单保留在 modal-content 中),以便 h:commandButton 起作用。
  • 你是不是不小心有嵌套表单?
猜你喜欢
  • 2013-04-03
  • 2014-07-14
  • 2011-08-20
  • 1970-01-01
  • 2014-01-17
  • 2016-11-20
相关资源
最近更新 更多