Load Page using AJAX in WordPress

I currently using Oxygen Builder in WordPress, I wanna make link when I click on that, the right column div is loaded with another page using AJAX, and I very very noob in AJAX (sorry for it). So, I follow the tutorial

from this site :
https://sridharkatakam.com/how-to-dynamically-load-posts-on-click-using-ajax-in-genesis/
and this site : https://wpmudev.com/blog/load-posts-ajax/.

Combined their code together because it might be appropriate with my goal, because in sridhar’s site load the post not page. FYI, in the oxygen builder, I load the page title (link) and the whole page using Easy Post which is same to a repeater. Then, the Easy Post is inside the Column which divided 2 into 50:50 of size. The left column shows the link which when clicked the right column is loading the whole page.

Here’s the screenshot :

screenshot

Then here’s my goal looks like :

https://www.youtube.com/watch?v=UZRiiVQN3d4

So, here’s the code i wrote :

PHP (inside the left column of easy post)

printf( '<div id="ajaxlinks"><a href="%s" class="post-link" data-id="%s">%s</a></div>',
esc_url( get_the_permalink() ),
get_the_ID(),
esc_html( get_the_title() )
);

PHP (inside the left column of easy post)

wp_enqueue_script(
    'ajax-loadpage',
    get_stylesheet_directory_uri() . '/js/ajax-loadpage.js',
    array( 'jquery' ),
    '1.0',
    true
);

wp_localize_script(
    'ajax-loadpage',
    'ajaxloadpage',
    array(
        'ajaxurl'       => admin_url( 'admin-ajax.php' ),
    )
);

Function.php

add_action( 'wp_ajax_nopriv_ajax-loadpage', 'ajax-load-page' );
add_action( 'wp_ajax_ajax-loadpage', 'ajax-load-page');
function ajax-load-page() {
echo get_bloginfo( 'title' );
die();
}

AJAX-loadpage.js (I put in the JS folder according to the Tutorial)

(function ($) {

$(document).on('click', '#ajaxlinks a', function (event) {
    event.preventDefault();

    $.ajax({
        // URL to which request is sent.
        url: ajaxloadpage.ajaxurl,

        // specifies how contents of data option are sent to the server.
        // `post` indicates that we are submitting the data.
        type: 'post',

        // data to be sent to the server.
        data: {
            // a function defined in functions.php hooked to this action (with `wp_ajax_nopriv_` and/or `wp_ajax_` prefixed) will run.
            action: 'ajax-loadpage',
            
            query_vars: ajaxloadpage.query_vars,
            

        },
        
        beforeSend: function() {
            $(document).scrollTop();

        },
        
        // function to be called if the request succeeds.
        // `response` is data returned from the server.
        success: function (response) {
            $('.content > .entry .entry-content').hide().html(response).fadeIn('slow');
        }
    })
})

})(jQuery);
        
        beforeSend: function() {
            $(document).scrollTop();

        },
        
        // function to be called if the request succeeds.
        // `response` is data returned from the server.
        success: function (response) {
            $('.content > .entry .entry-content').hide().html(response).fadeIn('slow');
        }
    })
})

})(jQuery);

Then, the formula returned to :

Uncaught ReferenceError: page is not defined
  at HTMLAnchorElement.<anonymous> (ajax-loadpage.js?ver=1.0:21:17)
  at HTMLDocument.dispatch (jquery.min.js?ver=3.6.0:2:43064)
  at HTMLDocument.v.handle (jquery.min.js?ver=3.6.0:2:41048)

after inspected in chrome and when i click to the link, it didn’t load the targeted Page at all 🙁

EDIT :

I’ve tried many times and the return still "page is not defined".

Does any webmaster here know how to save my insomnia? Thank you so much.

Leave a Reply

Your email address will not be published. Required fields are marked *