2014-02-24 102 views
0

我有一個數據表,我希望用戶點擊一行,並在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; 
    } 
} 

回答

0

後在我得到這個網上很多型動物的方法和解決方案:

的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>是以模式形式顯示。該方法在渲染模態之後調用。我會在這方面努力。