Lets discuss ajax calls in WordPress.

I’ve seen some tutorials on this but many seem to have issues. Some seem to not even work.

Here I’m going to post my solution to hitting ajax in WordPress.

This is really important for large pages on sites that require mobile support. The main reason is that Mobile Safari has a 8mb memory cap. So other than the obvious ideas of enhancing performance, we also are able to make large pages mobile friendly without KAPOOING Mobile Safari.

Lets get to it.

We are going to write a JSON that returns html content to place inside of a div.

First things first, set up a site. Enable jQuery and lets make it the latest version of jQuery, because we want to use the “data” attribute and some older versions don’t really support it.

Now set up a page and set a wrapper where you want to put all your JSON html content. I’m going to assume you got that covered ;).

Ok so now set up your JSON handler. What I did was created a page with a Template Name which i called JSON Handler.

The code I used was this.

$page = (isset($_GET['post_id'])) ? $_GET['post_id'] : 0;  

			$count = 0;
			$args = array(
			 'post_type'  => "Portfolio",
			 'showposts' => 99,
			 'p' => $page,
			 'posts_per_page' => 1
			);
			query_posts( $args );
			while ( have_posts() ) : the_post(); $count++; ?>
<div class="item<?= $post->ID;?> portfolioInfo">
            <div class="closeSlide right">x</div>
			<? if( get_field('screenshots') ): ?>
            	<div class="slider">
            	<div class="flexslider flexslider<?= $post->ID;?>"><ul class="slides">
					<?php $count = 1; while( has_sub_field('screenshots') ): ?>
							<li><img src="<?php the_sub_field('image'); ?>"/></li>
					<?php $count++; endwhile; ?>
                </ul></div>
                </div>
			<?php endif; ?>

			<div class="portfoliotitle"><? the_title()?></div>
            <? the_content();?>
            <?php endwhile; // end of the loop. ?>
            <? wp_reset_query(); ?>
</div>

Ok so thats the specific markup I needed to return what I wanted. Which was a slideshow with some content.

You can make whatever markup fits your needs.

Now make a page and set it’s template to be the template of JSON handler… maybe even call it JSON Handler.

Now comes the javascript.

My main caller function will look like this.

function callSliderInfo(postID) 
	{

		 $('html,body').animate({ scrollTop: $('#slideInfoMain').offset().top}, 500);
		 $(".slideInfo").append('<div class="loading"><div class="loadingImage"></div></div>');
		 var stringID = JSON.stringify(postID);
		 var loading = true;
		 var $window = $(window);
		 var $content = $('body.blog #content');

            $.ajax({  
                type       : "GET",  
                data       : {post_id: postID},  
                dataType   : "html",  
                url        : "/json-handler",  
                beforeSend : function(){  
                },  
                success    : function(data){  
					$(".slideInfo").html('');
					$(".slideInfo").append(data);

					var flexslider = ".flexslider"+parseInt($(this).attr('id'),10);
					initFlexSliders();
					$('.closeSlide').click(closeSlide);
                },  
                error     : function(jqXHR, textStatus, errorThrown) {  
                    alert(jqXHR + " :: " + textStatus + " :: " + errorThrown);  
                }  
        });

	}>

Notice how i have postID as my variable input. A few other things i have there are my flexslider function, and my close button.

Not you have your main function lets decide how you call it.

Have and divs or buttons you want with the data attribute “id” and make the id = the post id you want to return.

Now lets call our main ajax function.

$(document).ready(function(){  

$(".CallButton").click(function(){ callSliderInfo($(this).data("id")); });

});

Once you have that it will trigger the ajax call to your wordpress template and return whatever it is you told it to return.

Please let me know if you have any questions.