Alternative pjax / djax and ajaxy

Question

I evaluated jQuery plugins to make a Drupal 7 site using AJAX everywhere. I used ajaxy . But he does not seem to be very actively supported.

Two possible solutions that I found are pjax and djax . What are your impressions of these plugins?

What other plugins do you know that perform similar functionality? Very important features are SEO optimization (preferably using pushState, so no hash is used. Hashes are used as a reserve for unsupported browsers). It should also be very flexible, as it should work with the Drupal HTML structure.

Answer 1

Drupal provides its own AJAX framework , which can be easily used for ajaxify links . You cannot write any JavaScript code since many AJAX commands are already provided . The solution is SEO friendly. Links are displayed using the nojs element in its path, which is then replaced with ajax when used by the framework.

See AJAX Example , AJAX Graceful Degradation, and AJAX Commands examples of modules for using the API.

Answer 2

since you use PHP and jQuery, the best option would be my project , phery http://phery-php-ajax.net , it is actively supported, and I have been improving it over the past 2 years.

with the help of views, you can segment your site in separate ajax views or use the full-blown content of the page through AJAX. it is optimized for SEO, and since it uses delegation delegation, all new elements are already auxed out. It does not provide the use of a history API or hash events, you can choose the best functionality for yourself.

the full loaded AJAX content for your site will be (of course, only a container, no menu, footers, etc.)

  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, this will 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(); } //... 

Answer 3

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

I have successfully used pjax in several projects and planned to use it a lot more.

You can find more information about pjax HERE .

And since you mentioned the use of Drupal, you can find this article .