1

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>
  • For me, Its refreshing even after using the reRender tag on commandLink. Can you post the update code for the commandLink please – sfdcFanBoy May 12 '15 at 7:42
  • @BruceLee this is working for me - I simply added the rerender as an attribute for the commandLink tag: <apex:commandLink id="addPub2" value="Add Attributes" styleClass="btn btn-primary btn-sm" html-data-toggle="modal" html-data-target="#myModal" reRender="selections,modal,messages" ><apex:param id="pbeId2" name="pbeId" value="{!select.pId}" assignTo="{!oliforpubId}"/> </apex:commandLink> – Matt Parker May 12 '15 at 11:31
  • for me, it doesn't seem to work! – sfdcFanBoy May 12 '15 at 15:14
  • where is your "messages" block that you are rendering? – sfdcFanBoy May 12 '15 at 15:15
  • can you please verify my code here salesforce.stackexchange.com/questions/76050/… – sfdcFanBoy May 12 '15 at 16:27
2

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.

-1

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.