Wordpress, ajax loaded content

Question

So, I'm incredibly green with php, ajax, and anything javascript. I've put this site together through various tutorials and hackneyed methods of making things work. However, I've hit a pretty big snag with two problems revolving around URLs.

1. I have no idea how to properly bind something using the back button to the action that happens when a post is clicked.

2. Sub-urls go straight to the post content (single.php), instead of the index template with the content pulled up.

Now, here is my code. I'm sure there are a million things wrong with it.

(function($) {

  $(function($) {
        $(".post-link").click(function loadContent(){
            $(this).parent().addClass('fullscreen');
            $('.close').toggleClass('closeactive').removeClass('close');
            $(".back, .next").show();
            $('body').addClass('noscroll');

        });

        $(document).ready(function(){
        $.ajaxSetup({cache:false});
        $(".post-link").click(function(e){
            var post_link = $(this).attr("href");

            $(this).siblings('#single-post-container').html("content loading");
            $(this).siblings('#single-post-container').load(post_link);
            window.history.pushState('object', 'New Title', post_link);
            e.preventDefault();

        window.onpopstate = function(event) {
            $("#loading").show();
            console.log("pathname: "+location.pathname);
            loadContent(location.pathname);
            $(this).parent().removeClass('fullscreen');
        };

        return false;
        });

    });
});

Basically, what's happening is a lot of css and an ajax call. I'm not entirely sure I'm going about it right, but it functions pretty well. You can see it implemented on my site www.andbloom.com. Any help would be greatly appreciated!

Answer 1

First point

You already bind the back event, with

window.onpopstate = function(event) {
    $("#loading").show();
    console.log("pathname: "+location.pathname);
    loadContent(location.pathname);
    $(this).parent().removeClass('fullscreen');
};

You have an error, when this function is run, because loadContent function is not defined (you need to take it out of click(), and defined it before if you want to use it).
Another thing is that you shouldn't add this code inside the $(".post-link").click(function(e){}, as you only need to bind this once.
And last thing on this is that you don't need to bind the click event twice. See below an example with an updated code snippet. I couldn't test this in the browser, as you have the code in index (html) and not a separate JS file.

$(function ($) {
    $(document).ready(function () {
        $.ajaxSetup({cache: false});

        $(".post-link").click(function (e) {
            e.preventDefault();

            // this was moved from the function above, as you
            // don't need two events
            $(this).parent().addClass('fullscreen');
            $('.close').toggleClass('closeactive').removeClass('close');
            $(".back, .next").show();
            $('body').addClass('noscroll');

            var post_link = $(this).attr("href");

            $(this).siblings('#single-post-container').html("content loading");
            $(this).siblings('#single-post-container').load(post_link);
            window.history.pushState('object', 'New Title', post_link);
        });


        window.onpopstate = function (event) {
            // here you should add the logic to reverse (similar to what you have on the close event)
            $(this).parent().removeClass('fullscreen');
            $('.closeactive').toggleClass('close').removeClass('closeactive');
            $(".back, .next").hide();
            $('body').removeClass('noscroll');
        };
    });
});

Second point

This issue is a bit more complex.
An approach here would be for you to add the same code as you have on the homepage on the single.php template as well and show that single initially via javascript. Or add a redirect on the single page to the homepage with a GET param holding the value of the single page e.g. http://www.andbloom.com/?s=funny-or-die
No matter of your choice here, you will also need to update your ajax call to make a separate function to return only what you have(simple html) on single.php

Other notes

• You should move your code from inline, to a separate file and format it. It was really hard to read through it and I can't edit things, as dev tools only allow editing external JS and CSS files
• You have multiple elements with the same ID on the page. I'm referring to single-post-container
• You should really have only one $( document ).ready(function() {} in your case for the whole code related to this functionality.