How to Use Ajax in a Wordpress Shortcode

Call wordpress shortcode with AJAX

When you call a PHP file directly, WordPress is not involved. This means that functions like do_shortcode() do not even exist.

Instead, you need to request a file that is caught by WordPress (even if normally 404). Then, make your plugin aware of the URL. You can do this with query variables (easy) or rewrite rules (difficult, prettier). For example:

Query variable: example.org/?custom_shortcode=gallery

Rerwrite rule: example.org/custom_shortcode/gallery/

---

Whichever option you choose, your plugin needs to be aware when you access this URL and intercept it. When you are done, you need to exit the script to prevent WordPress from trying to show a 404 page.

Here is an example which you can simply drop in to your functions.php file.

function shortcode_test() {
  if ( !empty($_REQUEST['shortcode']) ) {
    // Try and sanitize your shortcode to prevent possible exploits. Users typically can't call shortcodes directly.
    $shortcode_name = esc_attr($_REQUEST['shortcode']);

    // Wrap the shortcode in tags. You might also want to add arguments here.
    $full_shortcode = sprintf('[%s]', $shortcode_name);

    // Perform the shortcode
    echo do_shortcode( $full_shortcode );

    // Stop the script before WordPress tries to display a template file.
    exit;
  }
}
add_action('init', 'shortcode_test');

You can test this by visiting your site with this added on the end of the URL:

?shortcode=gallery

This should display the gallery shortcode expanded as HTML. Once this is working, just tie it in to your existing AJAX function.

Using a do_shortcode in wordpress via an ajax call

I think you should take a look at the Codex article on using Ajax in Plugins. It provides a very good example on how to go about making ajax calls in WordPress.

Adapting their example to your code I get something like the following:

First we load the javascript. We also pass some javascript variables via wp_localize_script. In this case, we're going to pass the admin's URL for processing all ajax calls.

wp_enqueue_script( 'ajax-script', plugins_url( '/js/my_query.js', __FILE__ ), array('jquery') );

// in JavaScript, object properties are accessed as ajax_object.ajax_url
wp_localize_script( 'ajax-script', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );

Second, in our javascript we can make the ajax call and define our ajax "action" and any other data we need in the data object. Because "action" has kind of a different meaning, I've renamed your action to "refresh_cart".

jQuery(document).ready(function($) {

    $.ajax({
        type: 'POST',
        url : ajax_object.ajax_url,
        cache: false,
        data : { 'action': 'my_action', 'refresh_cart': 'yes' },
        complete : function() {  },
        success: function(data) {
            // $("#loading-img").hide();
            alert(data);
            // $("#join-class-div-3").html(data);
        }
    });

});

Third, we need to set up the callback for our ajax action. admin-ajax.php looks through all of WordPress's pre-configured actions and then also looks for anything added to the wp_ajax_$my_action_name on the back-end and wp_ajax_nopriv_$my_action_name on the front-end. I am assuming your question concerns the front-end and since in the data object we set action = my_action the corresponding action hook would be wp_ajax_nopriv_my_action... to which we have attached the my_action_callback function. WordPress should be fully loaded and their shouldn't be an issue running shortcodes as far as I can tell.

add_action( 'wp_ajax_nopriv_my_action', 'my_action_callback' );

function my_action_callback() {
    if( isset($_POST['refresh-cart']) && $_POST['refresh-cart'] == 'yes' ) {
        echo do_shortcode('[woocommerce_cart]'); 
    }
    die();
}

And voila! I think that should do it, but I have to warn you that I didn't test any of this, so use with prudence.

Add Contact form ajax with shortcode in wordpress

This is ajaxurl write this code your-theme/functions.php

<?php function frontend_custom_ajaxurl() { ?>
    <script type="text/javascript">
        var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
    </script>
    <?php
  }
add_action('wp_head','frontend_custom_ajaxurl');

This is your php function can do anything. And also write this code in your-theme/functions.php file

function your_function() {
    parse_str($_POST['data'], $params);
    print_r($params)
    exit;
}
add_action('wp_ajax_your_function', 'your_function');
add_action('wp_ajax_nopriv_your_function', 'your_function');

This is JQuery.

jQuery("#ContactForm").submit(function(event) {
    event.preventDefault();
    jQuery("#submitf").value = 'Please wait...';
    var data = {
        action: 'your_function', // here php function such as your_function
        data: jQuery("#ContactForm").serialize(),
    };
    jQuery.post(ajaxurl, data, function(response) {
        ......................
    });
});

Any confusion comment?

Inserting WordPress shortcode into JS through AJAX request

There is quite a lot going on with your code, so the answer won't be short.
It's generally a good practice to split your code up into smaller functions which all have their specific purpose. So I've taken the liberty to rewrite some functions so that they will help you in getting where you need to go.

The code below works as followed: The buildModal function builds all the HTML for your modal and can take a form as an argument. That form should be text because it needs to be interpolated (combined) with your other elements in the same string.

The buildModal function will be called from the getFormAndBuildModal function. The getFormAndBuildModal function uses fetch to send a request to the server and interprets the response as text. This text is your form, which will be passed to the buildModal to build the modal with the form in it.

The button with the #menu-item-2745 will be the trigger to send the request and build the form.

Working this way means that every time that you would click on your button it would call the server, build a new modal and show it on the page. Then when closing the modal, it removes the modal from the page.

I've tried to explain as much as possible of what's happening in the code and what each step is doing. If some things are still unclear, please let me know and I'll try to clear it up.

function buildModal(form) {
  const modal = document.createElement("div");
  modal.id = "trigger_target"
  modal.classList.add("modal");

  /**
   * Create close button here so we can attach the 
   * event listener without having to select it later.
   */
  const modalClose = document.createElement("span");
  modalClose.classList.add("close");
  modalClose.addEventListener("click", function() {

    /**
     * Remove the modal completely from the document.
     * This isn't mandatory and you can change it if you'd like.
     */
    modal.remove();
  });

  const modalContent = document.createElement("div");
  modalContent.classList.add("modal-content");

  /**
   * The form will be a string of HTML that gets injected
   * into another string of HTML here below. The innerHTML setter
   * will then parse the entire string, with form, to HTML.
   */
  modalContent.innerHTML = `
    <div class="modal-content">
      <h2>Sign up to our newsletter</h2>
      <h5>And get hold of your 10% discount!</h5>
      <p>${form}</p>
    </div>`;

  /**
   * First append the close button, then the content.
   */
  modal.append(modalClose, modalContent);

  /**
   * Return the HTML modal element.
   */
  return modal;
}

Here I've added how to use PHP in JavaScript and a way to tackle the issue with selecting the button. There are two solutions to this problem, one is here at the second comment and the other solution is in the PHP snippet after this one.

/**
 * Check the PHP snippet at the bottom how this gets here.
 * This is the result of the array turned into JSON and then
 * placed into the document with wp_add_inline_script. 
 *
 * Sidenote: __wp__ looks ugly, but it will make sure that if 
 * a browser might get updated and a new property is added to the
 * window object, it will never overwrite or break anything because
 * the name is so unique.
 */
const ajaxurl = __wp__.ajax;

/**
 * Select the button and listen for the click event.
 * When clicked, fire the getFormAndBuildModal function.
 *
 * Update: with selecting elements it is paramount that the element is
 * above the <script> tag in the document. 
 * Otherwise the element would not yet exist and the result would come up empty.
 * Another way is to wait for the document to give a signal when every element has been rendered with the DOMContentLoaded event.
 */
// document.addEventListener('DOMContentLoaded', function(event) {
//  const button = document.querySelector("#menu-item-2745");
//  button.addEventListener("click", getFormAndBuildModal);
// });

const button = document.querySelector("#menu-item-2745");
button.addEventListener("click", function(event) {
  event.preventDefault();
  getFormAndBuildModal();
});

function getFormAndBuildModal() {
  /**
   * Fetch uses the GET method by default.
   * All you need to do is to add the action to the URL
   * so that WP knows what action to call on the server.
   */
  fetch(`${ajaxurl}?action=runThisPhpFunction`)

  /**
   * Fetch can take while to load, so it uses a promise.
   * With .then() we say what happens after fetch is finished.
   * Fetch gives us a response object as a result, which we need to inspect.
   */
  .then(response => {

    /**
     * If the response has gone wrong, show an error.
     */
    if (!response.ok) {
      throw new Error("runThisPhpFunction request has failed");
    }

    /**
     * Otherwise we use the content that the response has send us.
     * Currently the "body" (your form) of the response is just bits and bytes.
     * We can tell the response how we want to use the response.
     * With the .text() method we turn the raw data into a string.
     * That string can later be used as HTML. :)
     */
    return response.text();
  })

  /**
   * response.text() also returns a promise, just like fetch. So to go to the next step
   * we use another .then() function. In here we have our form in a string.
   * Now we can build the modal and pass the form as an argument. The modal 
   * will be build and the form turned into HTML and put in the correct position.
   * When the buildModal function is done it returns the result.
   * Now append it to the body and it's done.
   */ 
  .then(form => {
    const modal = buildModal(form);
    document.body.append(modal);
  });
}

Here I've added a couple more additions to enqueueing the script and how to turn PHP into JavaScript the right way. ;)

function enqueue_my_custom_script() {
  /**
   * Instead of printing PHP variables directly inside JavaScript, 
   * you could use this method to let PHP do that for you. 
   * The array here below we be turned into a JSON string, 
   * which will later be turned into a JavaScript object that you
   * can use in your main script.
   */
  $wp_js_data = json_encode( 
    array(
      'ajax' => admin_url( 'admin-ajax.php' ),
    )
  );

  /**
   * The last parameter of wp_register_script (there are 5) will
   * determine if the script will be placed in the <head> tag when 
   * the value is false, or before the end of the </body> tag when
   * the value is true. The latter will make sure that your JS executes
   * AFTER all other HTML elements have been rendered. With this you don't
   * have to listen for the DOMContentLoaded event in JavaScript.
   *
   * Use get_stylesheet_directory_uri() to get the path to your child
   * theme directory instead of hard linking to your sheet. This will
   * output the URL to the directory of your style.css file of your theme.
   */
  wp_register_script( "scriptjs", get_stylesheet_directory_uri() . "/script.js", array(), null, true );

  /**
   * Here we create a global variable on the window object. This makes
   * the data is available in every JavaScript file. Here we insert the JSON string
   * that will be turned into a usable JS object.
   *
   * Be sure to output this script BEFORE the "scriptjs" file.
   */
  wp_add_inline_script( "scriptjs", "window.__wp__ = {$wp_js_data}", "before" );

  /**
   * This used to be the first line. wp_register_script only registers
   * the script but does not output it. This enables you to do something
   * like wp_add_inline_script before outputting the script.
   * wp_enqueue_script makes sure that the registered script will be 
   * placed in the document.
   */
  wp_enqueue_script( "scriptjs" );
} 
add_action( "wp_enqueue_scripts", "enqueue_my_custom_script" );

Call do_shortcode functionality in functions.php with AJAX

Do_shortcode is not working in ajax callback.
so I think that we have to use new solution.

add_action( 'init', 'do_shortcode_callback');
function do_shortcode_callback() {
    if (isset($_REQUEST["action"]) && $_REQUEST["action"] == "do_shortcode") {
        $shortcode = $_REQUEST['shortcode_name'];

        echo do_shortcode( $shortcode );  
        exit;       
    }
}


function load() {
    jQuery.ajax({
        method: 'POST',
        url: '<?php echo site_url('/'); ?>',
        data: {
            action: 'do_shortcode',
            shortcode_name: '[wppb-register]'
        },
        success: function(data)
        {
            jQuery("#my-modal").replaceWith(data);
        }
    });
}

---

Related Topics