Loading div content from one file into another without a page refresh. (in WordPress)

[mpoisel]

I know there was a snippet about ajaxing a word press theme on the site but I was getting nowhere fast. I actually found a different tutorial that did what I wanted to do here that I made a lot more progress with. I ran into another problem when it came to implementing it into WordPress. I’m pretty sure this is a jquery issue, but thought I would post in the php forum as well.

What I’m trying to do:
Basically I’m just trying to load content from one div with an id of #content from one file/page to another with the same id without a page refresh.

I have most of it working. The URL gets appended and the active links are working in the nav. But, the content in #content div is not being called in from the other file.

I have this working in html and php, but can’t seem to get it to work well with WordPress.

If anyone could be of some help it would be greatly appreciated.

Thank you in advance.

The Java Script I’m using:

$(document).ready(function() {



var hash = window.location.hash.substr(1);

var href = $('#nav li a').each(function(){

var href = $(this).attr('href');

if(hash==href.substr(0,href.length-0)){

var toLoad = hash+'.php#content';

$('#content').load(toLoad)

}

});



$('#nav li a').click(function( ){

$('#nav li a').addClass('active').not(this).removeClass('active');



var toLoad = $(this).attr('href')+' #content';

$('#content').fadeOut('fast', loadContent);

$('#load').remove();

$('#wrapper').append('LOADING...');

$('#load').fadeIn('normal');

window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-0);

function loadContent() {

$('#content').load(toLoad,'',showNewContent())

}

function showNewContent() {

$('#content').show('normal',hideLoader());

}

function hideLoader() {

$('#load').fadeOut('normal');

}

return false;

});

});

page1.php (template1):

page 1


page 2

page2.php(template2):

page 1


page 2

And if it’s needed here is the css:

#work-wrap      {width:960px; float:left;}

#work-nav-wrap  {width:960px; float:left; min-height:70px; background-color:#0FF;}

#nav {

list-style: none;

padding: 0;

margin: 10px 0 20px 0;

background-color:#999;

display: block;

overflow: hidden;

font-size: 0.9em;

height:33px;

text-transform:capitalize;

}

#nav li {

display: inline;

}

#nav li a {

display: block;

float: left;

padding: 10px 20px;

color: white;

text-decoration: none;

}

#nav li a:hover {

background: #1b1b1b url(images/nav_bar_o.jpg) repeat-x;

}

#nav li a.active {

color:#0F0;

}

#content        {width:100%; float:left;}

[Author]

Posts