Загрузка контента через AJAX

09.08.2015

Недавно наткнулся на интересную статью. Там приводится пример модуля, который загружает определенный контент блока, используя ajax, в зависимости от типа устройства.

Его можно легко переделать так, чтобы содержимое блока подгружалось по определенному адресу.

Вот собственно сам пример:

1) Указываем адрес и callback функцию, которая будет возвращать содержимое

<?php
/**
* Implementation of hook_block_menu().
*/
function mymodule_menu() {
  $items['ajax/load_device'] = array(
    'page callback' => 'mymodule_loadblock',
    'type' => MENU_CALLBACK,
    'access arguments' => array('access content'),
  );
  return $items;
}

2) Callback функция

<?php
function mymodule_loadblock($device = 'mobile') {
  if($device == 'mobile') {
    $html = views_embed_view('myview', "embed_mobile");
  } elseif ($device == 'desktop') {
    $html = views_embed_view('myview', "embed_desktop");
  }
  $result = array(
    'status' => 'ok',
    'html' => $html,
  );
  drupal_json_output($result);
}

3)Создаем блок

<?php
/**
* Implementation of hook_block_info().
*/
function mymodule_block_info() {
  $blocks[0] = array(
    'info' => t('Main'),
  );
  return $blocks;
}
/**
* Implementation of hook_block_view().
*/
function mymodule_block_view($delta='') {
  $block = array();
  switch ($delta) {
    case 0:
      $block['subject'] = t('<none>');
      $block['content'] = theme('mymodule_main');
      break;
  }
  return $block;
}
/**
* Implements hook_theme().
*/
function mymodule_theme() {
  return array(
    'mymodule_main' => array(
      'template' => 'templates/main',
    ),
  );
}

4) Создаем файл в папке templates в модуле mymodule main.tpl.php

<div id="main-block">
  <div id="inner-data">
  </div>
</div>

5) Добавляем js код

(function ($) {
$(function() {
  var device = 'desktop';
  if( /Android|webOS|iPhone|iPad|BlackBerry/i.test(navigator.userAgent) ) 
  {
     device = 'mobile';
  } 
  var url = '/ajax/load_device/' + device;
  $.get(url, function(data) {
    if (data.html) {
      $("#main-block").html(data.html);
    }
  });
});
})(jQuery);