Bootsfaces modal не работает внутри <h:form>

Question

Я новичок в JSF, и в настоящее время я строил на нем веб-аукцион. Я также использовал несколько элементов из Bootsfaces. То, что я хотел бы сделать, это иметь inputText, где участники торгов могут вводить свои ставки, а затем нажать кнопку, которая вызовет мода Bootsfaces. Внутри модального, претендент должен будет подтвердить, что он действительно хочет участвовать в торгах, нажав commandButton, который в конечном итоге «подаст» свою заявку. Чтобы это работало (если я правильно понял, как работает JSF), мне нужен inputText и commandButton внутри того же элемента h: form. Единственная проблема заключается в том, что всякий раз, когда я помещаю код модальности внутри формы, модаль не появляется, когда я нажимаю кнопку, которая запускает ее. Мой код выглядит следующим образом:

<h:form> 
    <b:inputText class="bid1" value="#{detailedViewBean.current}" placeholder="Type the amount you would like to bid..." style="width: 90%" onfocus="enableButton('atrigger1')" onblur="bidAmount(this.value, '#{detailedViewBean.previous}')"> <!--current highest bid--> 
     <f:facet name="prepend"> 
      <h:outputText value="$" /> 
     </f:facet> 
     <f:facet name="append"> 
      <b:buttonGroup> 
       <a id="atrigger1" class="btn btn-primary" href="#amodal1" data-toggle="modal">Bid!</a> 
      </b:buttonGroup> 
     </f:facet> 
    </b:inputText> 

    <b:modal id="amodal1" title="Warning!" styleClass="modalPseudoClass"> 
     <p id="amodal1body"> Are you sure ?</p> 
     <f:facet name="footer"> 
      <b:button value="Close" dismiss="modal" onclick="return false;"/> 
      <b:commandButton value="Yes, submit my bid!" id="modalbidbutton" type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#amodal2"/> 
     </f:facet> 
    </b:modal> 
<h:form> 

Кто-нибудь знает, почему это может произойти или как я могу его исправить?

Answer 1

Перемещение <b:modal /> в форму изменяет идентификатор. Это раздражающее свойство структуры JSF: оно видит, что идентификаторы всегда уникальны - и из мер по достижению этой цели следует добавить идентификатор формы к идентификатору <b:modal >. В большинстве случаев это работает просто отлично, но иногда вам нужен идентификатор HTML. Ваша кнопка использует выражение jQuery, поэтому это один из тех случаев. Добавляя оскорбление к травме, JSF использует двоеточие в качестве разделителя, а jQuery плохо справляется с двоеточием.

Сокращая длинную историю, я предлагаю использовать класс CSS модального диалога вместо идентификатора. Вы уже дали ему псевдо-класс CSS. Этот класс не несет никакой информации о макете. Вместо этого, вы можете использовать его в кнопке:

<a id="atrigger1" class="btn btn-primary disabled" 
     href=".modalPseudoClass" data-toggle="modal">Bid!</a> 

TL; DR: Если у вас возникли проблемы с идентификатором, заменить выражение JQuery («#ID») с классом CSS псевдо выражения («.pseudoClass»).