Wordpress / Ajax / jQuery / navigate to next and previous post inside a div

Question

I'm trying to build a Wordpress theme using Ajax and jQuery. Whenever a link to a post is clicked on the front page the post loads inside div#single-post-container on the front page. I achieve this copying Stan Kostadinov method :

The jQuery looks like this :

jQuery(document).ready(function($){
    $.ajaxSetup({cache:false});
    $(".post-link").click(function(){
            var post_link = $(this).attr("href");
            $("#single-post-container").removeClass("hidden");
            $("#single-post-container").html("");
            $("#single-post-container").load(post_link, function() {
                $(".close").click(function(){
                $("#single-post-container").addClass("hidden");
                });
            });
            $('body').scrollTop(0);
            return false;
});
});

Inside the post content being loaded I have the default Wordpress post navigation which gives me the following html :

    <div class="nav-links">
<div class="nav-previous"><a href="link-to-previous-post" rel="prev"><span>link</span></a></div>
<div class="nav-next"><a href="link-to-next-post" rel="next"><span>Link</span></a></div></div>

What I would like is whenever the next or previous post links are clicked to overwrite the default behavior, which opens the post in a new page and dynamically load/replace the content accordingly inside the same div#single-post-container on the front page.

I have tried adding this to my jQuery :

 $(".nav-previous a").click(function () {
var post_nav = $(this).attr("href");
       $( "#single-post-container" ).empty();
            $("#single-post-container").removeClass("hidden");
            $("#single-post-container").load(post_nav, function() {
                $(".close").click(function(){
                $("#single-post-container").addClass("hidden");
                });
            });
            $('body').scrollTop(0);
            return false;
});

With no luck. I have tried preventing the default behaviour by adding :

e.preventDefault();

Which also doesn't work. I'm a newbie to jQuery so please bear with me... I'm developing locally so I won't be able to show you the thing in action. I'll appreciate any help on this.

Please let me know if you need me to clarify.

Thanks.

Answer 1

I have managed to make it work. Here is the jQuery if anyone is interested :

jQuery(document).ready(function($){

    $.ajaxSetup({cache:false});

    $(".post-link").click(function(){
            var post_link = $(this).attr("href");
            $("#single-post-container").removeClass("hidden");
            $("#single-post-container").html("");
            $("#single-post-container").load(post_link, function() {
                $(".close").click(function(){
                $("#single-post-container").addClass("hidden");
                });
            });
            $('body').scrollTop(0);
            return false;
});

$('#single-post-container').on("click",'.nav-previous a',function () {
var post_nav = $(this).attr("href");
            $("#single-post-container").removeClass("hidden");
            $("#single-post-container").load(post_nav, function() {
                $(".close").click(function(){
                $("#single-post-container").addClass("hidden");
                });
            });
            $('body').scrollTop(0);
return false;
});


$('#single-post-container').on("click",'.nav-next a',function () {
var post_nav = $(this).attr("href");
            $("#single-post-container").removeClass("hidden");
            $("#single-post-container").load(post_nav, function() {
                $(".close").click(function(){
                $("#single-post-container").addClass("hidden");
                });
            });
            $('body').scrollTop(0);
return false;
});
});