title: How to handle bootstrap modal in Java Server Faces?
body: <p>I like the principle from composite-components but this and bootstraps modal wont work together.</p>
  
  <p>Whats the best Practice to manage multiple Custom Composite Components Dialogs and use like this Example in a JSF-Table.
  Pass the Managed Bean Value from selected row to the Dialog.</p>
  
  <p>This works only for me if i wrote all in one Page File.
  See the last one.</p>
  
  <p><strong>bootstrapModal.xhtml</strong> the modal wrapped in a composite component</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns:h="http://xmlns.jcp.org/jsf/html"
        xmlns:cc="http://xmlns.jcp.org/jsf/composite"&gt;
  
  &lt;cc:interface&gt;
  
      &lt;cc:attribute name="title" /&gt;
      &lt;cc:attribute name="linkNameLable" /&gt;
      &lt;cc:attribute name="linkNameValue" /&gt;
      &lt;cc:attribute name="urlNameLable" /&gt;
      &lt;cc:attribute name="urlNameValue" /&gt;
      &lt;cc:attribute name="saveButtonText" /&gt;
      &lt;cc:attribute name="saveButtonAction" 
                    method-signature="java.lang.String action()" /&gt;
  
  &lt;/cc:interface&gt;
  
  &lt;cc:implementation&gt;
  
      &lt;div id="#{cc.clientId}" class="modal fade myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true" &gt;
          &lt;div class="modal-dialog"&gt;  
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-body"&gt;
                      &lt;h:form&gt;
                          &lt;h:outputLabel   value="#{cc.attrs.linkNameLable}" /&gt;
                          &lt;h:inputText     value="#{cc.attrs.linkNameValue}" /&gt;
                          &lt;h:outputLabel   value="#{cc.attrs.urlNameLable}" /&gt;
                          &lt;h:inputText     value="#{cc.attrs.urlNameValue}"  /&gt; 
                          &lt;h:commandButton value="#{cc.attrs.saveButtonText}" action="#{cc.attrs.saveButtonAction}" /&gt;
                      &lt;/h:form&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/cc:implementation&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>the wrapping div doest not work.</p>
  
  <pre><code>&lt;div id=#{cc.clientId}&gt;...&lt;/div&gt;
  </code></pre>
  
  <p>I tried also to pass the id to the form inside.</p>
  
  <pre><code>&lt;h:form id=#{cc.clientId}
  </code></pre>
  
  <p><strong>view.xhtml</strong> with composite component that does not work. f:ajax cant render the id from composite component</p>
  
  <hr>
  
  <pre><code>...
  &lt;script&gt;
      function showModal() {
          $('#myModal').modal('show');
      }
  &lt;/script&gt;
  ...
  &lt;h:dataTable id="myTable" value="#{linkController.linkList}" var="o"&gt;   
  ...          
      &lt;h:column&gt;
          &lt;f:facet name="header"&gt;Actions&lt;/f:facet&gt;
          &lt;h:form&gt;
              &lt;h:commandLink value="edit" onclick="showModal()" action="#{linkController.setLinkFromParam}"&gt;
                  &lt;f:ajax render="myModal value1 value2" /&gt;
                  &lt;f:param name="name" value="#{o.name}"  /&gt;
                  &lt;f:param name="url"  value="#{o.url}"   /&gt;
              &lt;/h:commandLink&gt;
          &lt;/h:form&gt;
      &lt;/h:column&gt;
  &lt;/h:dataTable&gt;
  
  &lt;!-- 1.outside the Table rendering works fine --&gt;
  
  &lt;h:outputText id="value1" value="#{linkController.name}" /&gt;&lt;br /&gt;
  &lt;h:outputText id="value2" value="#{linkController.url}" /&gt;
  
  
  &lt;!-- 2.The render for this id does not work --&gt;
  
  &lt;mahi:bootstrapModal    title="Edit Link" 
                          id="myModal" 
                          linkNameLable="Link Name:" 
                          linkNameValue="#{linkController.name}"
                          urlNameLable="URL:"
                          urlNameValue="#{linkController.url}"
                          saveButtonText="Save"
                          saveButtonAction="#{linkController.updateLink(link)}" /&gt;
  </code></pre>
  
  <p><strong>view.xhtml</strong> with the content from Composite Component works fine.
  Because i can render the h:form directly with the id="myModalForm".</p>
  
  <pre><code>...
  &lt;script&gt;
      function showModal() {
          $('#myModal').modal('show');
      }
  &lt;/script&gt;
  ...
  &lt;h:dataTable id="myTable" value="#{linkController.linkList}" var="o"&gt;   
  ...          
      &lt;h:column&gt;
          &lt;f:facet name="header"&gt;Actions&lt;/f:facet&gt;
          &lt;h:form&gt;
              &lt;h:commandLink value="edit" onclick="showModal()" action="#{linkController.setLinkFromParam}"&gt;
                  &lt;f:ajax render="myModalForm" /&gt;
                  &lt;f:param name="name" value="#{o.name}"  /&gt;
                  &lt;f:param name="url"  value="#{o.url}"   /&gt;
              &lt;/h:commandLink&gt;
          &lt;/h:form&gt;
      &lt;/h:column&gt;
  &lt;/h:dataTable&gt;
  
  &lt;!-- The Content from the Custom Composite Component works --&gt;
  
  &lt;div id="myModal" class="modal fade myModal" tabindex="-1" role="dialog" aria-labelledby="myLinkModal" aria-hidden="true" &gt;
      &lt;div class="modal-dialog"&gt;  
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-body"&gt;
                  &lt;h:form id="myModalForm"&gt;
                      &lt;h:outputLabel   value="Name:" /&gt;
                      &lt;h:inputText     value="#{linkController.name}" /&gt;
                      &lt;h:outputLabel   value="URL:" /&gt;
                      &lt;h:inputText     value="#{linkController.url}" /&gt; 
                      &lt;h:commandButton value="Save" action="#{linkController.saveLink(link)}" /&gt;
                  &lt;/h:form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>