1

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?

1

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;
    }
  • Thanks for the reply. However I tried it using Show/Hide output panel rerender method. It was working fine without Modal PopUp. Unlike Modal PopUp, this method takes more time. Thatz y I am trying to implement html Modal PopUp. And the above code is not opening any popup, while clicking the button – Aarthi Priyadharshini Jul 31 '16 at 13:13
  • You need to give rerender of popup in commandbutton to show the popup. – Arun SFDC Jul 31 '16 at 13:18
  • I have added that . Itz not opening any popUp. <apex:commandButton action="{!openPopup_manualAssignment}" html-data-toggle="modal" html-data-target="#myModal1--Screen11" value=" New" styleClass="button btn btn-primary" style="padding:4px 12px;" rerender="tstPopup, #myModal1--Screen11" > – Aarthi Priyadharshini Jul 31 '16 at 13:27
  • OK. Add Css for 'popup5' and 'popupbg' as well. – Arun SFDC Jul 31 '16 at 16:43
  • Yes. Have added my css classes for popup5 and popupbg. Still couldnt resolve :-( – Aarthi Priyadharshini Jul 31 '16 at 16:46
0

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;
}
  • Thanks for the reply apKash. However, I tried that way too. JS function is getting called after opening the modal popUp, due to which input field value is not set. – Aarthi Priyadharshini Jul 30 '16 at 19:40
0

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.

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.