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, I am able to pass parameters but for some reason the modal automatically closes

                <apex:column headerValue="Subject">
                    <apex:outputText rendered="{!item.Subject__c!='' && item.Subject__c!= NULL}">         

                    <apex:commandLink styleClass="notify-detail" action="{!markAsRead}" html-data-toggle="modal" html-data-target="#dochelpNormal" reRender="normal,modal,dochelpNormal" >
                            <apex:param name="contIdParam" value="{!item.Id}" assignTo="{!contIdChosen}"/>
                            <apex:outputText value="{!item.Subject__c}" />

                          <div id="dochelpNormal" class="modal vs1 fade in">
                           <div class="modal-dialog">
                           <div class="modal-content">

                           <apex:commandLink styleClass="closebtn" action="{!markAsRead}" html-data-dismiss="modal" rerender="webform,normal" >
                                <apex:param name="contIdParam" value="{!item.Id}" assignTo="{!contIdChosen}"/>
                                <span class="fa-stack fa-lg ">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-times fa-stack-1x fa-inverse"></i>

                           <div class="modal-body">
                            <div class="row">                          
                            <div class="col-lg-12"> 

                            <div class="h2 no-margin-t"><apex:outputText value="{!item.Subject__c}"/></div> 
                            <div class="lead margin-b2"><apex:outputText value="{!item.Body__c}"/></div>


                        </div>  <!--  end row -->
                        </div> <!--  end modal body -->
                        </div> <!--  end modal content -->
                        </div> <!--  end modal dialog -->
                        </div> <!-- end modal -->   


  • Are you sure your commandLink isn't rerendering itself? That would cause the modal to close. It's hard to tell from your code if this is the case. Commented May 12, 2015 at 19:01

1 Answer 1


I don't know why this is, but auto closing can be solved by removing this html-data-toggle="modal" from your modal definition and doing it manually.

instead of the html-data-toggle attribute, just add your own onclick event. eg, onclick="openMyModal()"

Then open it using the standard boostrap manual open method:

j$ = jQuery.noConflict();

function openMyModal(){

You could also try making the rerender target = none, ie reRender="none" or reRender="".

If you actually do want a rerender, then you could try using a commandLink or commandButton with a no-op action and a rerender target similar to what you currently have - rerender="webform,normal"

  • ok, the solution you provided is through jQuery. The same I'm trying to do by html.
    – sfdcFanBoy
    Commented May 17, 2015 at 15:29
  • Well, since the modal depends on jQuery and also custom bootstrap code, you are not reducing the amount of code in your page. Commented May 17, 2015 at 20:50
  • See answer - I have another approach. Also since you didn't specify that you wanted to do this with HTML only, my answer is valid. Commented May 17, 2015 at 20:54
  • Another thing - apex:parameters are used to pass data to the controller. I think the only reason it's working for you is that it must define the parameters as global javascript variables and in the small amount of time that these params are defined (before the actionfunction returns and rerenders the page), you can access them. Commented May 17, 2015 at 20:57

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .