Twitter bootstrap jsf和twitter引导模式

Twitter bootstrap jsf和twitter引导模式,twitter-bootstrap,jsf,Twitter Bootstrap,Jsf,我有一个datatable,我希望用户点击一行,并在twitter模式中显示关于该行的更多信息。datatable工作正常,但单击时不会弹出模式。我按照说明手动调用弹出函数,但它不起作用 数据表和模态定义: <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <h:form id="mo

我有一个datatable,我希望用户点击一行,并在twitter模式中显示关于该行的更多信息。datatable工作正常,但单击时不会弹出模式。我按照说明手动调用弹出函数,但它不起作用

数据表和模态定义:

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <h:form id="modalForm">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
      <p>Use backing Bean property here... <h:outputText value="#{ajaxBean.car.name}"/></p>
    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
      <button class="btn btn-primary">Save changes</button>
    </div>
  </h:form>
</div>

<script type="text/javascript">
  function openModal(modalName) {
    $(myModal).modal('show');
    return false;
  }
</script>

<h:form>
  <h:dataTable id="dataTable" var="c" value="#{employeebean.cars}" styleClass="table table-striped table-bordered">
    <h:column>
      <f:facet name="header">Name</f:facet>
      #{c.name}
    </h:column>

    <h:column>
      <f:facet name="header">Action</f:facet>
      <h:commandLink  onclick="$(#myModal).modal('hide');" value="Edit">
        <!-- the listener sets the variable in backing bean and onevent opens the modal -->
        <!-- you also have to render the form inside the modal, so the values get updated with new ones from backing bean -->
        <f:ajax listener="#{ajaxBean.handleEvent}" onevent="openModal('myModal');" render=":modalForm" />
      </h:commandLink>
    </h:column>
  </h:dataTable>
</h:form>

在互联网上采用了许多不同的方法和解决方案后,我得出了以下结论:

嵌套在html属性中的h:commandLing代码

<a class="btn btn-danger" 
jsfc="h:commandLink"
type="button"
action="#{pesquisaSubgrupoBean.setSubgrupoSelecionado(subgrupo)}"
immediate="true">
                   <f:setPropertyActionListener 
                    value="#{subgrupo}" 
                    target="#{pesquisaSubgrupoBean.subgrupoSelecionado}"/>

                   <f:passThroughAttribute name="data-toggle" value="modal" />
                   <f:passThroughAttribute name="data-target" value="#myModal" />
                   <f:param
                    name="descricaoSubgrupo"
                    value="#{subgrupo.descricao}"></f:param>
                   <f:ajax
                    execute="@this"/>

<i class="icon_close_alt2"></i>

以及模态形式的代码:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-sm">
    <div class="modal-content">
        <h:form id="myForm">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                <h4 class="modal-title">Confirmação de exclusão</h4>
            </div>
            <div class="modal-body">
            <h:panelGroup 
                layout="block" 
                id="panelDescricao">

                Deseja realmente excluir o registro selecionado?

                <a  type="submit"
                    class="btn btn-warning btn-sm"
                    jsfc="h:commandLink"
                    action="#{pesquisaSubgrupoBean.excluir()}">
                    Sim
                        <f:passThroughAttribute name="data-dismiss" value="modal" />
                    <f:ajax
                        execute="@this"
                        render="@form"/>
                </a>

                <button 
                    id="close"
                    type="submit" 
                    class="btn btn-info btn-sm">Não</button>
            </h:panelGroup>
            </div>

        </h:form>
    </div>
</div>

×
非排他性确认
不包括注册登记的房地产?
模拟
Não
我只是无法在模态窗体上显示在
上更新的值。该方法在模式渲染后调用。我会努力的

<a class="btn btn-danger" 
jsfc="h:commandLink"
type="button"
action="#{pesquisaSubgrupoBean.setSubgrupoSelecionado(subgrupo)}"
immediate="true">
                   <f:setPropertyActionListener 
                    value="#{subgrupo}" 
                    target="#{pesquisaSubgrupoBean.subgrupoSelecionado}"/>

                   <f:passThroughAttribute name="data-toggle" value="modal" />
                   <f:passThroughAttribute name="data-target" value="#myModal" />
                   <f:param
                    name="descricaoSubgrupo"
                    value="#{subgrupo.descricao}"></f:param>
                   <f:ajax
                    execute="@this"/>

<i class="icon_close_alt2"></i>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-sm">
    <div class="modal-content">
        <h:form id="myForm">
            <div class="modal-header">
                <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                <h4 class="modal-title">Confirmação de exclusão</h4>
            </div>
            <div class="modal-body">
            <h:panelGroup 
                layout="block" 
                id="panelDescricao">

                Deseja realmente excluir o registro selecionado?

                <a  type="submit"
                    class="btn btn-warning btn-sm"
                    jsfc="h:commandLink"
                    action="#{pesquisaSubgrupoBean.excluir()}">
                    Sim
                        <f:passThroughAttribute name="data-dismiss" value="modal" />
                    <f:ajax
                        execute="@this"
                        render="@form"/>
                </a>

                <button 
                    id="close"
                    type="submit" 
                    class="btn btn-info btn-sm">Não</button>
            </h:panelGroup>
            </div>

        </h:form>
    </div>
</div>