Hướng dẫn Views Custom AJAX cho Pagination Callback trong Drupal 7

Hướng dẫn Views Custom AJAX cho Pagination Callback trong Drupal 7

Hướng dẫn Views Custom AJAX cho Pagination Callback trong Drupal 7The following example will illustrate how to override a views default ajaxpagination callback. There are a number of reasons this could be useful. Views ajax pagination will replace the entire view element; which is of course required it's still doing more than we might need. We might also want to keep the already loaded content and simply append new rows. Please note this is still a work in progress and is intended for the Owl Carousel module. The administrator will be given an option to override default views pagination in favor of loading in new slides (rows) via ajax without replacing the entire view.

The content being loaded into the view could in theory be anything. The first step is to create a menu callback which will be triggered via our views pagination.

/**
 * Implements hook_menu().
 */
function owlcarousel_views_menu() {
  $items['owlcarousel/views/ajax'] = array(
    'title' => 'Owl Carousel',
    'page callback' => 'owlcarousel_views_ajax',
    'delivery callback' => 'drupal_json_output',
    'access callback' => TRUE,
    'type' => MENU_CALLBACK,
  );

  return $items;
}

/**
 * Menu callback, load next row (slide) by ajax.
 */
function owlcarousel_views_ajax() {
  // Get view ident.
  $name = $_REQUEST['view_name'];
  $display_id = $_REQUEST['view_display_id'];

  $view = views_get_view($name);
  $view->execute($display_id);
  $view->preview();
  
  // Render only view row results.
  $renderer = $view->style_plugin->row_plugin;
  foreach ($view->result as $index => $row) {
    $view->row_index = $index;
    $renderer = $view->style_plugin->row_plugin;
    $rows[] = $renderer->render($row);
  }

  drupal_json_output($rows);
}

Now that we have our content ready; the final step is to override the default views pagination. There seems to be a few methods for achieving this, bind/ unbind events, be a maverick and just send another $.ajax request etc. Regardless of the method chosen our function owlcarousel_views_ajax(); requires at the very least the view name and display id to be sent in the request. The simplest and cleanest approach should be to override/ copy the pre-existing function Drupal.views.ajaxView.prototype.attachPagerLinkAjax from views/js/ajax_view.js. The modified function is then placed into owlcarousel.settings.js.

/**
 * @file
 * owlcarousel.views.js
 */

(function($) {

    /**
     * Modified attach ajax behavior to a singe link.
     */
    Drupal.views.ajaxView.prototype.attachPagerLinkAjax = function(id, link) {
      var $link = $(link);

      // @todo, add check for remaining rows.
      if ($link.hasClass('next')) {
        var viewData = {};
        var href = $link.attr('href');

        $.extend(viewData, this.settings, Drupal.Views.parseQueryString(href), Drupal.Views.parseViewArgs(href, this.settings.view_base_path));
        $.extend(viewData, Drupal.Views.parseViewArgs(href, this.settings.view_base_path));
        this.element_settings.submit = viewData;

        var owl = $(this.element_settings.selector).find('.owl-carousel');
        var view = owl.parent().parent();

        if (owl.length) {
          this.element_settings.url = Drupal.settings.basePath + 'owlcarousel/views/ajax';
          this.element_settings.success = onSuccess;
        }

        this.pagerAjax = new Drupal.ajax(false, $link, this.element_settings);
      }

      /**
       * Append new slide.
       */
      function onSuccess(content) {
        var page = owl.data('owlCarousel').currentItem;

        owl.data('owlCarousel').addItem(content);
        owl.data('owlCarousel').jumpTo(page);
        view.find('.ajax-progress-throbber').remove();

        if (isNaN(this.element_settings.submit.page)) {
          this.element_settings.submit.page = 1;
        }
        this.element_settings.submit.page++;
      }
    };

}(jQuery));

That should be it. While a fairly fringe use case this example should demonstrate how easily views results can be altered to suit. Delivery of large media such as images and video to mobile devices is becoming an increasing problem. The best method I have found is simple; reduce the number of concurrent HTTP requests.

Bạn thấy bài viết này như thế nào?: 
No votes yet
Ảnh của Tommy Tran

Tommy owner Express Magazine

Drupal Developer having 9+ year experience, implementation and having strong knowledge of technical specifications, workflow development. Ability to perform effectively and efficiently in team and individually. Always enthusiastic and interseted to study new technologies

  • Skype ID: tthanhthuy

Tìm kiếm bất động sản

 

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
Total Video Converter : Phần mềm đổi đuôi file video

Total Video Converter : Phần mềm đổi đuôi file video

Total Video Converter là chương trình chuyển đổi định dạng file multimedia toàn diện nhất hiện nay.

New iPad lại trục trặc với kết nối Wi-Fi

New iPad lại trục trặc với kết nối Wi-Fi

Một số khách hàng đã phàn nàn rằng iPad mới kết nối Wi-Fi kém hơn nhiều so với những mẫu iPad trước đây của Apple.

Google Street View Tới Đất Nước Bỉ Xinh Đẹp

Google Street View Tới Đất Nước Bỉ Xinh Đẹp

Hầu hết mọi người đều biết đến đất nước Bỉ nhỏ bé xinh đẹp với một những nét văn hóa độc đáo với trên 300 lâu đài, 40 di sản văn hóa Thế giới

Công ty diệt chuột T&C

 

Diet con trung