Как обрабатывать bootstrap modal в Java Server Faces?

Мне нравится принцип от композитных компонентов, но это и бутстрапы модальные не работают вместе.Как обрабатывать bootstrap modal в Java Server Faces?

Какова наилучшая практика для управления несколькими диалоговыми окнами Custom Composite Components и использование этого примера в JSF-таблице. Передайте управляемое значение компонента из выбранной строки в диалоговое окно.

Это работает только для меня, если я написал все в одном файле. См. Последний.

bootstrapModal.xhtml модальный завернутые в составной компонент

<?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>

оберточная ДИВ не работать делаешь.

<div id=#{cc.clientId}>...</div>

Я попытался также передать идентификатор в форму внутри.

<h:form id=#{cc.clientId}

View.xhtml с компонентом композиционного материала, который не работает. е: Аякс косяк делает идентификатор из составного компонента

... 
<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 the Table rendering works fine --> 

<h:outputText id="value1" value="#{linkController.name}" /><br /> 
<h:outputText id="value2" value="#{linkController.url}" /> 


<!-- 2.The render for this id does 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 с содержанием от Составной компонент работает отлично. Поскольку я могу визуализировать h: form непосредственно с 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> 

<!-- The Content from the 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>

источник

2015-06-20 user3623194

простое решение:

добавить класс к вашему модальному, чтобы вызвать его, и называют модальность как класс не как идентификатор, как:

модальными:>

<div id="#{cc.clientId}" class="modal fade myModal"

сценарий:>

<script> 
function showModal() { 
    $('.myModal').modal('show'); 
}

источник

2015-07-22 14:02:15 Ayoun

Как обрабатывать bootstrap modal в Java Server Faces?

ответ

Смежные вопросы