WordPress AJAX in header.php

by

There are tons of questions about using Ajax, so your question could be easily marked as duplicated but I see so BIG mistakes that I can’t say to you that the question is duplicated without explaining your mistakes.

  1. The Ajax in WordPress is handled in admin-ajax.php file, wehre you correctly sent the ajax request (see the url parameter of the Ajax call). So, you don’t need to include wp-load.php, WordPress is already loaded.
  2. The file json-feed.php from your theme folder is never executed unless you include it in the functions.php file or any descendant file.
  3. You always need to exit when the ajax action is ended (unlees you use wp_send_json and related functions that already perform the exit).
  4. You have a typo in the URL parameter of the Ajax request (see ; at the end).
  5. The content type specified in the repsonse header doesn’t match the real content type of the response output.

For a quick working example include this code in the functions.php file and fix the typo in the URL parameter:

add_action('wp_ajax_nopriv_xn_get_event', 'xn_get_event');
add_action('wp_ajax_xn_get_event', 'xn_get_event');

function xn_get_event(){

    echo 'Wow!';
    exit;

}

Also, It is recommended to not include inline javascript directly in the header.php or any other template file when the javascrpt has dependencies, like your code. You never knows how the dependencies are handled. For example, your javascript depends on jQuery but the jQuery file can be moved to footer and your jQuery code will stop working because it is printed before jQuery is loaded. Use the proper WordPress functions to include javascript and manage dependencies. A much better code would be:

add_action('wp_ajax_nopriv_xn_get_event', 'xn_get_event');
add_action('wp_ajax_xn_get_event', 'xn_get_event');

function xn_get_event(){

    $data = array( 'message' => 'Wow!' );
    wp_send_json( $data );

}

add_action('wp_enqueue_scripts', 'cyb_enqueue_scripts');
function cyb_enqueue_scriptss() {

    //Register my script
    //Update with the correct path to javscript file
    wp_register_script('my-script', get_stylesheet_directory_uri(). '/js/my-script.js', array( 'jquery' ) );

    //Enqueue scripts and dependencies
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'my-script' );

    //Localize js variables to be used in my-script.js
    $scriptData = array(
                      'ajaxurl' => admin_url('admin-ajax.php')
                     );
    wp_localize_script( 'my-script', 'my_script_data', $scriptData );

}

The content of my-script.js file could be something like:

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

    //AJAX
    $.ajax({

        type: "GET",
        dataType: "json",
        url: my_script_data.ajaxurl,
        data: {
            action: "xn_get_event"
        }
    })
    .done( function( response ) {
            alert( response.message );
    })
    .fail( function( response ){
            alert( "omg!" );
    });
});

For more information read the documentation on WP Ajax API or any othe millions of questions and examples about using Ajax in WordPress.

Note: code not tested.