Asynchronous content loading in Drupal
Categories:
Asynchronous content loading in Drupal
This is a recipe that I used to load the content of my "Portfolio of Websites" page. I took advantage of jQuery and Drupal menu system to generate an asynchronous http request, serve the content and show it inside a div tag.
This is the module code:
.info file
; $Id: asynch.info,v 1.0 2008/02/24 14:07:53 pposada Exp $
name = Asynchronous Loading of content from any page
description = Helper module to load page output asynchronously.
package = Custom
dependencies = pagearray
; recommended = jquery_interface jquery_update.module file
<?php
/**
* Implementation of hook_perm()
*/
function asynch_perm(){
return array('load content asynchronously');
}
/**
* Implementation of hook_menu()
*/
function asynch_menu($may_cache){
$items = array();
if ($may_cache) {
$items[] = array(
'path' => 'asynch/load',
'callback' => 'asynch_printer',
'type' => MENU_CALLBACK,
'access' => user_access('load content asynchronously'),
);
}
return $items;
}
/**
* Called jQuery
* This submits a request to asynch/load page and returns the content part of the page
*/
function asynch_printer($nid){
$path = "node/".$nid;
$return = pagearray_page($path);
print drupal_to_js(array('content' => $return['page']['content']));
exit();
}
?>php snippet that goes inside the page body:
<?php
//jquery_interface_add();
// jquery content loader
drupal_add_js(
'$(document).ready(function(){
$(".view-item-work-sample").css("cursor","pointer");
var first = $("#dynamic-filter-work_sample").find(".view-data-node-nid:first").text();
$("#placeholder").html("<center><img src=\"/sites/all/themes/pedroposada/images/ajax-loader.gif\" align=\"center\"></center>");
$("#placeholder").load("/asynch/load/" + first, function(){
var result = Drupal.parseJson($("#placeholder").html());
$("#placeholder").html(result["content"]);
$(".ws-thumb > img").mouseover(function(){
var source = "/files/imagecache/sample_big/files/" + $(this).attr("alt");
$(".ws-big > img").attr("src",source);
});
$("#placeholder").attr("title",first);
});
$(".view-item-work-sample, .view-item-work-sample-side").click(function(){
var path = $(this).find(".view-data-node-nid").text();
if($("#placeholder").attr("title") != path ){
$("#placeholder").html("<center><img src=\"/sites/all/themes/pedroposada/images/ajax-loader.gif\" align=\"center\"></center>")
.load("/asynch/load/" + path, function(){
var result = Drupal.parseJson($("#placeholder").html());
$("#placeholder").html(result["content"]);
$(".ws-thumb > img").mouseover(function(){
var source = "/files/imagecache/sample_big/files/" + $(this).attr("alt");
$(".ws-big > img").attr("src",source);
});
$("#placeholder").attr("title",path);
});
}
return false;
});
});',
'inline'
);
?>
<div id="placeholder">
</div>This is just one more example of how you can implement the jQuery and Drupal to load content asynchronously.
- 221 reads
Post new comment