Basisopstelling voor een AJAX load event

In je .function.php plak je de content van de PHP snippet.
Maak een .js file aan: /scripts/the_ajax_script.js en plak hierin de content van de JavaScript snippet.

HTML Code

html

<div class="pure-g">
    <div class="pure-u-1-4">
        <button id="ajax_trigger">Klik hier!</button>
        <span id="ajax_placeholder">Gladior</span>
    </div>
    <div class="pure-u-3-4">
        <div id="ajax_response"></div>
    </div>
</div>

PHP Code

php

/**
 * Nieuwe AJAX load request aanmaken
 */

// Stap 1: Registreer je script file, waarop je de AJAX actie wilt uitvoeren
function gladior_enqueue_ajax_script()
{

    // Enqueue the JavaScript file on the frontend.
    wp_enqueue_script(
        'gladior_ajax_script_handle', // Handle for the script.
        get_template_directory_uri() . '/scripts/the_ajax_script.js', // Path to the script file.
    );

    // Localize script to pass the AJAX URL to JavaScript
    wp_localize_script('gladior_ajax_script_handle', 'the_ajax_object', [
        'ajax_url' => admin_url('admin-ajax.php'),
        '_nonce_to_verify' => wp_create_nonce('_nonce_to_verify'),
    ]);
}
// Hook the function to the 'wp_enqueue_scripts' action.
add_action('wp_enqueue_scripts', 'gladior_enqueue_ajax_script');




function function_to_execute()
{
    $data = json_decode(file_get_contents('php://input'));
    wp_verify_nonce($data->_nonce_to_verify, '_nonce_to_verify') || wp_die("Invalid nonce " . $data->_nonce_to_verify);

    $content = $data->content ? $data->content : 'No content provided';
    wp_send_json_success(array(
        'output_content' => $content,
        'data' => $data,
    ));
}

add_action('wp_ajax_function_to_execute', 'function_to_execute');
add_action('wp_ajax_nopriv_function_to_execute', 'function_to_execute');

JAVASCRIPT Code

javascript

async function gladior_ajax_request_function(body) {
  body.base_url = window.location.href.replace(RegExp("page/[0-9]/"), "");
  try {
    const response = await fetch(
      `${the_ajax_object.ajax_url}?action=function_to_execute`,
      {
        method: "POST",
        body: JSON.stringify({
            _nonce_to_verify: the_ajax_object._nonce_to_verify,
            ...body
        }),
      }
    );
    const data = await response.json();
    return data.data;
  } catch (error) {
    return error;
  }
}

document.addEventListener("DOMContentLoaded", async function () {
  const placeholder = document.getElementById("ajax_placeholder");
  const outputContainer = document.getElementById("ajax_response");
  if (!outputContainer) return;

  // Functie om de content te updaten (beide keuzes nodig)
  // maak een async functie updateTheContent met een integer parameter
  async function updateTheContent(variable = placeholder?.innerHTML) {
    // Toon loading animatie
    outputContainer.innerHTML = "Loading...";

    const res = await gladior_ajax_request_function({
        _nonce_to_verify: the_ajax_object._nonce_to_verify,
        content: variable,
    });

    if (outputContainer && res.output_content) {
      outputContainer.innerHTML = res.output_content;
    }
  }

  // Als je al een initiële update wilt doen.
  await updateTheContent();


  // Voeg het updateTheContent toe aan alle navigatie items
  const trigger = document.getElementById("ajax_trigger");
    trigger.addEventListener("click", async () => {
        await updateTheContent();
    });
});

Bekijk Snippet