Remote Content -- AJAX Type Introduction

Remote Content AJAX Functionality Example

Setup on the Front End

First, set up whatever it is you'll be targeting on the front end, whether that is an image, text, header, etc.

Target Your Front End Element(s)

As always with Remote Content, you have to target each element on the front end that you set up so that, when clicked, the element(s) will trigger the popup. Do this using the 'Extra CSS Selectors' field in the  Click Trigger as explained in our Setting Up a Remote Content Popup document.

JavaScript

Now that we're set up on the front end, we need to add extra data to the request that will be used inside your AJAX response function. This is done via JavaScript by modifying the jQuery.fn.popmake.rc_user_args array variable. Each popup has a set of values stored in the array using the popup ID as the key.

The following JavaScript shows how to add parameters just before the AJAX request for popup 36287. We recommend using a plugin like Simple Custom CSS/JS to install the code into the footer area of your WordPress site.

/*
Replace all references to the Popup Maker ID number used below with the ID number
for your popup. From the WP Admin, go to 'Popup Maker' -> 'All Popups' -> 'CSS Classes (column)'
to find the ID number assigned to your popup by the plugin.
 */
(function ($) {
    $(document)
        .ready(function () {

            $('#popmake-36287').on('popmakeRcBeforeAjax', function () {
                $.fn.popmake.rc_user_args[36287] = {
                    custom: 123,
                    name: 'Daniel'
                };
            });

        });
}(jQuery));

View the source on GitHub.

PHP Function

The custom and name parameters can then be passed along in the AJAX function shown below to customize the content.

Copy, paste, and edit the following code in your child theme's functions.php file, or use the My Custom Functions plugin to install the code for you.

<?php
/**
 *  Customize content via the Popup Maker custom AJAX function.
 *
 * @since 1.0.0
 *
 * @return void
 */
function popmake_remote_content_ajax() {
	echo 'Hello ' . $_REQUEST['name'] . ', you chose option ' . $_REQUEST['custom'];
}

View the source on GitHub.

Adding the Function Name to Remote Content

Now all that's left is to enter 'popmake_remote_content_ajax' as the function name in the Remote Content Area box (shortcode option settings). 

With these settings and code in place, your popup's content will be:

Hello Daniel, you chose option 123  

As you can see, this functionality allows you ultimate flexibility because you're not actually inputting content into the WYSIWIG Popup Content Editor, but dynamically generating content using code. You can pass parameters based on the button/link they clicked, user details, or any other possibilities you can come up with.