Q:

How to work button inside Bootstrap modal dialog in Jsf

I am using Bootstrap 3 in Jsf.
I have a form inside Boostrap modal dialog. When I click the ADD button inside dialog, dialog is closing and can not adding product. But It don't give any error. I am not using any other JSF like icefaces or primefaces.
Here is my code block: 
 <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal"></button>
<div class="modal fade" id="myModal" role="dialog" tabindex="-1" aria-hidden="true">
<div class="modal-dialog ">

    <div class="modal-content">
        <div class="modal-footer">
            <h:form role="form">

                <div class="form-group">
                    <h:inputText value="#{stockBean.stock.stokName}"  class="form-control" id="product" required="true"/>

                    <h:inputText value="#{stockBean.stock.code}"  class="form-control" id="kod" required="true"/>

                    <h:selectOneMenu value="#{stockBean.stock.type}" converter="#{typeConverter}" class="form-control">
                        <f:selectItems value="#{typeBean.typeList}" var="t"  itemLabel="#{t.typeName}" itemValue="#{t}" />
                    </h:selectOneMenu>

                    <h:commandButton action="#{stockBean.addStock}" class="btn btn-primary" value="ADD"/>
                </div>
            </h:form>
        </div>
    </div>
</div>

My question:
How can I add product inside Boostrap modal diolag?
Any help is highly appreciable.
Thanks

A:

<h:commandLink class="btn btn-danger"                                    
            value="fertig stellen"
            action="#{orderControllerBean.saveOrder}">
            <f:ajax execute="@form" render="@form"/>
</h:commandLink>

Take the commandlink, which dont automatic submits the form, if you are using an ajax call to update the data. The saveOrder method adds your product and after the controller call. Render updates your html in the form.

