Using Bootstrap Modals in Visualforce page

Question

I am using a html modal PopUp in my visualforce page, which will be opened on a apex:commandbutton click.

Also, I have few input fields on my PopUp window, whose values will be assigned on the button click action method. Now I am facing an issue while assigning the values to the input fields before opening the popUp.

Modal popUp is getting opened before calling the action method, because of which values are not getting assigned to the controller variable. Could someone please suggest on how to handle this?

Controller code:

<apex:commandButton html-data-toggle="modal" html-data-target="#myModal1--Screen1" value="Deploy New System" styleClass="button btn btn-primary" style="padding:4px 12px;" action="{!showPopup}" rerender="#myModal1--Screen1" >
 <apex:param name="ProdName" value="Motorola"/>
</apex:commandButton> 

 <apex:outputPanel id="tstpopup">  

                                                             <div id="myModal1--Screen1" class="modal fade" data-backdrop="static">
                                                              <div class="modal-dialog" style="padding-top:80px;">
                                                                <div class="modal-content" style="min-height:300px;">
                                                                    <div class="modal-header">
                                                                      <h2 class="modal-title">Screen 1 of 3</h2>
                                                                    </div>
                                                                    <div class="modal-body" style="min-height:300px;width:600px;padding-left:70px;">
                                                                       <div class="form-group row">
                                                                                <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3 control-label required">
                                                                                  <label style="padding-bottom:2px;" for="insId">Product:</label>
                                                                                </div>
                                                                                <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9">
                                                                               <apex:inputText value="{!SelectedProduct}" html-readonly="true" style="width:228px;padding-left:2px;" />                             
                                                                                </div>                      
                                                                             </div>

                                                                             </div>


                                                                       </div> 
                                                                   </div>

                                                                        <div class="modal-footer">
                                                                           <div class="form-group row">
                                                                               <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">            
                                                                               </div>
                                                                               <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9" style="width:70% !important;"> 
                                                                               <apex:commandButton value="Next" action="{!showPopup2}"  rerender="#myModal1--Screen2" html-data-toggle="modal" html-data-target="#myModal1--Screen2" html-data-dismiss="modal"/>

                                                                             <button type="button" class="button btn btn-primary btn-right" data-dismiss="modal">Cancel</button> 
                                                                               </div>                         
                                                                           </div>
                                                                       </div>
                                                                 </div>
                                                            </div>
                                                        </div>
</apex:outputPanel>

Apex Method:

public void ShowPopUp()
{
    selectedproduct = ApexPages.currentPage().getParameters().get('ProdName');
}

P.N: I could able to implement the same functionality using output panel Rendering by setting up Controller variable. But due to some load time and UI issues,now I need to this using html Modal PopUp just like the above code. PopUp is getting opened before calling the controller method. Is there any way that I can make action method to execute 1st and open the popup after that?

Answer 1

You can try using JS

script

function popup(){
  actionfunctionName();
}

page

<apex:actionFunction name="actionfunctionName" action="{!showPopup}" rerender="tstpopup">
  <apex:param name="ProdName" value="Motorola"/>
</apex:actionFunction>
<input type="button" class="btn" onclick="popup()"/>
<apex:outputPanel id="tstpopup" rendered="{!showPopupFlag}"> 
  popup code
</apex:outputPanel> 

Controller

public boolean showPopupFlag 
public void ShowPopUp()
{
    selectedproduct = ApexPages.currentPage().getParameters().get('ProdName');
    showPopupFlag = true;
}

Answer 2

Use the below format to achieve the functionality.

Add boolean variable to show or not show.

<apex:commandButton action="{!openPopup_manualAssignment}" html-data-toggle="modal" html-data-target="#myModal1--Screen1" value="Deploy New System" styleClass="button btn btn-primary" style="padding:4px 12px;" action="{!showPopup}" rerender="#myModal1--Screen1" >
 <apex:param name="ProdName" value="Motorola"/>
</apex:commandButton> 


 <apex:outputPanel id="tstpopup">  

  <apex:outputPanel layout="block" styleclass="popupbg" rendered="{!isconfirmPopup_manualAssignment}" />
        <apex:outputPanel layout="block" styleclass="popup popup5" rendered="{!isconfirmPopup_manualAssignment}">
<div id="myModal1--Screen1" class="modal fade" data-backdrop="static">
                                                              <div class="modal-dialog" style="padding-top:80px;">
                                                                <div class="modal-content" style="min-height:300px;">
                                                                    <div class="modal-header">
                                                                      <h2 class="modal-title">Screen 1 of 3</h2>
                                                                    </div>
                                                                    <div class="modal-body" style="min-height:300px;width:600px;padding-left:70px;">
                                                                       <div class="form-group row">
                                                                                <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3 control-label required">
                                                                                  <label style="padding-bottom:2px;" for="insId">Product:</label>
                                                                                </div>
                                                                                <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9">
                                                                               <apex:inputText value="{!SelectedProduct}" html-readonly="true" style="width:228px;padding-left:2px;" />                             
                                                                                </div>                      
                                                                             </div>

                                                                             </div>


                                                                       </div> 
                                                                   </div>

                                                                        <div class="modal-footer">
                                                                           <div class="form-group row">
                                                                               <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">            
                                                                               </div>
                                                                               <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9" style="width:70% !important;"> 
                                                                               <apex:commandButton value="Next" action="{!showPopup2}"  rerender="#myModal1--Screen2" html-data-toggle="modal" html-data-target="#myModal1--Screen2" html-data-dismiss="modal"/>

                                                                             <button type="button" class="button btn btn-primary btn-right" data-dismiss="modal">Cancel</button> 
                                                                               </div>                         
                                                                           </div>
                                                                       </div>
                                                                 </div>
                                                            </div>
                                                        </div>

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

---

public boolean isconfirmPopup_manualAssignment{get;set;} //added by Arun 
 public boolean openPopup_manualAssignment()
    {
        isconfirmPopup_manualAssignment=true;
        return null;
    }

Answer 3

You can initially set Display None CSS property for your pop up i.e div with id "myModal1--Screen1" and On Command Button use same Action which would Set the Selected Product Value and Set On Complete attribute on button which would Call JavaScript method to Show Pop up.