Модальное окно Bootsfaces не работает внутри ‹h:form›

Я новичок в JSF, и в настоящее время я создаю приложение типа веб-аукциона на его основе. Я также использовал несколько элементов из Bootsfaces. Что я хотел бы сделать, так это иметь inputText, где участники торгов могут вводить свои ставки, а затем нажимать кнопку, которая запускает модальное окно Bootsfaces. Внутри модального окна участник торгов должен будет подтвердить, что он действительно хочет сделать ставку, нажав кнопку команды, которая в конечном итоге «подтвердит» свою ставку. Чтобы это работало (если я правильно понял, как работает 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>

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


bootstrap-modal modal-dialog jsf bootsfaces
person Rayan    schedule 16.09.2015    source источник
comment
попробуйте удалить disabled из <a id="atrigger1" class="btn btn-primary disabled" href="#amodal1" data-toggle="modal">Bid!</a>   -  person Shehary    schedule 16.09.2015
comment
У меня это есть специально: P Я активирую ссылку (через Javascript), когда участник торгов ввел правильную сумму (например, положительное число выше, чем текущая самая высокая ставка). Это не проблема.   -  person Rayan    schedule 16.09.2015
comment
хорошо, я проверил скрипку и отключил, не позволяя показывать модальное окно, поэтому я и спросил   -  person Shehary    schedule 16.09.2015
comment
На самом деле я удалил его, потому что это не имеет отношения к тому, о чем я спрашиваю.   -  person Rayan    schedule 16.09.2015

Ответы (1)


arrow_upward
4
arrow_downward

Перемещение <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>

Вкратце: если у вас возникли проблемы с id, замените выражение jQuery ("#id") выражением псевдокласса CSS ("".pseudoClass").

person Stephan Rauh    schedule 16.09.2015