0

In a plugin file, which acts a page template, I am including a php file that generates some content on the page.

A simplified example:

<div id="content">
<?php include('path-to-file.php'); ?>
</div>

I want this div to "refresh" when a certain element on the page is clicked. In a non-wordpress environment, I could just use .load() to grab the .php file from the server and put it into the div, like so:

$('#content').load('path-to-file.php');

But in Wordpress, you can't access files directly like this, it throws a 404 error.

The official method of grabbing stuff from the server via ajax is to go through Wordpress's admin-ajax.php with an action set, like so:

PHP:

add_action('wp_ajax_tps_refresh_cart_display', 'tps_refresh_cart_display');
add_action('wp_ajax_nopriv_tps_refresh_cart_display', 'tps_refresh_cart_display');
function tps_refresh_cart_display() {

    // Grab php file from server
    $result['phpfile'] = 'path-to-file.php';

    $result = json_encode($result);
    echo $result;
    die();
}

JS:

$.ajax({
            type : 'post',
            dataType : 'json',
            url : myAjax.ajaxurl, //we can use this value because in our php file we used wp_localize_script
            context:this,
            data : {action: 'tps_refresh_cart_display', },
            success: function(response) {
                //load the fetched php file into the div
                $('#content').load(response.phpfile);
            }
    });

But I'm struggling to figure out how to grab the php file and actually get Wordpress to let me load it into the div. Fetching the file this way and using .load() after the ajax call returns it still throws a 404. Is there some way I'm supposed to localize a php file, like wp_localize_script does for js scripts?

Am I still going about this wrong? Any help appreciated.

0

Loading a PHP file the way you try to do it is still a direct access to the file. What you should do is "run" the file during the processing of the ajax request on the server side, and send the result back to the browser. Than you insert the result into the div.

Your code should be something like

add_action('wp_ajax_tps_refresh_cart_display', 'tps_refresh_cart_display');
add_action('wp_ajax_nopriv_tps_refresh_cart_display', 'tps_refresh_cart_display');
function tps_refresh_cart_display() {

    // Grab php file output from server
    ob_start();
    include('path-to-file.php');
    $result['content'] = ob_get_contents(); 
    $result = json_encode($result); // use wp_send_json instead to make this shorter
    echo $result;
    die();
}

and then on the JS you should do something like

success: function(response) {
                //load the fetched "result" of the php file into the div
                $('#content').insert(response.content);
            }
  • Thanks for your help. This seems like the right direction! I'm getting an "insert" is not a function error, but I think that's another issue. Once I figure that out, I suspect this will work. – Eckstein Feb 18 '17 at 4:43
  • lol, it is very early in the morning here, don't take me literally, you probably need append or insertbefore/insertafter – Mark Kaplun Feb 18 '17 at 4:53
  • I figured as much. ;) – Eckstein Feb 18 '17 at 4:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.