plugins - jQuery Ajax not loading page with ACF fields

admin管理员组

文章数量:1323734

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");
    });

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");
    });

• plugins
• ajax
• jquery

Share Improve this question asked Sep 15, 2020 at 10:44 jenojeno 4866 bronze badges 2

• You should not make direct requests to PHP files in a theme or plugin, register an endpoint so you have a URL you can make the request to instead. There are major security and reliability problems with doing it that way. – Tom J Nowell ♦ Commented Sep 15, 2020 at 11:51
• @TomJNowell Thanks, man. I did it this way cos its the only way I know. – jeno Commented Sep 16, 2020 at 8:16

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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/wp-json/jeno/v1/helloworld

"Hello World"

Here's a snippet of code

jQuery.ajax({
    url: "https://example/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.

本文标签： pluginsjQuery Ajax not loading page with ACF fields