Drujax

Categories

Component ID

1941270

Component name

Drujax

Component type

module

Maintenance status

Development status

Component security advisory coverage

covered

Downloads

1125

Component created

Component changed

Component body

Drujax alows that all page requests are loaded through ajax. This module is useful when you want page to page transitions without compromising on SEO.

How does it work?

Drujax uses an additional content.tpl.php file that will be loaded into your page.tpl.php. When an ajax request happens the content.tpl.php file will be loaded through a json object. It is also possible to add variables to the json object from within your template files.
On the frontend, all content links are collected with jQuery address which causes the links to be load through ajax.

Installation

  1. Download jQuery Address from http://www.asual.com/jquery/address/
  2. Add Jquery.address.min.js to /sites/all/libraries/jquery_address/
  3. Add content.tpl.php to your templates folder
  4. Cut the main contents from your page.tpl.php and copy to your content.tpl.php file
  5. Put "print $content" in your page.tpl.php where your main content used to be
  6. Enable the Drujax module

Dependencies

- libraries API

Customization

Ajax complete Handler

    <script>
        Drujax.setHandler(yourHandler);// calls yourHandler(json,path)
    </script>

Example:

    <script>
        Drujax.setHandler(function(data,path){
            $("#drujax-main").animate({marginLeft:-$(window).width()},500,function(){
                for(var i in data.content){
                 $(i).html(data.content[i]);
                }
                $(this).animate({marginLeft:0},500);
            });
        })
    </script>

Add variables to the json reponse

    <?php 
        // in your content.tpl.php
        drujax_var("key","value"); 
        ...

this json response will look like this

    {
        "title":"page title",
        "key":"value",
        "content":{
            "#drujax-main":"your content.tpl.php output"
        }
    }