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