Can i use jQuery .load while still changing URL? - php

Question

What i want to achieve
I want to be able to shift seamlessly through the different posts in the sidebar on this website, while having using a custom post template for my posts. And by seamlessly i mean that the screen doesn't go white for a second every time you navigate it.
My problem
single.php or single-{slug}.php does not work, since the URL doesn't change while navigating the sidebar
Plugins i am using
Custom Post Type UI
Ajax Content Renderer
jQuery script for my sidebar
$(document).ready(function() {
$("#sidebar li:has(a)").click(function() {
var page = $("a:first",this).attr("href");
$("#content").load(page);
return false;
});
});
HTML & PHP for sidebar and content area
<div class="row"> <!-- Main content row -->
<div class="col-md-4" id="sidebar">
<?php
if (is_page('gulvservice')){
wp_nav_menu(array('menu'=>'gulvservice' ));
} elseif (is_page('malerservice')) {
wp_nav_menu(array('menu'=>'malerservice' ));
} elseif (is_page('industrilakering')) {
wp_nav_menu(array('menu'=>'industrilakering' ));
}
?>
</div>
<div class="col-md-8" id="content">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="title"><h1>
<?php the_title(); ?>
</h1></div>
<div class="div">
<?php
if( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
</div>
<?php endwhile; endif; ?>
</div>
</div>
</div> <!-- Main Content -->

Answer 1

Need to prevent the event on the <a>. So it would be better to move the selector to those elements
Try:
$(document).ready(function() {
$("#sidebar li a").click(function() {
var page = $(this).attr("href");
$("#content").load(page);
return false;
});
});