jsf - How to handle bootstrap modal in Java Server Faces? -
i principle composite-components , bootstraps modal wont work together.
whats best practice manage multiple custom composite components dialogs , use example in jsf-table. pass managed bean value selected row dialog.
this works me if wrote in 1 page file. see last one.
bootstrapmodal.xhtml modal wrapped in composite component
<?xml version="1.0" encoding="utf-8"?> <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:cc="http://xmlns.jcp.org/jsf/composite"> <cc:interface> <cc:attribute name="title" /> <cc:attribute name="linknamelable" /> <cc:attribute name="linknamevalue" /> <cc:attribute name="urlnamelable" /> <cc:attribute name="urlnamevalue" /> <cc:attribute name="savebuttontext" /> <cc:attribute name="savebuttonaction" method-signature="java.lang.string action()" /> </cc:interface> <cc:implementation> <div id="#{cc.clientid}" class="modal fade mymodal" tabindex="-1" role="dialog" aria-labelledby="mymodal" aria-hidden="true" > <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <h:form> <h:outputlabel value="#{cc.attrs.linknamelable}" /> <h:inputtext value="#{cc.attrs.linknamevalue}" /> <h:outputlabel value="#{cc.attrs.urlnamelable}" /> <h:inputtext value="#{cc.attrs.urlnamevalue}" /> <h:commandbutton value="#{cc.attrs.savebuttontext}" action="#{cc.attrs.savebuttonaction}" /> </h:form> </div> </div> </div> </div> </cc:implementation> </html> the wrapping div doest not work.
<div id=#{cc.clientid}>...</div> i tried pass id form inside.
<h:form id=#{cc.clientid} view.xhtml composite component not work. f:ajax cant render id composite component
... <script> function showmodal() { $('#mymodal').modal('show'); } </script> ... <h:datatable id="mytable" value="#{linkcontroller.linklist}" var="o"> ... <h:column> <f:facet name="header">actions</f:facet> <h:form> <h:commandlink value="edit" onclick="showmodal()" action="#{linkcontroller.setlinkfromparam}"> <f:ajax render="mymodal value1 value2" /> <f:param name="name" value="#{o.name}" /> <f:param name="url" value="#{o.url}" /> </h:commandlink> </h:form> </h:column> </h:datatable> <!-- 1.outside table rendering works fine --> <h:outputtext id="value1" value="#{linkcontroller.name}" /><br /> <h:outputtext id="value2" value="#{linkcontroller.url}" /> <!-- 2.the render id not work --> <mahi:bootstrapmodal title="edit link" id="mymodal" linknamelable="link name:" linknamevalue="#{linkcontroller.name}" urlnamelable="url:" urlnamevalue="#{linkcontroller.url}" savebuttontext="save" savebuttonaction="#{linkcontroller.updatelink(link)}" /> view.xhtml content composite component works fine. because can render h:form directly id="mymodalform".
... <script> function showmodal() { $('#mymodal').modal('show'); } </script> ... <h:datatable id="mytable" value="#{linkcontroller.linklist}" var="o"> ... <h:column> <f:facet name="header">actions</f:facet> <h:form> <h:commandlink value="edit" onclick="showmodal()" action="#{linkcontroller.setlinkfromparam}"> <f:ajax render="mymodalform" /> <f:param name="name" value="#{o.name}" /> <f:param name="url" value="#{o.url}" /> </h:commandlink> </h:form> </h:column> </h:datatable> <!-- content custom composite component works --> <div id="mymodal" class="modal fade mymodal" tabindex="-1" role="dialog" aria-labelledby="mylinkmodal" aria-hidden="true" > <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <h:form id="mymodalform"> <h:outputlabel value="name:" /> <h:inputtext value="#{linkcontroller.name}" /> <h:outputlabel value="url:" /> <h:inputtext value="#{linkcontroller.url}" /> <h:commandbutton value="save" action="#{linkcontroller.savelink(link)}" /> </h:form> </div> </div> </div> </div>
simple solution :
add class modal in order call it, , call modal class not id :
modal :>
<div id="#{cc.clientid}" class="modal fade mymodal" script :>
<script> function showmodal() { $('.mymodal').modal('show'); }
Comments
Post a Comment