Ajax Load template part WordPress

Farid comments:

I have checked it and found it working. What is missing only 'ajaxurl' variable is undefined.

Make sure you have your form action is set something like this:

<form class="contact-form" method="post" action="<?php echo esc_url( admin_url( 'admin-ajax.php' ) ); ?>">

After that define your 'ajaxurl' like this:

$(document).on( 'click', '.lightOpen', function( event ) {

var ajaxurl = $('#form-id').attr('href'); // it will point to the ajax url

event.preventDefault();
$.ajax({
url: ajaxurl,
type: 'post',
data: {
action: 'ajax_lightBox',
},
success: function( result ) {
$"#page-wrap").append(result);
}
})
});

ktp12345 comments:

Sorry I left that part out. The ajax url is defined
ajaxurl = 'http://www.sitename.com/wp-admin/admin-ajax.php';

Farid comments:

Okay then you would need to set the posts query properly in the template part that you are fetching in your ajax request.

Please implement this:

$recent_posts_args = array(
'post_type' => 'post',
'posts_per_page' => 3,
'ignore_sticky_posts' => 1,
);

// The Query
$recent_posts_query = new WP_Query($recent_posts_args);

// The Loop
if ($recent_posts_query->have_posts()) {
while ( $recent_posts_query->have_posts() ) {
$recent_posts_query->the_post();

// post query code here

}
}

Farid comments:

Here is your complete template part file code:


<?php

$recent_posts_args = array(
'post_type' => 'post',
'posts_per_page' => 3,
'ignore_sticky_posts' => 1,
);

// The Query
$recent_posts_query = new WP_Query($recent_posts_args);

if ($recent_posts_query->have_posts()) : while ($recent_posts_query->have_posts()) : $recent_posts_query->the_post(); ?>
<?php $images = get_field('light_gallery', get_the_ID());


if( $images ): ?>
<header class="lbHead">
<div class="slideCount"><span class="slide-current-slide">1</span><span class="slide-total-slides">2</span></div>
<span class="close-btn"> x </span>
<a href="#" class="downloadImg" target="_blank"></a>
</header>
<section class="slider">
<div class="preloader">
<img src="preloader.gif">
</div> <div class="flexslider carousel">
<ul class="slides">
<?php foreach( $images as $image ): ?>
<li class="lazy" style="background-image: url(<?php echo $image['url']; ?>);">
<p class="flex-caption"><?php echo $image['caption']; ?></p>
</li>

<?php endforeach; ?>
</ul>

<?php endif; ?>
</div>

<div id="carousel">
<ul class="slides">
<?php foreach( $images as $image ): ?>
<li>
<img src="<?php echo $image['sizes']['thumbnail']; ?>" />
</li>
<?php endforeach; ?>
</ul>
</div>
<div class="customSliderNav">
</div>
<?php endwhile; endif; ?>
</section>

Farid comments:

I have updated only this part: http://jmp.sh/JVEExB6

I also passed the post id to the 'get_field' function.

This is the doc of get_field function if you need: https://www.advancedcustomfields.com/resources/get_field/

ktp12345 comments:

For the template part It's ignoring everything from between the php tags and only outputting </section> which is outside the tags. And If I remove the php tags it outputs everything as html.

Farid comments:

It seems like there is a PHP error in the template when you load it via ajax.

Did you try to load that template directly in a page? Does it work fine there?

ktp12345 comments:

Yes, the template works fine. It's what I've been using to load all the lightboxes. The only reason I'm trying to update this with an ajax load is to because I didn't want to load the image galleries until someone clicked it.

Farid comments:

I do understand I have done it several times as I am a themeforest author and have been developing WordPress themes since a long time.

Can you provide me more details about your site through my profile contact form here: https://themeforest.net/user/pearlthemes

So that I can look into it and fix it right away.

Thank you!

Farid comments:

I have improved the code and updated on your site. It is returning the images html of the template for the current page exactly as you needed :)

Let me know if you still would need any help from my side. Otherwise done the job :)

Thank You!

ktp12345 comments:

It worked thank you!

Farid comments:

Cheers! Have a great time.