Using Ajax

If you want to call the plugin’s shortcode methods as AJAX, then with the standard WordPress calls, you can’t make use of the do_shortcode()  function however you can call the class that builds the shortcode directly.

See a demo of this code in action here.

This is an intermediate developer task, and you will need to have a grasp of PHP / jQuery / javascript / WordPress hooks and function calls,  and the way you implement coding changes in WordPress, either as a custom plugin or within a child theme to be able to modify this example to your needs.

In this example, I have built a search filter and button, of course you can do what you like, such as dynamic tabs.  The example works and is visible on the demo site here, however little attention has been paid to finessing the style etc, as it is expected you are a developer if you are reading this, so you will make it your own.

This is written as a plugin, however, with a few tweaks you could use it in the functions.php for your child theme.

First we will create the html mark up for the search box and results area ( you can put this in page or post for example ).  I have kept this simple

<input type='text' id='ajaxwfeafilter'><button id='ajaxwfeasearch'>Search</button>
<hr>
<div id='ajaxwfea'></div>

The structure of our plugin directory in this example  is:

test-ajax
  |
  -- test.js
  -- test-ajax.php

You can use what you like, or as mentioned add code to your child theme.  If you are building it as a plugin, once created you can zip the directory up an upload and activate as you would any plugin.

We need our jQuery javascript to make the AJAX calls, you may want to add extra code to give ‘feel’ onclick e.g. ‘loading’ … etc as required

jQuery(document).ready(function ($) {
    // as nothing will be on the page we initialise with a call
    ajax_call();

    //  on click of the search button we make the call with the filter value
    $('#ajaxwfeasearch').click(function () {
        ajax_call();
    });


    function ajax_call() {
        $.ajax({
            url: test.ajax_url,
            type: 'post',
            data: {
                action: 'test_wfea',
                filter: $('#ajaxwfeafilter').val(),
            },
            success: function (response) {
                $('div#ajaxwfea').html(response);
            }
        });
    }

});

Our PHP code to enqueues the jQuery , add the ajax actions and the function to get the filter and display output

<?php

/*
Plugin Name: Test Ajax
Plugin URI: https://fullworks.net
Description: A demo of ajax calls to the Widget for Eventbrite plugin shortcode
Version: 1.0
Author: Alan Fuller
Author URI: https://fullworks.net
License: GPL3
*/

add_action( 'wp_enqueue_scripts', 'ajax_test_enqueue_scripts' );
function ajax_test_enqueue_scripts() {
	wp_enqueue_script( 'test', plugins_url( '/test.js', __FILE__ ), array( 'jquery' ), '1.0', true );
	wp_localize_script( 'test', 'test', array(
		'ajax_url' => admin_url( 'admin-ajax.php' )
	) );
}


add_action( 'wp_ajax_nopriv_test_wfea', 'test_wfea' );
add_action( 'wp_ajax_test_wfea', 'test_wfea' );

function test_wfea() {
	if ( defined( 'DOING_AJAX' ) && DOING_AJAX ) {
		$atts=array();
		$atts['layout']='grid';
		if (!empty($_POST['filter'])) {
			$atts['filter_title']= '/'.$_POST['filter'].'/i';    // the filter is extended to add regex ignore case
		}
		$wfea = new WidgetForEventbriteAPIFrontEndFrontEnd('widget-for-eventbrite-api','1.4');
		$out = $wfea->build_shortcode__premium_only( $atts );
		echo (empty($out))?'... nothing found try again ...':$out;
	}
	die();
}

You could easily extend this for instance to switch between list and grid layouts etc.

Full description of making ajax calls in WordPress can be found in the WordPress Developer Codex.

Was this helpful?