markjaquith/page-links-to

Target blank doesn't work on posts loaded via AJAX

Opened this issue · 0 comments

Hi there Mark,

We load some posts via AJAX like so:

function loadMoreHomeWK()
{
	$page       = $_POST['page'];
	$highlightsID = $_POST['highlightsID'];
	$totalPosts = $_POST['totalPosts'];
	$posts_per_page = $_POST['postsPerPage'];
	$stickyPosts = count(get_option('sticky_posts'));

	$arguments = [
		'post_type'						=> ['post'],
		'post_status'					=> ['publish'],
		'posts_per_page'			=> $posts_per_page,
		'offset'								=> ($page - 1) * $posts_per_page - $stickyPosts,
		'post__not_in'				=> $highlightsID,
	];

	$remainingPosts = $totalPosts - ($page * 6);
	$query          = new WP_Query($arguments);
	$content = false;

	if ($query->have_posts()) {
		ob_start();
		while ($query->have_posts()) {
			$query->the_post();
			get_template_part('template-parts/content-column');
		}
		$content = ob_get_clean();
	}
	wp_send_json([
		'content' => $content,
		'remainingPosts' => $remainingPosts,
	]);
	die;
}

Then we get the pemalinks as per usual (actually the same markup as for posts which are loaded normally):

// content-column.php
<?php
$imageClass = 'even';
$has_sidebar = get_field('has_sidebar', 'option');
$has_images = get_field('has_images', 'option');
?>
<div class="col-sm-12 <?php echo $has_sidebar ? 'col-md-6' : 'col-md-4' ?> article-wrapper">
	<div class="grid-card">
		<?php if ($has_images) : ?>
			<figure class="grid__item--img-<?php print $imageClass; ?>">
				<?php $featureImage = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full'); ?>
				<a href="<?php echo get_post_permalink($post->ID); ?>">
					<?php
					$secondary_image = get_field('secondary_image', $post->ID);
					$portrait_image = $secondary_image ? $secondary_image : $featureImage[0];
					$image_url = ($imageClass == 'odd') ? $portrait_image : $featureImage[0];
					?>
					<img src="<?php echo $image_url ?>" alt="" class="object-fit" />

				</a>
			</figure>
		<?php endif; ?>
		<?php $imageClass = toggleImageClass($imageClass); ?>
		<?php $categories = get_the_category($post->ID);
		$total = count($categories);
		$indexCat = 0;
		?>
		<div>
			<?php foreach ($categories as $category) {
				$indexCat++; ?>
				<a href="<?php echo get_term_link($category->term_id); ?>">
					<p class="grid__item--category"><?php echo $category->name;
																					if ($indexCat != $total) echo ', '; ?></p>
				</a>
			<?php } ?>
		</div>
		<div>
			<a href="<?php echo get_post_permalink($post->ID); ?>">
				<h3 class="grid__item--title">
					<?php
					$title = $post->post_title;
					echo wp_trim_words($title, 10, null);
					?>
				</h3>
			</a>
		</div>
		<a href="<?php echo get_post_permalink($post->ID); ?>" class="grid__item--content-link">
			<p class="grid__item--content">
				<?php
				$content = $post->post_excerpt;
				echo wp_trim_words($content, 20, null);
				if (str_word_count($content) < 20) echo '...';
				?>
			</p>
		</a>
	</div>
</div>

In the posts that are loaded via AJAX target blank does not work.
The URL is correctly set to value we define backend, thought.

Is there anything we can do to make it work?

Thank you in advance and best regards,
Rasti