0

I am working on some AJAX pagination for my blog. I have everything working correctly when I put the Javascript at the bottom of index.php, but if I move it to my custom.js file that I am enqueuing in my functions.php I get 403 forbidden with the exact same Javascript.

Here's the working code from index.php:

var ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ); ?>";
var page = 2;
jQuery(function($) {
    $('body').on('click', '.load-more', function(e) {
        e.preventDefault();
        var data = {
            'action': 'load_posts_by_ajax',
            'page': page,
            'security': '<?php echo wp_create_nonce("load_more_posts"); ?>'
        };

        $.post(ajaxurl, data, function(response) {
            $('.posts').append(response);
            page++;
        });
    });
});

And here's the non-working code(403 forbidden) from my custom.js and functions.php I console logged the theme.ajaxurl variable and it is correctly outputting the URL to admin-ajax.php:

custom.js:

var page = 2;
$('body').on('click', '.load-more', function(e) {
    e.preventDefault();
    var data = {
        'action': 'load_posts_by_ajax',
        'page': page,
        'security': '<?php echo wp_create_nonce("load_more_posts"); ?>'
    };

    $.post(theme.ajaxurl, data, function(response) {
        $('.posts').append(response);
        page++;
    });
});

functions.php:

wp_register_script( 'custom', get_template_directory_uri() . '/js/custom.js', array('jquery'), '1.1', true);
wp_enqueue_script( 'custom' );
wp_localize_script( 'custom', 'theme', array(
  'ajaxurl' => admin_url('admin-ajax.php')
));

Here's the AJAX callback from functions.php:

add_action('wp_ajax_load_posts_by_ajax', 'load_posts_by_ajax_callback');
add_action('wp_ajax_nopriv_load_posts_by_ajax', 'load_posts_by_ajax_callback');

function load_posts_by_ajax_callback() {
    check_ajax_referer('load_more_posts', 'security');
    $paged = $_POST['page'];
    $args = array(
        'post_type' => 'post',
        'post_status' => 'publish',
        'posts_per_page' => '9',
        'paged' => $paged,
        'cat' => -24
    );
    $my_posts = new WP_Query( $args );
    if ( $my_posts->have_posts() ) :
        ?>
        <?php while ( $my_posts->have_posts() ) : $my_posts->the_post() ?>
          <h2><?php the_title(); ?></h2>
        <?php endwhile ?>
        <?php
    endif;

    wp_die();
}

Anyone know why this would work correctly when placing the javascript directly on the index.php file but not work when trying to call the javascript from a custom enqueued file in functions.php?

4
  • 2
    There's no code for your AJAX endpoint in your question, can you include it? Also have you considered using a REST API endpoint instead? it's much easier to debug and a cleaner setup
    – Tom J Nowell
    Apr 10, 2018 at 15:26
  • @TomJNowell I have added the AJAX callback from my functions.php file. Unfortunately I don't have any experience with the REST API
    – user13286
    Apr 10, 2018 at 15:36
  • Alright, I figured out the source of the issue. It has to do with the line check_ajax_referer('load_more_posts', 'security');. If I comment that line out in functions.php, the ajax function works from the external JS file. I guess my next question is, is that security measure necessary? If so, any ideas why that would be causing a 403 error only when the JS is called from an external file?
    – user13286
    Apr 10, 2018 at 15:51
  • 1
    since it's a read only frontend request, I'd remove it. Also keep in mind that the existing REST API endpoints provided with core can already do this out of the box
    – Tom J Nowell
    Apr 10, 2018 at 15:52

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.