Estoy tratando de incorporar a twitter boostrap en uno de los primeros JSF2 proyecto.Finalmente logró hacerlo funcionar siguiente ejemplo de http://rkovacevic.blogspot.com/2012/05/jsf-2-twitter-bootstrap.html

Mi pregunta es cómo conseguir que el índice seleccionado de la tabla de datos, de modo que cuando hago clic en el botón editar se muestra el formulario modal con la información seleccionada

Mi forma de pensar fue la de sustituir el html normal href de la etiqueta h:enlace para que yo pueda agregar un evento de acción para establecer el registro seleccionado en mi managed bean,pero el h:link resultado no está recogiendo el «#myModal» de referencia,la dirección URL de h:enlace que falta «#myModal» al final.

Espero que esto tenga sentido

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<ui:composition template="WEB-INF/templates/default.xhtml">
<ui:define name="content">
<div class="well">
<h2>Members</h2>
<br />
<h:panelGroup rendered="#{empty members}">
<em>No registered members.</em>
</h:panelGroup>
<h:dataTable id="dataTable" var="_member" value="#{members.memberList}"
rendered="#{not empty members}" styleClass="table table-striped table-bordered">
<h:column>
<f:facet name="header">Id</f:facet>
#{_member.memberId}
</h:column>
<h:column>
<f:facet name="header">Name</f:facet>
#{_member.firstName}
</h:column>
<h:column>
<f:facet name="header">Email</f:facet>
#{_member.lastname}
</h:column>
<h:column>
<f:facet name="header">Phone #</f:facet>
#{_member.contactNumber}
</h:column>
<h:column>
<f:facet name="header">REST URL</f:facet>
<a href="#{request.contextPath}/rest/members/#{_member.memberId}">/rest/members/#{_member.memberId}</a>
</h:column>
<h:column>
<f:facet name="header">Action</f:facet>
<a href="#myModal" role="button" class="btn" data-toggle="modal">Edit</a>
</h:column>
<h:column>
<f:facet name="header">Action</f:facet>
<h:link href="#myModal"  role="button" class="btn" data-toggle="modal" value="Edit"></h:link>
</h:column>
</h:dataTable>
</div>
<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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>One fine body…</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>
</div>
</ui:define>
</ui:composition>
</html>
InformationsquelleAutor user1682594 | 2013-06-26

1 Comentario

  1. 2

    Para cualquiera que tenga el mismo problema, esta es la forma en que yo tengo que trabajar:

    • tienes que abrir el modal por javascript a ti mismo.
    • si usted no desea que el modal a desaparecer en la página-recargar, usted tiene que utilizar <f:ajax /> para prevenir la página-recargar
    • la única manera que he encontrado para conseguir la variable (en este caso: #{_member}) a un backing bean es evaluar la expresión EL en el ajax-escucha

    xhtml/javascript:

    <h:form>
    <h:dataTable id="dataTable" var="_member" value="#{members.memberList}"
    rendered="#{not empty members}"
    styleClass="table table-striped table-bordered">
    <h:column>
    <f:facet name="header">Action</f:facet>
    <h:commandLink 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>
    <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.member.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) {
    $(modalName).modal('show');
    return false;
    }
    </script>

    Backing Bean:

    package somePackage;
    import javax.faces.bean.ManagedBean;
    import javax.faces.context.FacesContext;
    import javax.faces.event.AjaxBehaviorEvent;
    @ManagedBean
    public class AjaxBean {
    private Member member;
    public final void handleEvent(final AjaxBehaviorEvent event) {
    //get the member from the FacesContext.
    FacesContext context = FacesContext.getCurrentInstance();
    this.member = context.getApplication().evaluateExpressionGet(context, "#{_member}", Member.class);
    }
    public Member getMember() {
    return member;
    }
    public void setMember(Member member) {
    this.member = member;
    }
    }

    De esta manera, el modal se abrirá y usted puede tener acceso a la #{_member} de la tabla de datos a través de #{ajaxBean.miembro} en el modal.

    A veces el modal no cerrar en primer lugar haga clic en este modo si se pulsa el botón «cerrar». Si es así, usted puede reemplazar con

    <h:commandLink onclick="$(#myModal).modal('hide');" />

    Estoy casi seguro de que no hay una forma más elegante de hacer esto. Si alguien sabe que me gustaría saber de él/ella.

    • Gracias por compartir!

Dejar respuesta

Please enter your comment!
Please enter your name here