'Wordpress : Load the whole Page using AJAX

I currently using Oxygen Builder in my wordpress, tryna load my other page using AJAX and I'm very very noob at this. Then, i've done some research about it first of all is in here : https://oxygenbuilder.com/documentation/code/alternatives-to-functions-php/

It stated that "Oxygen builder isn't a theme, so there's no need to use function.php, but make a plugin which containing that php script which enqueue and localize the js script".

Then, i started to combine the php script and the js from : https://sridharkatakam.com/how-to-dynamically-load-posts-on-click-using-ajax-in-genesis/ and https://wpmudev.com/blog/load-posts-ajax/

The layout, I use a column which 50:50 of size. I use the Easy Post to repeat the Page I want to navigate in the left column and the Page I want to show in the right column.

Here's the code i wrote :

PHP (Right Column Easy Post, which I want to show the whole page) :

   // i don't know what i wrote down here to show the post I just copy paste it
   printf( '<div %s>', genesis_attr( 'entry-content' ) );
   do_action( 'genesis_entry_content' );
   echo '</div>';

PHP (Left Column Easy Post, it shows the title of the page and the link is inside the text) :

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

Function.php (I use the Advanced Script to Install) :

add_action( 'wp_enqueue_scripts', 'load_page_ajax' );

function load_page_ajax () {
    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' ),
       )
    );
}

add_action( 'wp_ajax_nopriv_ajax_loadpage', 'ajax_load_page' );
add_action( 'wp_ajax_ajax_loadpage', 'ajax_load_page' );

// not sure about what i wrote down here
function ajax_load_page () {
   echo get_bloginfo( 'title' );
   die(); 
}

AJAX-Loadpage.js (I use the Advanced Script to Install) :

(function ($) {

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

    $.ajax({
        url: ajaxloadpage.ajaxurl,
        type: 'post',
        data: {
            action: 'ajax_load_page',
            post_id: $(this).data('id')
        },
        
        success: function (response) {
            $("#custom_container").html(response);
        }
    });
  });

})(jQuery);

The real Question is : I have no idea about my code above which i give a comment in it. The right column Easy Post is written the printf function but it's the genesis framework' function which i just copy paste it. In the Function.php i have no idea about the function ajax_load_post () function.

So, any kindhearted codemaster here can help me to reduce my overthink? Thank you so much



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source