Loading posts using AJAX in Oxygen

This members-only tutorial provides the steps to dynamically pull and display the post data when a post's title link is clicked using AJAX (without page refresh) in Oxygen.

We shall

• use an Easy Posts component to output title links of the 5 latest posts in the left column.
• use another Easy Posts component to output the post content of the latest post in the right column.
• set up a custom function in which we define how the post data (in the right column) should be shown.
• add JS that executes when the post link is clicked and sends a AJAX request to the server while passing the ID of the post that has been clicked to the above function. The response from the PHP function is then sent back to the JS in which we specify the right content to be replaced with the received response data.
• load the JS file using a custom functionality plugin.

Step 1

Edit the Page where you want to set up AJAX post loading with Oxygen.

Add a Section.

Add a Columns component with say 30% and 70% widths for the columns.

In the left column, add an Easy Posts component with a custom query with post Post Type and Count set to 5.

Template PHP:

<?php
printf( '<div><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() )
);
?>

We are setting a class of post-link for each title link and adding the ID of that entry as the value of data-id attribute. Later in the JS file, we will retrieve this ID and pass it along in our Ajax request to the server.

You may delete all the default code added by Oxygen from the Template CSS (like in my test site) or modify it as needed.

In the right column, add an Easy Posts component with this manual query: