{"id":5534,"date":"2020-08-23T15:32:39","date_gmt":"2020-08-23T05:32:39","guid":{"rendered":"https:\/\/wpdevdesign.wpengine.com\/?p=5534"},"modified":"2023-06-26T15:36:32","modified_gmt":"2023-06-26T05:36:32","slug":"loading-posts-using-ajax-in-oxygen","status":"publish","type":"post","link":"https:\/\/wpdevdesign.com\/loading-posts-using-ajax-in-oxygen\/","title":{"rendered":"Loading posts using AJAX in Oxygen"},"content":{"rendered":"<div class=\"mp_wrapper\">\n  <div class=\"mepr-unauthorized-excerpt\">\n    <p>This <a aria-label=\"members-only (opens in a new tab)\" href=\"\/membership\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"rank-math-link\">members-only<\/a> 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 <a aria-label=\"Oxygen (opens in a new tab)\" href=\"https:\/\/oxygenbuilder.com\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"rank-math-link\">Oxygen<\/a>.<\/p>\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\">\n<div class=\"wp-block-embed__wrapper\">\n<span class=\"sJ80wyfjEIVdjIVv0bf6rACDWRExXWPMkr95Y1HUpcLtLZ4Fo6Hn7NvwSC4qF2TiPehSpOKhz7NGRKJMotusOd\"><iframe title=\"Loading posts using AJAX in Oxygen\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/fnLkLGaf1ro?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/span>\n<\/div>\n<\/figure>\n<p>We shall<\/p>\n<ul class=\"wp-block-list\">\n<li>use an Easy Posts component to output title links of the 5 latest posts in the left column.<\/li>\n<li>use another Easy Posts component to output the post content of the latest post in the right column.<\/li>\n<li>set up a custom function in which we define how the post data (in the right column) should be shown.<\/li>\n<li>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.<\/li>\n<li>load the JS file using a custom functionality plugin.<\/li>\n<\/ul>\n<figure class=\"wp-block-image size-large\"><img src=\"https:\/\/wpdevdesign.com\/wp-content\/uploads\/2020\/08\/ajax-wp-flow.png\" alt=\"\" class=\"wp-image-5543\" \/><figcaption class=\"wp-element-caption\">AJAX call process flow in WordPress<\/figcaption><\/figure>\n<h2 class=\"wp-block-heading\">Step 1<\/h2>\n<p>Edit the Page where you want to set up AJAX post loading with Oxygen.<\/p>\n<p>Add a <strong>Section<\/strong>.<\/p>\n<p>Add a <strong>Columns<\/strong> component with say 30% and 70% widths for the columns.<\/p>\n<p>In the left column, add an <strong>Easy Posts<\/strong> component with a custom query with <code>post<\/code> Post Type and Count set to 5.<\/p>\n<p>Template PHP:<\/p>\n<code>&lt;?php\nprintf( '&lt;div&gt;&lt;a href=\"%s\" class=\"post-link\" data-id=\"%s\"&gt;%s&lt;\/a&gt;&lt;\/div&gt;',\n\tesc_url( get_the_permalink() ),\n\tget_the_ID(),\n\tesc_html( get_the_title() )\n);\n?&gt;<\/code>\n<p>We are setting a class of <code>post-link<\/code> for each title link and adding the ID of that entry as the value of <code>data-id<\/code> attribute. Later in the JS file, we will retrieve this ID and pass it along in our Ajax request to the server.<\/p>\n<p>You may delete all the default code added by Oxygen from the Template CSS (like in my test site) or modify it as needed.<\/p>\n<p>In the right column, add an <strong>Easy Posts<\/strong> component with this manual query:<\/p>\n  <\/div>\n  <div class=\"mepr-unauthorized-message\">\n    <p>This is a premium members-only content.<\/p>\n<p>To view the rest of the content, please <a title=\"Membership\" href=\"https:\/\/wpdevdesign.com\/membership\/\">sign up for membership ($47\/month or $599 one-time)<\/a>.<\/p>\n<p>Already a member? Log in below or <a href=\"https:\/\/wpdevdesign.com\/login\/\">here<\/a>.<\/p>\n  <\/div>\n  <div class=\"mepr-login-form-wrap\">\n            \n<div class=\"mp_wrapper mp_login_form\">\n                  <!-- mp-login-form-start -->     <form name=\"mepr_loginform\" id=\"mepr_loginform\" class=\"mepr-form\" action=\"https:\/\/wpdevdesign.com\/login\/\" method=\"post\">\n            <div class=\"mp-form-row mepr_username\">\n        <div class=\"mp-form-label\">\n                              <label for=\"user_login\">Username<\/label>\n        <\/div>\n        <input type=\"text\" name=\"log\" id=\"user_login\" value=\"\" \/>\n      <\/div>\n      <div class=\"mp-form-row mepr_password\">\n        <div class=\"mp-form-label\">\n          <label for=\"user_pass\">Password<\/label>\n          <div class=\"mp-hide-pw\">\n            <input type=\"password\" name=\"pwd\" id=\"user_pass\" value=\"\" \/>\n            <button type=\"button\" class=\"button mp-hide-pw hide-if-no-js\" data-toggle=\"0\" aria-label=\"Show password\">\n              <span class=\"dashicons dashicons-visibility\" aria-hidden=\"true\"><\/span>\n            <\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n            <div>\n        <label><input name=\"rememberme\" type=\"checkbox\" id=\"rememberme\" value=\"forever\" \/> Remember Me<\/label>\n      <\/div>\n      <div class=\"mp-spacer\">&nbsp;<\/div>\n      <div class=\"submit\">\n        <input type=\"submit\" name=\"wp-submit\" id=\"wp-submit\" class=\"button-primary mepr-share-button \" value=\"Log In\" \/>\n        <input type=\"hidden\" name=\"redirect_to\" value=\"\/wp-json\/wp\/v2\/posts\/5534\" \/>\n        <input type=\"hidden\" name=\"mepr_process_login_form\" value=\"true\" \/>\n        <input type=\"hidden\" name=\"mepr_is_login_page\" value=\"false\" \/>\n      <\/div>\n    <\/form>\n    <div class=\"mp-spacer\">&nbsp;<\/div>\n    <div class=\"mepr-login-actions\">\n        <a\n          href=\"https:\/\/wpdevdesign.com\/login\/?action=forgot_password\"\n          title=\"Click here to reset your password\"\n        >\n          Forgot Password        <\/a>\n    <\/div>\n\n      \n    <!-- mp-login-form-end --> \n  <\/div>\n      <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>This members-only tutorial provides the steps to dynamically pull and display the post data when a post&#8217;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 &hellip;<\/p>\n","protected":false},"author":1,"featured_media":5543,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"none","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"footnotes":""},"categories":[282,52],"tags":[490],"class_list":["post-5534","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guides","category-premium","tag-ajax"],"acf":[],"featured_image_src":"https:\/\/wpdevdesign.com\/wp-content\/uploads\/2020\/08\/ajax-wp-flow.png","featured_image_src_square":"https:\/\/wpdevdesign.com\/wp-content\/uploads\/2020\/08\/ajax-wp-flow.png","author_info":{"display_name":"Sridhar Katakam","author_link":"https:\/\/wpdevdesign.com\/author\/srikat\/"},"_links":{"self":[{"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/posts\/5534","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/comments?post=5534"}],"version-history":[{"count":0,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/posts\/5534\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/media\/5543"}],"wp:attachment":[{"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/media?parent=5534"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/categories?post=5534"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpdevdesign.com\/wp-json\/wp\/v2\/tags?post=5534"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}