CODEWITHSUNDEEP
jqueryajaxdrupal
luksak
luksak

Reputation: 3652

Alternative to pjax/djax and ajaxy

I was evaluating jQuery plugins to make a Drupal 7 site using AJAX everywhere. I have been using ajaxy. But it does not seem to be very actively maintained.

Two possible solutions I have found are pjax and djax. What are your experiences with those plugins?

What other plugins do you know that do similar functionality? Very important features are SEO friendliness (preferably using pushState so no hash is being used. Hashes are used as a fallback for not supported browsers.). And also has to be very flexible since it has to wirk with Drupal's HTML structure.

Upvotes: 4

Views: 5408

Answers (3)

RiddleMeThis
RiddleMeThis

Reputation: 1345

Go with pjax, it is easy to implement and SEO Friendly. For unsupported browsers, mainly below IE 10 it simply fallsback to the default browser behavior (without any work on your part).

I have used pjax on a handful of projects successfully and plan to use it on many more.

You can find more info on pjax HERE.

And since you mentioned your using Drupal, you may find this article helpful.

Upvotes: 1

pocesar
pocesar

Reputation: 7050

since you are using PHP and jQuery, the best bet would be my project, phery http://phery-php-ajax.net, it's actively maintained, and I've been improving it for the last 2 years.

through using views, you can either segment your site in individual ajax views, or use the full blown page content through AJAX. it's SEO friendly, and since it uses event delegation, all new elements are already ajaxified. It doesn't enforce to use history API or hash events, you may decide the best funcionality for you.

a full blown AJAX loading content for your site would be (only the container, leaving out menus, footers, etc, of course)

    var ever_pushed = false; // needed for chrome

    phery.view({
        '#container': {
            'exclude': ['/blog'], // exclude wordpress from it
            'beforeSend': function(){
                $('body,html').scrollTop(0); // go to the top
            },
            'render': function(html, data, passdata){
                var $this = $(this);
                nav_items.removeClass('current').filter('.' + data.controller).addClass('current'); // update the menu
                document.title = data.title; // set the document title

                /* Good browsers get history API */
                if (typeof passdata['popstate'] === 'undefined') {
                    window.history.pushState(data, data.title, data.url);
                    ever_pushed = true;
                }

                _gaq.push(["_trackPageview"]); // Google analytics

                $('#content')
                .find('>div')
                .animate({'opacity':0}, 375) // fadeout
                .promise()
                .done(function(){
                    $body.removeClass().addClass(data.body_class);
                    $this.html('').html(html);
                    on_reload(); // restart events that need to be bound on new elements
                    cufonize(true); //apply cufon
                    $('#content').find('>div').animate({'opacity':1}, 375); // fadein
                });
            }
        }
    });

    $(window).bind('popstate', function(e){
        if (!ever_pushed) {
            return;
        }
        phery.view('#container').navigate_to(document.location.toString(), null, {'popstate':true}); // back and forward history buttons
    });

a smaller version of the same code would be:

$(function(){
    var ever_pushed = false;
    phery.view({
        '#container': {
            'afterHtml': function(html, data, passdata){
                /* Good browsers get history API */
                if (typeof passdata['popstate'] === 'undefined') {
                    window.history.pushState(data, data.title, data.url);
                    ever_pushed = true;
                }

            }
        }
    });

    $(window).bind('popstate', function(e){
        if (!ever_pushed) {
            return;
        }
        phery.view('#container').navigate_to(document.location.toString(), null, {'popstate':true}); // back and forward history buttons
    });
});

in your PHP side, it would be:

function render_view($data, $params, $phery){
   return PheryResponse::factory()->render_view(views_get_view('all_projects')->execute_display('Block', array()));
}
//...
public function render($reset = FALSE){
   Phery::instance()->views(array(
     '#container' => array($this, 'render_view')
   ))->process();
}
//...

Upvotes: 0

Pierre Buyle
Pierre Buyle

Reputation: 4873

Drupal provides its own AJAX framework that can easily be used to ajaxify links. You don't get to write any JavaScript code as many AJAX commands are already provided. The solution is SEO friendly. Links are outputted with a nojs element in their path which is then replaced by ajax when used by the framework.

See the AJAX Example, AJAX Graceful Degradation and AJAX Commands example modules for API usages.

Upvotes: 1

Related Questions