Bootsfaces modal not working inside

Question

I am new to JSF and I am currently building a web-auction type of application, based on it. I have also used multiple elements from Bootsfaces. What I would like to do is have an inputText where bidders can type their bids and then press a button that will trigger a Bootsfaces modal. Inside the modal, the bidder will have to confirm that he actually wants to bid, by pressing a commandButton that will eventually "submit" his bid. In order for this to work (if I have understood correctly how JSF works), I need the inputText and the commandButton inside the same h:form element. The only problem is that, whenever I put the code of the modal inside the form, the modal doesn't show up when I press the button that triggers it. My code is the following:

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

Does anyone know why this might happen or how I can correct it?

I have it there on purpose :P I enable the link (via Javascript) when the bidder has typed a correct amount (e.g. positive number higher than the current highest bid). This is not the problem. — Rayan, Sep 16 '15 at 18:09
okey i checked in fiddle and disabled not letting to show the modal so that's why i asked — Shehary, Sep 16 '15 at 18:17
As a matter of fact I deleted it, because it's irrelevant to what I am asking. — Rayan, Sep 16 '15 at 18:31

score 4 · Accepted Answer · answered Sep 16 '15 at 18:35

Moving the <b:modal /> into a form modifies its id. That's an annoying property of the JSF framework: it sees to it that ids are always unique - and of of the measures to achieve that goal is to prepend the form's id to the id of <b:modal >. Most of the time, this works just great, but sometimes you need the HTML id. Your button uses a jQuery expression, so this is one of those times. Adding insult to injury, JSF uses the colon as a separator, and jQuery doesn't cope well with the colon.

Cutting a long story short, I suggest to use the CSS class of the modal dialog instead of the id. You already gave it a pseudo CSS class. This class doesn't bear any layout information. Instead, you can use it in the button:

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

TL;DR: If you run into trouble with id, replace your jQuery expression ("#id") with a CSS pseudo class expression (".pseudoClass").

Bootsfaces modal not working inside

1 Answers1