View Categories

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). 

File Eagfbvuher

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.

Leave the first comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.