使用 AJAX 嵌入视图

Posted 2023-02-26

【中文标题】使用 AJAX 嵌入视图

【英文标题】：Embed a View using AJAX

【发布时间】：2011-02-08 11:36:52

【问题描述】：

我有一个带有一个参数和一组公开过滤器的视图。当用户过滤视图时，使用 Ajax 提交表单，并使用 location.hash 将过滤器附加到 url。

如果过滤器存在于 location.hash 中，我的目标是在初始页面加载时过滤视图。

目前，我正在通过 Ajax 回调加载视图，它工作得非常好。但最大的问题是视图的 Ajax 不起作用。

这是加载视图的回调。

// Load the view object.
$view = views_get_view('taxonomy_term');
$view->set_display('page');
$view->set_use_ajax(TRUE);

// Pass the current tid as the argument.
$view->set_arguments(array($tid));
// Set the current page.
$view->set_current_page($page);
// Set the exposed filters.
$view->get_exposed_input();

// Execute.
return $view->execute_display();

当我直接导航到该回调时，一切正常。但不是当我通过 Ajax 加载它时。

有什么想法吗？

更新： 似乎 Drupal.behaviors.ViewsAjaxView() 由于某种原因没有执行。如果我手动执行它，一切正常。

【参考方案1】：

好的，我找到了答案。

我现在不是从我自己的回调中加载视图，而是从常规的 ajax 回调中加载视图。

在我的页面上，我创建了视图对象，并将配置添加到 Drupal.settings。

$view = views_get_view('taxonomy_term');
$view->set_display('page');
$view->set_use_ajax(TRUE);
$view->set_arguments(array($tid));
$settings = array(
  'views' => array(
    'ajax_path' => url('views/ajax'),
    'ajaxViews' => array(
      array(
        'view_name' => $view->name,
        'view_display_id' => $view->current_display,
        'view_args' => check_plain(implode('/', $view->args)),
        'view_path' => check_plain($_GET['q']),
        'view_base_path' => $view->get_path(),
        'view_dom_id' => 1,
        'pager_element' => $view->pager['element'],
      ),
    ),
  ),
);
drupal_add_js($settings, 'setting');
views_add_js('ajax_view');

然后我加载我的 js，它将 location.hash 中的当前过滤器添加到设置中。最后，加载视图。

var data = ;
// Add view settings to the data.
for (var key in Drupal.settings.views.ajaxViews[0]) 
  data[key] = Drupal.settings.views.ajaxViews[0][key];

// Get the params from the hash.
if (location.hash) 
  var q = decodeURIComponent(location.hash.substr(1));
  var o = 'f':function(v)return unescape(v).replace(/\+/g,' ');;
  $.each(q.match(/^\??(.*)$/)[1].split('&'), function(i,p) 
    p = p.split('=');
    p[1] = o.f(p[1]);
    data[p[0]] = data[p[0]]?((data[p[0]] instanceof Array)?(data[p[0]].push(p[1]),data[p[0]]):[data[p[0]],p[1]]):p[1];
  );

$.ajax(
  url: Drupal.settings.views.ajax_path,
  type: 'GET',
  data: data,
  success: function(response) 
    var viewDiv = '.view-dom-id-' + data.view_dom_id;
    $('#content > div.limiter').html(response.display);
    // Call all callbacks.
    if (response.__callbacks) 
      $.each(response.__callbacks, function(i, callback) 
        eval(callback)(viewDiv, response);
      );
    
  ,
  error: function(xhr) 
    $('#content > div.limiter').html('<p id="artist-load-error">Error text.</p>');
    $('#block-request-0').hide();
  ,
  dataType: 'json'
);

这样，视图通过常规流程加载，一切都按预期工作 =)

【讨论】：

太棒了，网上关于这个的信息太少了（drupal 没有惊喜）谢谢