Ok, so here is another method of getting your modX site Ajaxified, complete with history and bookmark capability.
You won’t need the template switcher for this.
Also, I found some problems between jquery and QuickEdit. I disabled QuickEdit (I don’t usually have a need for it). If someone could find why they don’t work together please share.
You can find an working example at:
http://cumvreau.eu/test/
Requirements:
jQuery 1.2.3 –
http://www.jQuery.com (1.2.3 is the version I used, it might work with newer versions also)
History plugin for jQuery:
http://plugins.jquery.com/files/jquery.history.js_0.txt - copy all the text into a file named history.js
Crash course:
Step 1:
Include the two .js files (jquery.js, and history.js) in your template <head>.
Put the following code in the head also:
(You can put the code in a chunk, and then include the chunk in your template <head>)
<script>
var linkstyle = ".ajaxlink";
var content = "#content";
var toload = "#toload";
var uglyurl = "[(site_url)]"
function callback(hash)
{
if (hash != '') {
var loadstr = uglyurl + hash;
$(content).html("<div id='loader'><img src='assets/images/ajax-loader.gif' /><br /><p style='font-size:20px; color:red;'>Loading content <br />please wait!</p></div>");
$(content).load(loadstr+" "+toload);
}
}
$(document).ready(function() {
$.history.init(callback);
$(linkstyle).click(function(event){
event.preventDefault();
var str = this.href.replace(uglyurl, "");
$.history.load(str.replace(/^.*#/, ''));
$(content).html("<div id='loader'><img src='assets/images/ajax-loader.gif' /><br /><p style='font-size:20px; color:red;'>Loading content <br />please wait!</p></div>");
$(content).load(this.href+" "+toload);
return false;
});
});
</script>
Little explainer for the first four variables in the script:
linkstyle: put the class that you will use for the links that trigger ajax.
content: id for the <div> that your content will be loaded into.
toload: id of the div that will be brought from the outside pages along with all it’s contents and placed into ‘content’.
uglyurl: part of the link url to be stripped in order to beautify your link. eg: when you click an ajaxified link you will get an url in your browser like this:
ht tp://yoursite.com/index#http://yoursite.com/page-two
If you set your ‘
uglyurl’ variable to “ht tp://yoursite.com/” the above url will look like this:
ht tp://yoursite.com/index#page-two
It’s just for good looks.
Set your four variables how you like them. I’ll use:
var
linkstyle = ".ajaxlink";
var
content = "#content";
var
toload = "#toload";
var
uglyurl = "[(site_url)]"
Step 2:
Build your template with the following in mind:
Wrap
‘toload’ (or whatever you set the
toload var to) around your [*content*] TV, and then wrap
‘content’ (or whatever you set the
content var to) around
‘toload’ like this:
…template code…
<div id="content">
<div id="toload">
[*content*]
</div>
</div>
…more template code…
Apply the
‘linkstyle’ (or whatever you set the
linkstyle var to) class to any link you’d like to trigger Ajax like this:
<a class="ajaxlink" href="[~1~]">Link to main page</a>
<a class="ajaxlink" href="[~2~]">Link to page 1</a>
<a class="ajaxlink" href="[~3~]">Link to page 2</a>
<a class="ajaxlink" href="[~4~]">Link to page 3</a>
That’s it for the crash course, you should be good to go.
Thorough explanation:
How it works:
$(document).ready(function() {
When the page loads, the JS in the head activates.
$.history.init(callback);
This is a function that checks if the browser URL has a # in it. If it does, the function runs the callback function with anything that’s after # as a parameter.
The callback function prepends what’s in your
‘uglylink’ variable to the received parameter and loads into
‘content’ the
‘toload’ div from the specified url.
This allows you to have bookmarks and history on your site.
$(linkstyle).click(function(event){
Puts an onclick function on every element with a class of
‘linkstyle’. This means that your browser will listen and intercept any click on a link with that class.
We use this instead of putting functions directly on the onclick event in the links because this way, if the user has JS off, he’ll still be able to navigate your site the traditional way.
event.preventDefault();
We don’t want the browser to go to that link directly so we prevent that.
var str = this.href.replace(uglyurl, "");
The above is a little string replacement to beautify your links. What it does: it takes the url from the clicked link, and substracts what you have defined in the ‘uglyurl’ var. This way we will have links like this:
ht tp://yoursite.com/index#page-two instead of
ht tp://yoursite.com/index#http://yoursite.com/page-two.
$.history.load(str.replace(/^.*#/, ’’));
We put the new address in the history stack, adding a # to it to trick the browser.
$(content).html("<div id=’loader’><img src=’assets/images/ajax-loader.gif’ />
<p style=’font-size:20px; color:red;’>Loading content
please wait!</p></div>");
$(content).load(this.href+" "+toload);
The first line puts a nice Loading image and text until the target page is loaded, and the second gets
‘toload’ div and all it’s contents from the target page, putting it into the
‘content’ div in our page (and replacing any existing content).
I hope this tutorial is more understandable than my previous posts
.
☆ A M B ☆
