title: jsf and twitter bootstrap modal
body: <p>I have a datatable and I would like the user to click on a row and reveal more info about that row in a twitter modal. The datatable works fine but the modal will not pop up when i click. I followed instructions to call the pop up function manually but it does not work.</p>
  
  <p>The data table and modal definitions:</p>
  
  <pre><code>&lt;div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
    &lt;h:form id="modalForm"&gt;
      &lt;div class="modal-header"&gt;
        &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
        &lt;h3 id="myModalLabel"&gt;Modal header&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
        &lt;p&gt;Use backing Bean property here... &lt;h:outputText value="#{ajaxBean.car.name}"/&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
        &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Close&lt;/button&gt;
        &lt;button class="btn btn-primary"&gt;Save changes&lt;/button&gt;
      &lt;/div&gt;
    &lt;/h:form&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
    function openModal(modalName) {
      $(myModal).modal('show');
      return false;
    }
  &lt;/script&gt;
  
  &lt;h:form&gt;
    &lt;h:dataTable id="dataTable" var="c" value="#{employeebean.cars}" styleClass="table table-striped table-bordered"&gt;
      &lt;h:column&gt;
        &lt;f:facet name="header"&gt;Name&lt;/f:facet&gt;
        #{c.name}
      &lt;/h:column&gt;
  
      &lt;h:column&gt;
        &lt;f:facet name="header"&gt;Action&lt;/f:facet&gt;
        &lt;h:commandLink  onclick="$(#myModal).modal('hide');" value="Edit"&gt;
          &lt;!-- the listener sets the variable in backing bean and onevent opens the modal --&gt;
          &lt;!-- you also have to render the form inside the modal, so the values get updated with new ones from backing bean --&gt;
          &lt;f:ajax listener="#{ajaxBean.handleEvent}" onevent="openModal('myModal');" render=":modalForm" /&gt;
        &lt;/h:commandLink&gt;
      &lt;/h:column&gt;
    &lt;/h:dataTable&gt;
  &lt;/h:form&gt;
  </code></pre>
  
  <p>A Bean:</p>
  
  <pre><code>public class Employeebean implements Serializable {
    private static final long serialVersionUID = 1L;
    private List&lt;Car&gt; cars;
    private Car selectedCar;
  
    public Car getSelectedCar() {
      return selectedCar;
    }
  
    public void setSelectedCar(Car selectedCar) {
       this.selectedCar = selectedCar;
    }
  
    @PostConstruct
    public void init() {
      cars = new ArrayList&lt;Car&gt;();
      cars.add(new Car(1,"King","Asomaning","king.png","halo-5.png",10.0,
    }
  
    public List&lt;Car&gt; getCars() {
      return cars;
    }
  
    public void setCars(List&lt;Car&gt; cars) {
      this.cars = cars;
    }
  }
  </code></pre>
  
  <p>Another Bean:</p>
  
  <pre><code>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;
    }  
  }
  </code></pre>