jQuery Ajax not loading page with ACF fields

Question

I'm using the following jQuery code to load contents from a template part into another on click. Without the ACF PHP tags, it works. However, when I add these tags in <?php the_field('field_name'); ?> it throws a 500 (Internal Server Error) error. Does anyone have a solution for this, please?

    var baseUrl = "http://projectname:8888/wp-content/themes/custom-theme"

    $(".cross__functional").click(function (e) {
        e.preventDefault();
        console.log('cross functional Clicked')
        $("#keContent").load(baseUrl + "/template-parts/components/filename.php");
    });

Answer 1

You are making direct calls to a PHP file in your theme, this is why you have the problem. Because WordPress didn't handle the request, your file did, none of WordPress is loaded, and none of the plugins. There are also lots of security issues with this approach.

If you need to make an AJAX request, make it to a REST API endpoint.

For example, here I register an endpoint that returns Hello World:

add_action( 'rest_api_init', function () {
    register_rest_route( 'jeno/v1', '/helloworld/', [ 'callback' => 'helloworld' ] );
} );

function jeno_helloworld( $data ) {
    return "Hello World";
}

After placing that in a plugin or functions.php, then I can visit this URL to get the response:

http://example.com/wp-json/jeno/v1/helloworld

"Hello World"

Here's a snippet of code

jQuery.ajax({
    url: "https://example.com/wp-json/jeno/v1/helloworld"
}).done(function( data ) {
    // do something with data
    console.log( data ); // prints hello world in the dev tool console
});

If you need any parameters, use the $data variable. REST API's return their response as JSON, so you can JSON decode in javascript to get more complex results.