Safe Ajax Links - using Jquery
June 8th, 2009
About the author
Hi guys, I am Prathap Beschi, PHP programmer from Balyhoo Advertsing, Chennai, India. I like developing ajax websites, jquery plugins. Follow me on TWITTER.
Introduction
This tutorial is an improvement of How to load content via AJAX in jQuery.
We are going to learn how to make safe ajax links - ajax links that work properly though the browser does not support javascript.
I always worry about ajax links; what if the user’s browser is not enabled javascript?! They can’t go further pages.
Already i have developed some ajax websites, so i want to overcome this problem. We can make a ajax website work properly though there is no javascript with a simple trick. I use Jquery for ajax development, so now i explain this with Jquery.
Step 1: Thinking about the problem and home section
Consider we create an ajax website with 3 pages. Then the following steps will make the trick work.
Create the home page, with page links in a specific class name (here, say ajax-links, so we have links like:
<a class="ajax-links" href="contact.html">Contact</a>
Step 2: The container
Consider the content div(div id=”content”) contains the content for every page, then place this div inside container div(div id=”container”)
Step 3: Including the jQuery core library
You know:
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"><!--mce:0--></script>
Step 4: Creating the tricky script
$(document).ready(function(){
//References
var loading = $("#loading");
var container = $("#container2");
var link;
//Manage click events
$("a.ajax-links").click(function(e){
//prevent default action
e.preventDefault();
//show the loading bar
showLoading();
container.slideUp();
//define the target and get content then load it to container
link = $(this).attr("href") + " #content";
container.load(link, hideLoading);
container.slideDown();
});
//show loading bar
function showLoading(){
loading
.css({visibility:"visible"})
.css({opacity:"1"})
.css({display:"block"})
;
}
//hide loading bar
function hideLoading(){
loading.fadeTo(1000, 0);
};
});
Step 5: Replicate and little final explanation
Create all other (2) pages in this same structure (copy paste the page and change the content area).
Thats all. This script first prevent the default href action, and load the content div into container div from the target page. If javascript not enabled then it will work as normal website.
To understand more clear… let us see an example. Already we have seen this tutorial:
How to load content via AJAX in jQuery, and the source.
Trying the demo
Yo can download the source after applying safe ajax trick, and the DEMO (try to run after turn off javascript in your browser).
Many thanks!
Many thanks to yensdesign.com - Adrián Mato Gondelle for this great opportunity to write here. Also visit my site http://beski.wordpress.com, and tell me how many of you are looking for ajax pagination code? If the need is high i will explain the ajax pagination code with field sort.
ajax, Fast Tips, jquery
Coding, Tips, Tutorials
Enjoy this post?
Your vote will help us to grow this website and write more entries like this one :)
Nice~ thank you for shared!
[...] June 9, 2009 Ajax Links – work on no javascript Posted by beski under Tutorial | Tags: ajax, jquery | No Comments Last week i have sent a tutorial to http://www.yensdesign.com about ajax links.(http://yensdesign.com/2009/06/safe-ajax-links-using-jquery/) [...]
[...] June 9, 2009 Ajax Links – that work without javascript Posted by beski under Tutorial | Tags: ajax, jquery | No Comments Last week i have sent a tutorial to http://www.yensdesign.com about ajax links.(http://yensdesign.com/2009/06/safe-ajax-links-using-jquery/) [...]
Good tip. Thanks.
PS: You should register jQuery variables with leading dollar char ($) to separate them with other JS variables.
oh,, this is what i looking for around the time,. eh, i had a problems, when the ajaxify loding has done, the jquery that first exists in my webpage doesn’t work, it’s because the ajaxify loading.??
Very well explained jquery tip and I have thought about the same problem, glad it’s been solved here.
Thank you. That is awesome tut i looking for so long time. Thank you very much! This is so cool!!!
This is so cool!!!
I wonder if you wouldn’t be further ahead if you could load your content if javascript is off into an iframe instead? That way you could still keep the page you may be loading the additional content into.
No idea how to do it, but you should be able to do something like a with an iframe to load into???
Meant to say a ‘no script’ tag. So if your javascript is turned off it writes the iframe in.
[...] we have seen the Magic Link post – a tricky ajax links for making it works with the javascript disabled browsers. Here, we are [...]
any help on linking directly to any one section/page?
@pul Yo mean href.location? Checkout this: http://www.java2s.com/Tutorial/JavaScript/0320__Location/Changelocationhref.htm
hi adrian…
what i need to do is be able to have a url that will take me to a particular section…
http://www.mysite.com/index.html#home
http://www.mysite.com/index.html#news
I’m very (very) green with java… so i’m not sure how to go about that.
I’ve followed this tutorial and got everything in the site working…this is the only hitch :\
i’ve gotten as far as changing the code to read:
switch(this.id){
case “home”:
content.slideUp();
content.load(”home.html”, hideLoading);
window.location.hash=”home”;
content.slideDown();
break;
but although it adds the hash to the url.. it wont actually call up that section when i go to it directly. does that make sense? Sorry i’m probably missing something totally obvious..or making a huge mess..one of the two…
any help would be great. thanks!
U better not show the text(Html conent got from the server) before the ajx call finishes to put the html content into the page(Not Professional)
Wait till it finishes the ajax call then u can show the area that will containes the AjaxHtmlcontent
Cheers
AbrahamBoray
Hi, first thanks for the good work. I had a quesion - Is it possible to use images instead of the links ( home, news, interviews) where the images would have two states (active, and inactive)? Or does the script not allow that?