jsf和twitter bootstrap模式

我有一个数据表，我希望用户点击一行，并在twitter模式中显示有关该行的更多信息。数据表工作正常，但是当我点击时，模态不会弹出。我按照说明手动调用弹出功能，但不起作用。jsf和twitter bootstrap模式

数据表和模式定义：

<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>

一个bean：

public class Employeebean implements Serializable { 
    private static final long serialVersionUID = 1L; 
    private List<Car> cars; 
    private Car selectedCar; 

    public Car getSelectedCar() { 
    return selectedCar; 
    } 

    public void setSelectedCar(Car selectedCar) { 
    this.selectedCar = selectedCar; 
    } 

    @PostConstruct 
    public void init() { 
    cars = new ArrayList<Car>(); 
    cars.add(new Car(1,"King","Asomaning","king.png","halo-5.png",10.0, 
    } 

    public List<Car> getCars() { 
    return cars; 
    } 

    public void setCars(List<Car> cars) { 
    this.cars = cars; 
    } 
}

另一个bean：

public class AjaxBean { 
    private Car car; 

    public final void handleEvent(final AjaxBehaviorEvent event) { 
    //get the member from the FacesContext. 
    FacesContext context = FacesContext.getCurrentInstance(); 
    this.car = context.getApplication().evaluateExpressionGet(context, "#{c}", Car.class); 
    } 

    public Car getCar() { 
    return car; 
    } 

    public void setMember(Car car) { 
    this.car = car; 
    } 
}

来源

2014-02-24 user3345092

后在我得到这个网上很多型动物的方法和解决方案：

的H代码：commandLing嵌套到HTML属性

<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>

我就是做不到值更新<f:setPropertyActionListenter>是以模式形式显示。该方法在渲染模态之后调用。我会在这方面努力。

来源

2015-10-01 21:39:08

jsf和twitter bootstrap模式

回答

相关问题