Advanced AJAX Page Loader deep linking issue

Question

I'm making a single page custom theme for my girlfriend's blog. I installed Advanced AJAX Page Loader plugin which I use to load blog posts from categories into a div on the same page within home.php. This works just fine. However, after I load a blog post into the div and the url of the blog is passed into address bar, refreshing the page, or copying and pasting the link into new tab loads the single.php which breaks the site. How do I fix this issue?

Here is the site in question: http://natalija.co.nf

What's missing from the live version are the posts. Categories should display 3 thumbnail links to blog posts and clicking on any of them should load the content of the post into the div on the bottom of the page.

here is my single.php code

<div id="post" class="post-wrap <?php if($ajaxRequest){echo 'ajax';}?>">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    <div <?php post_class() ?> id="post-<?php the_ID(); ?>">

        <h1><?php the_title(); ?></h1>

        <?php include (TEMPLATEPATH . '/inc/meta.php' ); ?>

        <div class="entry">

            <?php the_content(); ?>

            <?php wp_link_pages(array('before' => 'Pages: ', 'next_or_number' => 'number')); ?>

            <?php the_tags( 'Tags: ', ', ', ''); ?>

        </div>

        <?php edit_post_link('Edit this entry','','.'); ?>

    </div>

<?php comments_template(); ?>

<?php endwhile; endif; ?>
</div>

and here is my home.php code:

<?php get_header(); ?>
<?php
$args = array(
'orderby' => 'id',
'order' => 'ASC',
'hide_empty' => '0',
'exclude' => '1'
);
$categories = get_categories($args);
foreach($categories as $category) {
?>

<section id="<?php echo $category->slug; ?>" data-stellar-background-ratio="0.5">
    <article class="<?php echo $category->slug; ?>" data-stellar-ratio="1.5">
        <h1><?php echo $category->name; ?></h1>
        <div class="wrapper">
            <ul class="slider">

            <?php
                $args = array (
                    'post_status' => 'publish',
                    'category_name' => $category->slug,
                    'nopaging' => true,
                );
                $custom_query = new WP_Query( $args );

                if ( $custom_query->have_posts() ) {
                    while ( $custom_query->have_posts() ) {
                        $custom_query->the_post();

                            // begin your slider loops in here
                            ?>

                                <li class="slide">
                                    <a data-target="main-content" href="<?php echo get_permalink(); ?>">
                                        <?php the_post_thumbnail(); ?>
                                        <div class="bubble">
                                            <h5><?php echo get_the_title(); ?></h5>
                                        </div>
                                    </a>
                                </li>

                <?php } // end $custom_query loop

                } else {
                    // no posts found
                }

                // reset the postdata
                wp_reset_postdata();
            ?>

            </ul>
            <img class="previous" src="wp-content/themes/Natalija/images/arrow-transparent.png" alt="random" data-stellar-ratio="1.7">
            <img class="next" src="wp-content/themes/Natalija/images/arrow-transparent.png" alt="random" data-stellar-ratio="1.7">
        </div>
    </article>
</section>
<?php
} // end $categories loop
?>
    <section id="oblogu" data-stellar-background-ratio="0.5">

    </section>
    <section id="contact" data-stellar-background-ratio="0.5">
        <article class="contact" data-stellar-ratio="1.5">
            <h1 class="contact-h1">KONTAKT</h1>
            <?php echo do_shortcode('[contact-form-7 id="73" title="Bez naslova"]'); ?>
        </article>
    </section>
    <section id="ostalo" data-stellar-background-ratio="0.5">
        <article class="ostalo" data-stellar-ratio="1.5">
            <h1>Ostalo</h1>
        </article>
    </section>
    <div id="main-content">
        <div id="post">

        </div>
    </div>
<?php get_footer(); ?>

So to be perfectly clear: refreshing or external linking to individual blog posts loads the unstyled content generated by single.php, instead of loading the full site (home.php) with content of the blog post loaded inside the div on the bottom of the page. Is there a way around this and what do I need to do to fix this problem with deep linking.

Answer 1

OK, so I came up with the solution to this by breaking down the sections of home.php into separate php files which I included into both home.php and single.php. On the bottom of the home.php I included section id="main-content" with the div id=post, inside which I load the latest post, and on the single.php I wrapped the div id="post" with section id="main-content". Advanced AJAX Page Loader is taking care that content loads properly into the div id="post" on both home.php and single.php.