Auto-closing Modal Issue with Bootstrap3 and apex:commandLink

Question

I'm trying to pass a parameter to my controller on open of a modal window using Bootstrap html attributes. When I use the standard html button tag, the modal window behaves appropriately, but I am not able to pass any parameters (i.e. via apex:param). So when I switch apex:commandLink or apex:commandButton, I am able to pass parameters but for some reason the modal automatically closes and refreshes the whole page immediately.

This opens the modal without the auto close issue, but I can't use apex:param:

<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">
<apex:param id="pbeId" name="pbeId" value="{!select.pId}" assignTo="{!oliforpubId}" />Pick Release
</button>

This allows me to use apex:param, but the modal auto closes after less than 1 second:

<apex:commandLink id="addPub2" value="Pick Release" styleClass="btn btn-primary btn-sm" html-data-toggle="modal" html-data-target="#myModal">
<apex:param id="pbeId2" name="pbeId" value="{!select.pId}" assignTo="{!oliforpubId}" />
</apex:commandLink>

Interestingly, if I'm really quick on the keys and I attempt to click on the pagereference in the modal window before it auto-closes, I get a successful parameter pass to the controller. However that is obviously not a solution.

Any help in figured out what heck is going is much appreciated!

Also a more complete snippet is below:

        <!-- Selected Products -->    
    <apex:outputPanel id="selections"> 
    <div class="container">
        <div class="well col-md-12"> 
            <div class="row">                                                                                    
                    <h4 style="padding-left:16px">Selected Products</h4>
                        <div class="col-lg-6">                                                               
                            <div class="table table-responsive">
                                <table class="table table-condensed table-hover">
                                    <tr class="success">
                                        <th></th>
                                        <th>Product Name</th>
                                        <th>Unit Price</th>
                                        <th>Quantity</th>
                                        <th>Dimensions</th>
                                        <th>Sales Price</th>
                                        <th>Start Date</th>
                                        <th>End Date</th>
                                        <th>Publication Release</th>
                                    </tr>
                                        <apex:repeat value="{!selections}" var="select">
                                            <tr>

                                                <td><apex:commandLink id="btn" action="{!removeProduct}" value="Remove" styleClass="btn btn-link btn-sm" reRender="selections">
                                                <apex:param id="removeId" name="removeId" value="{!select.pId}" assignTo="{!removalProductId}" />
                                                <apex:param id="index" name="index" value="{!select.counter}" assignTo="{!counter}" />
                                                </apex:commandLink></td>
                                                <td>{!select.name}</td>
                                                <td>£{!select.unitprice}</td>
                                                <td>{!select.quantity}</td>
                                                <td>{!select.height} x {!select.columns}</td>
                                                <td>£{!select.salesPrice}</td>
                                                <td>1/5/2015</td>
                                                <td>1/5/2016</td>
                                                <td><button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal"><apex:param id="pbeId" name="pbeId" value="{!select.pId}" assignTo="{!oliforpubId}" />Pick Release</button></td>
                                                <td><apex:commandLink id="addPub2" value="Pick Release" styleClass="btn btn-primary btn-sm" html-data-toggle="modal" html-data-target="#myModal"><apex:param id="pbeId2" name="pbeId" value="{!select.pId}" assignTo="{!oliforpubId}" /> </apex:commandLink></td>
                                                <td><apex:outputText value="{!pubReleaseId}" rendered="{!addedRelease}"/></td>
                                            </tr>
                                        </apex:repeat>
                                    </table>
                                </div>                                      
                        </div>                                           


                    </div>

            </div>
        </div>
        </apex:outputPanel>         

    <!-- Modal -->
    <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Publication Releases</h4>
          </div>
          <div class="modal-body">
                  <div class="table table-responsive">
                    <table class="table table-condensed table-hover" id="pubTable">
                        <tr class="info">
                            <th>Publication Name</th>
                            <th></th>

                        </tr>
                        <apex:repeat value="{!publicationReleases}" var="pub">
                            <tr>
                                <td>{!pub.name}</td>
                                <td><apex:commandLink id="addpub" action="{!addToRelease}" value="Add" styleClass="btn btn-primary btn-sm" reRender="selections" rendered="{!IF(addedRelease,false,true)}">
                                <apex:param id="pubid" name="pubid" value="{!pub.Id}" assignTo="{!pubReleaseId}" />
                                </apex:commandLink></td>
                            </tr>
                        </apex:repeat>             
                    </table>
                </div>
            </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div> 

And my resources:

    <!--CSS resources-->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"/>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/alertify.js/0.3.11/alertify.core.css"/>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/alertify.js/0.3.11/alertify.default.css"/>

    <!--JavaScript resources-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/alertify.js/0.3.11/alertify.js"></script>
<script src="{!URLFOR($Resource.typeahead, '/dist/typeahead.js')}"></script>

Answer 1

In your commandlink tag, you need to use rerender tag to implement AJAX so that your page will not be refreshed. You can check visualforce component reference to see how rerender can be used with apex:commandlink tag.

Answer 2

Above answers are great!~ And there is another reason, why this auto closing happened..It may help: change the place you put for <apex:form>