Reputation: 5611
So,I am trying to add ajax to my site and load parts of pages according to the picture below:
The markup is very simple:
<div id="top"> A </div>
<div id="content">
<div id="middle"> B </div>
<div id="bottom"> C </div>
</div>
"A" is the top menu. "B" is the main content and "C" is the sub content. I am trying to set up ajax for the following actions:
When "A" is clicked, then only the "B" and "C" are changed. When "B" is clicked, then only "C" is changed.
I have gone through some tutorials (which were recorded around 2012, and seems outdated).
Here is what I have so far:
jQuery(document).ready(function($) {
var $mainContent = $("#container"),
siteUrl = "http://" + top.location.host.toString(),
url = '';
$(document).delegate("a[href^='"+siteUrl+"']:not([href*=/wp- admin/]):not([href*=/wp-login.php]):not([href$=/feed/])", "click", function() {
location.hash = this.pathname;
return false;
});
$("#searchform").submit(function(e) {
location.hash = '?s=' + $("#s").val();
e.preventDefault();
});
$(window).bind('hashchange', function(){
url = window.location.hash.substring(1);
if (!url) {
return;
}
url = url + " #content";
$mainContent.animate({opacity: "0.1"}).html('<p>Please wait...</>').load(url, function() {
$mainContent.animate({opacity: "1"});
});
});
$(window).trigger('hashchange');
});
(Code from http://www.deluxeblogtips.com/2010/05/how-to-ajaxify-wordpress-theme.html)
Now, I was able to make it work.
Here is a few of my concerns.
First, it seems like this code is bit outdated and other users suggested history.js
.
Second, I am trying to modify the js file for my site and how A
, B
and C
interacts as explained above.
When A
is clicked, then the id="content"
will be targeted. I am trying to modify it is so that when B
is clicked then C
is targeted.
I am not 100% comfortable with javascript and any help will be much appreciated.
Thanks.
Upvotes: -1
Views: 55
Reputation: 1030
I don't think this code is going to do what you think it will. Wordpress has a jSon API for sending data back and forth. You'd want to have Page "A" send a jSon request to your site, which would then reply with the CONTENT of pages B or C, not the whole page request, which then page A would put in it's proper place. In Wordpress, doing it like this would generally leave you with the entire site, including the header and nav, embedded within page B & C. You have to develop a method to deliver only the content of pages B and C, not the whole site as would be shot in a normal HTTP request. This is a pretty advanced technique.
Upvotes: 1