Pop up behavior: Appear when user clicks on CSS selector not triggering second popup in chain

Popup #1 has an embedded form (email) in it. I'm trying to make the submit button on that popup trigger Popup #2 (a thank you popup.) "Appear when user clicks on a CSS selector" not triggering the second popup in chain. Please help.

  • Vinod Dalvi

    Hi Toni,

    I hope you are well today and thank you for your questions.

    Popup #1 has an embedded form (email) in it. I'm trying to make the submit button on that popup trigger Popup

    I am not sure what you meant by "popup trigger Popup".

    Have you tried using different Pop up Form submit methods in the Behavior section of the pop up?

    Popup #2 (a thank you popup.) "Appear when user clicks on a CSS selector" not triggering the second popup in chain. Please help.

    Could you please share me the page URL from your site where you are displaying the pop ups and also tell me clicking on which element it's getting displayed so that i can test it?

    After selecting the option "Appear when user clicks on a CSS selector" have you tried checking the checkbox "Repeated" displayed near it?

    Would you mind if I logged in to your site and did some troubleshooting? This might help get to the bottom of this faster. If this is ok, just grant me temporary admin access to your site by clicking "Grant Access" button in the WPMU DEV Dashboard Settings as described on the following page and reply on this thread after granting it?

    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Kind Regards,
    Vinod Dalvi

  • Toni

    Hello...
    I have just granted access. Here is a previous conversation with Michelle at WPMU that will give insight into this issue:

    Reply by: Michelle Shull

    Hey there, Toni!
    We're going to need to use an additional addon for PopUp here, (which I've already enabled for you on your site - thanks for granting support access!), called javascript events. This allows the popup to be triggered when a user clicks on a particular CSS element. Here's how we can make this work.
    1. Create your initial pop up, set the conditions so you know it will show for you.
    2. Go to a page where you'll be able to see the popup in action.
    3. Find the element you want users to click to trigger the next popup.
    4. Right click it, select 'inspect element' to find the name of that element.
    5. Create the next popup. Following my screenshot below, set it to trigger when the element in the previous pop up is clicked.
    6. Lather, rinse, repeat, until you have all the pop ups in your pop up chain added.
    Hope this helps!

    https://premium.wpmudev.org/forums/topic/how-to-cause-popup-pro-submission-to-trigger-thank-you-popup#post-818994

    I have followed Michelle's steps and I have tried entering the CSS selector as e2ma_signup_form_button_row AND e2ma_signup_form_button

    Here's the "inspection report"
    <div class="e2ma_signup_form_button_row" id="e2ma_signup_form_button_row">
    <input id="e2ma_signup_submit_button" class="e2ma_signup_form_button" type="submit" name="Submit" value="Submit" {disabled}="">
     
    <input id="e2ma_signup_reset_button" class="e2ma_signup_form_button" type="reset" value="Clear" {disabled}="">
    </div>

    THANK YOU FOR ANY HELP YOU CAN GIVE ME! I need this to work...very soon. Thank you!!!

  • Vinod Dalvi

    Hi Toni,

    Thank you for your reply.

    To hide the first pop up when the user clicks submit button then try adding the following code in the functions.php file of your child theme

    function add_custom_scripts(){ ?>
    	<script type="text/javascript">
    		jQuery(document).ready(function(){
    			jQuery("#e2ma_signup_submit_button").click(function(){
    		      jQuery(this).parent(".wdpu-container").hide();
    		   });
    		});
    	</script>
    <?php }
    add_action('wp_footer', 'add_custom_scripts');

    Best Regards,
    Vinod Dalvi

  • Toni

    First, my apology for having multiple threads...and I just did it again inadvertently. (I asked this question on the other thread...I am sorry for my error.)

    I have followed the above instructions and it still does not work. The user still must use the X in the upper right corner to close the popup. Please advise how this can be made functional. Desired result: User pressing "submit" button closes pop up.

    Thank you.

    Toni

  • Vinod Dalvi

    Hi Toni,

    I checked your site and found you are not currently using the code that i have shared with you but using the following code.

    <script type="text/javascript">
    jQuery(document).ready(function() {
      jQuery('body').on('click', '#e2ma_signup_submit_button', function() {
        jQuery(this).parent(".wdpu-container").hide();
      });
    });
    </script>

    Could you please use the code that i have shared so that i can troubleshoot the issue?

    Regards,
    Vinod Dalvi

  • Vinod Dalvi

    Hi Toni,

    It seems the support staff access is revoked on your site.

    Would you mind if I access your site using FTP and did some testing? This might help get to the bottom of this faster. If this is ok, just send log in info through our secured contact form: https://premium.wpmudev.org/contact/
    - Choose "I have a different question"
    - Include my name in the subject "Vinod Dalvi"
    - Include the URL of this post in your message so that I may track this issue better
    - Include login information (Wordpress admin info username + password )
    - Include FTP Details

    Regards,
    Vinod Dalvi

  • Vinod Dalvi

    Hi Toni,

    Thank you for sending the site details.

    I could make it work by adding the following code in the functions.php file of your theme.

    function add_custom_scripts(){ ?>
    <style type="text/css">
    #e2ma_signup .e2ma_signup_form_button_row {
    float: none;
    }
    </style>
    	<script type="text/javascript">
    		jQuery(window).load(function(){
    			jQuery(".wdpu-content #e2ma_signup_submit_button").click(function(){
    			// Uncomment the following commented code if you want to only hide the pop up when the email field is not empty
    			// if( jQuery(".wdpu-content #id_email").val().length > 0 ){
    		      jQuery(this).parents(".wdpu-container").hide();
    		  	// }
    		   });
    		});
    	</script>
    <?php }
    add_action('wp_footer', 'add_custom_scripts');

    Please check it and let me know how it works for you.

    Note : The above script will only work when the page is full loaded in the browser window.

    Regards,
    Vinod Dalvi

  • Vinod Dalvi

    Hi Toni,

    As an alternate solution, just remove the second pop up and use the following code overwriting the previously added code. The following code will display alert box having text "Thank You" on clicking on the "SUBMIT" button.

    function add_custom_scripts(){ ?>
    	<script type="text/javascript">
    		jQuery(window).load(function(){
    			jQuery(".wdpu-content #e2ma_signup_submit_button").click(function(){
    			// Uncomment the following commented code if you want to only hide the pop up when the email field is not empty
    			// if( jQuery(".wdpu-content #id_email").val().length > 0 ){
    		    alert("Thank You");
    		  	// }
    		   });
    		});
    	</script>
    <?php }
    add_action('wp_footer', 'add_custom_scripts');

    Regards,
    Vinod Dalvi

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.