AJAX-based page update with graceful degradation

Published on January 20, 2010 at 12 am by Aleksandr Tsertkov

This is a simplified POC showing how to use partial page update with AJAX when JavaScript is enabled but still have working website links in case of disabled JavaScript in client browser. It uses a bit of jQuery and PHP scripting.

Go directly to the demonstration. You can safely disable JavaScript in your browser (don’t forget to reload page though after that) and links still will work. You may also copy hash based links (http://www.devhands.com/wp-content/custom/smartlinks/#page3) and insert them into new browser tab, they also will work with enabled JavaScript.

Download full package or check the JavaScript logic right here:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:devhands="http://www.example.com/schema">
<head>
    <title>Smart links POC</title><a href='http://www.devhands.com/wp-content/uploads/2010/01/smartlinks.tar.gz'>smartlinks.tar</a>
    <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
</head>
<body>
    <h1>Smart links Proof-Of-Concept</h1>
 
    <p>
        This is a simplified example with combined direct (full page load) and ajax (partial content update) links with gracefull degradation. You can try disabling JavaScript in your browser at all.
        These links should be good to search engines as well. JavaScript history handling is not implemented here, though it's not hard to add it.
    </p>
    <ul>
        <li><a href="?page=page1" devhands:hash="page1" devhands:target="#placeholder" devhands:href="?page=page1&mode=partial">page-1</a></li>
        <li><a href="?page=page2" devhands:hash="page2" devhands:target="#placeholder" devhands:href="?page=page2&mode=partial">page-2 (+ css)</a></li>
        <li><a href="?page=page3" devhands:hash="page3" devhands:target="#placeholder" devhands:href="?page=page3&mode=partial">page-3 (+ javascript)</a></li>
    </ul>
 
    <div id="placeholder">Loading data...</div>
    <script type="text/javascript">
    /*<![CDATA[*/
        $(document).ready(function(){
 
            var baseUri = function(location){
                return location.substr(0, location.lastIndexOf('/'));
            }(document.location.toString());
 
            //
            // if request was made to open concrete page or query string was not
            // empty reloadPageUrl will be populated with url which will be used
            // for all "smart" links (real page reload will happend)
            //
            // in our case this url will be site frontpage url
            //
 
            var reloadPageUrl = function(){
                if (document.location.search) {
                    return baseUri;
                } else {
                    return false;
                }
            }();
 
            //
            // intial page load (load partial content immediately after page has
            // been loaded)
            //
 
            if (!reloadPageUrl) {
                if (document.location.hash && '#' != document.location.hash) {
                    var page = encodeURIComponent(document.location.hash.substring(1));
                } else {
                    var page = 'page1';
                }
 
                $('#placeholder').load(baseUri + '?page=' + page + '&mode=partial');
            }
 
            //
            // click handler for "smart" links
            //
 
            $('a').click(function(event){
                var href = baseUri + this.getAttribute('devhands:href');
                var target = this.getAttribute('devhands:target');
                var hash = this.getAttribute('devhands:hash');
 
                if (href && target) {
                    if (hash && reloadPageUrl) {
                        document.location = reloadPageUrl + '#' + hash;
                        return false;
                    }
 
                    $(target).load(href);
 
                    if (hash) {
                        document.location = '#' + hash;
                    }
 
                    return false;
                }
            });
        });
    /*]]>*/
    </script>
</body>
</html>
Categories: JavaScript, php, programming

Leave a Reply