Load content depending on the device using an ajax call in Drupal 7

This tutorial explains how to load "device specific content" depending on the device being used.

For this example the content being used are two embed views, one is called "Mobile embed" and the other is called "Desktop embed". To see how to create an embed view please go to the previous tutorial: Embeding a view in Drupal 7

1. Detecting the device and retrieving the content using an ajax call

Detecting the device must be done in javascript as it is executed on the client side. There are various ways of detecting the device being used, here is just one way of doing so. The ajax call has the device as a parameter and in PHP the content will be loaded depending on it.

var device = 'desktop';
if( /Android|webOS|iPhone|iPad|BlackBerry/i.test(navigator.userAgent) ) {
   device = 'mobile';
}
var url = '/ajax/load_device/' + device;

2. Loading the content

The content is loaded in PHP on the server side. In this example the views_embed_view() function is used to load an embed view. The machine name of the two embed views used in this example are "embed_mobile" and "embed_desktop".

<?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;
}
?>

and the callback function:

<?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. Appending the content to a DOM element

Now that the content is loaded it needs to be appended to an element in the html. Any class or id will work however in this example things are going to be complicated a little to show a very useful trick which will allow to append the content to a block. The advantage of this is that the block may be moved to different regions using the block administration which is much more user friendly than hard coding it in PHP in a template file. 

3.1 Creating the block

<?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',
    ),
  );
}
?>

and the file main.tpl.php which should be located in the template/ directory of the module "mymodule".

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

3.2 Appending the content to the block

The content loaded needs to be appended to the block #id. 

  $.get(url, function(data) {
    if (data.html) {
      $("#main-block").html(data.html);
    }
  });

and here is all the javascript together:

(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);

Comments

3

Cool technique, but since it is ajax, it shouldn't be used for SEO-critical elements. Google just doesn't see any ajax loaded content.

How about loading a text only view on page view and replace it with a rich view by ajax? Wouldn't hurt SEO then, right?

I think that by placing the contents of the view in a <noscript> it will work fine for the Web bots

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>