Hướng dẫn Reloading a View + arguments với Ajax trong Drupal 7

Hướng dẫn Reloading a View + arguments với Ajax trong Drupal 7

Most of us know that Views module has its own Ajax functionality. If we enable the ajax checkbox in the view settings, a bunch of Ajax-related JavaScript files will be loaded for us on our views' page.

Hướng dẫn Reloading a View + arguments với Ajax trong Drupal 7

One of the files which will be loaded is:

/views/js/ajax_view.js

If we drill down this file and analyze it, we will understand some of the Views' ajax functionality. Lets take a case and see how we can reuse Views' Ajax.

Reloading a View with specific arguments via Ajax:

Lets say we have 2 views on the same page, for instance we use Panels and we have a left-side view and a content view. The content view is empty on the first page load, but when user selects something in the left-side view we want to reload dynamically the content view with specific arguments passed to it.

First idea that came to my head is to use my custom JavaScript script that will take some arguments onclick from the left-side view row, will make a custom Ajax call to one of my modules' callback, that will use views_embed_view to render the new output and use drupal json to output it back to the page. Then I'd simply replace the contents of the view and we're done.

But I kept thinking that declaring a custom callback, processing functions (and where are callback functions there are access functions) and custom ajax calls is a wrong way, because Views module handles all of those by default.

All of the Ajax-enabled views instances are stored in Drupal.views.instances and all of them are of Drupal.views.ajaxView type.
We can use these instances to make the drupalish ajax calls which will update the views in the right way.

But first we need to inject our JavaScript into a specific view. We can use preprocessing functions but I'd like to use my .module file and hook_views_pre_render(). One interesting thing to notice here, make sure your JavaScript file is loaded after ajax_views.js, this is why we used JS_THEME group.

/**

 * Implements hook_views_pre_render().

 */

function campaigns_feature_views_pre_render(&$view) {

    if ($view->name == 'active_campaigns' && $view->current_display == 'panel_pane_sidebar') {

     drupal_add_js(drupal_get_path('module', 'campaigns_feature') . '/js/active_campaigns.ui.js', array('group' => JS_THEME));

     }

}

Once the JavaScript is loaded, we can proceed to implementation. 

(function($) {

Drupal.behaviors.activeCampaigns = {

attach: function(context, settings) {

// First we use the settings object to get the views' details

var views = settings.views.ajaxViews;


// view_dom_id is an unique value, it's unique per view and per pageload

var view = view_dom_id = view_name = undefined;

for (var viewsName in views) {

if (views.hasOwnProperty(viewsName)) {

view = views[viewsName];

// I used view_display_id to actually identify my view

// and store it in the view variable

if (view['view_display_id'] == "pane_active_camp_users") {

view_name = viewsName;

view_dom_id = view["view_dom_id"];

}

}

}


// Then we use view_name (which is views' key that contains unique view_dom_id)

// to do our manipulations

var instance = Drupal.views.instances[view_name];

// Then we pass through all of the left-side views items

$('.pane-active-campaigns-panel-pane-sidebar .views-row', context).each(function(index, element) {

var $this = $(element),

viewData = {},

nid = $('.views-field-nid .field-content', $this).text();

// Load the argument (it's actually hidden in the view, not excluded)

instance.settings['view_args'] = nid;

// This is the way we update the viewData object with defaults and

// later with overridden values

$.extend(viewData, instance.settings);

instance.element_settings.submit = viewData;

// Create the Drupalish ajax call

new Drupal.ajax(false, $this, instance.element_settings);

});


}

}

})(jQuery);

You can tweak viewData and/or instance.element_settings how you want (for instance to load the view onmouseover event) to achieve the right functionality.

And we all can forget about writing custom callbacks and just re-using Views' Ajax functionality.

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

 
PageRank là gì?

PageRank là gì?

PageRank là một chỉ số để Google đánh giá mức độ tin cậy và chất lượng của mỗi webpage trong danh mục của mình. Khi nói đến PageRank người ta thường nghĩ đến ngay Google PageRank.

Dễ dàng thực hiện CSS Regression Testing với Resemble.js trong Drupal 7

Dễ dàng thực hiện CSS Regression Testing với Resemble.js trong Drupal 7

In a nutshell, Resemble.js takes two images, and generates a third that highlights the differences between the source images. Why is that exciting?

Foxconn

Foxconn mua lại 9% cổ phần của GoPro với giá 200 triệu USD

Foxconn là một trong những công ty sản xuất linh kiện điện tử và gia công hàng đầu trên thế giới. Để mở rộng thị trường kinh doanh của mình Foxconn vừa tuyên bố đã mua lại 9% cổ phần của công ty GoPro với giá 200 triệu USD.

Tomdesgin.vn

 

Drupal Services