I have a custom post type (portfolio) grid of projects. When an item/project of the grid is clicked, it should load the full content of the individual project via AJAX, without page refresh. I am successfully loading the full content into the div on-click, but need the URL to change to the name of the post on-load. From my understanding, $(“#tabs”).load(post_url); should load the appropriate URL, but it doesn’t. How can I change the URL based on the post loaded?

Portfolio.php:

<section class="project-full">
 <div class="row">
  <div id="tabs"></div>
 </div>
</section>
<div class="small-12 large-12 columns" id="content" role="main">
<?php $loop = new WP_Query( array( 'post_type' => 'portfolio', 'posts_per_page' => -1 ) ); ?>
  <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
  <div class="project">
    <a href="<?php the_permalink(); ?>" rel="<?php the_ID(); ?>" class="ajax">
      <div class="project-header small-12 columns">
        <h1 class="entry-title"><?php the_title(); ?></h1>
        <h2><?php the_field('subtitle'); ?></h2>
      </div>
    </a>
    <div class="featured-images">
      <ul class="small-block-grid-1 medium-block-grid-3">
        <li class="col-left small-12 medium-4 hide-for-small columns">
          <img src="<?php the_field('featured_image_left'); ?>" alt="" />
        </li>
        <li class="col-center small-12 medium-4 columns">
          <img src="<?php the_field('featured_image_center'); ?>" alt="" />
        </li>
        <li class="col-right small-12 medium-4 hide-for-small columns">
          <img src="<?php the_field('featured_image_right'); ?>" alt="" />
        </li>
      </ul>
    </div>
  </div>

single-portfolio.php:

<?php /* Start loop */ ?>
<?php while (have_posts()) : the_post(); ?>
<article <?php post_class() ?> id="post-<?php the_ID(); ?>">
   <header>
    <p class="description"><?php the_field('description'); ?></p>
  </header>
  <div class="entry-content">
    <div class="video-container">
      <?php the_field('video_url'); ?>
    </div>
  </div>
</article>

The ajax response:

jQuery.noConflict();
 jQuery(document).ready(function($){
   $.ajaxSetup({cache:false});
   $("a.ajax").click(function(){
     var post_url = $(this).attr("href");
     var post_id = $(this).attr("rel");
     $("#tabs").html('<div class="spinner"></div>');
     $("#tabs .spinner").show();
     $("#tabs").load(post_url);
     return false;
 });
});

Read more here: AJAX loading WP posts - Need friendly URL


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Related Wordpress search:

, , , , ,

Wordpress related questions and answers: