Im looking for an easy implementation of AJAX-like page loading inside a div. im not looking for anything other than page requests and to use a simple loading animation while the js inserts the contents. does anyone know of or have used a easy implementation of an ajax library. my problem is im a designer not a coder, but i can chore my way through and get a few things accomplished myself.

heres what im trying to accomplish:
I want to load initially a 3 column page with 2 category/listing columns and 1 larger entry column.
example here: http://drupal.brandform.net/ already started to be merged into drupal.
top level categories will always be in the left column
from there i want to be able to load dynamically "listing titles" into the second column like a "block" in drupal.
if you click a title it would asynchronously load the entry and comments into the far right column(with a loading animation)

so far ive been able to find a multitude of ajax/javascript libraries that claim to be THE solution, but I cant figure out where to get started with a basic implementation here.
I found one very easy script to work with from Dynamic Drive, but it doesnt seem backwards compatible...
heres a sample implementation im working on.
http://dymaxion2.liquidratio.com/
but getting the title image to replace the way im doing it is buggy in ie and didnt seem right.

Any clues on how to make ajax page requests backwards compatible??? ie revert to href links and full refresh pages if the user does not have javascript? seems easy enough... maybe start with a detect and modify the template based on the users conditions of javascript/nojs ...

can anyone recommend a simple framework for loading items in drupal into my container divs?
this theme might just be kick-ass if can get through some of these hurdles!

thanks all!

Comments

jjeff’s picture

Hi Isaac,

I've been working on a module to bring the Prototype and Scriptaculous libraries into Drupal. What you're describing sound like the kind of stuff that this module will be able to enable.

It's currently called prototype.module, but I'm thinking that it may be more apt to call it scriptaculous.module (because scriptaculous encompasses prototype).

The module is in an alpha stage right now, but I anticipate having something to show people in a few weeks. My early testing is very exciting though! Stay tuned.

--= Jeff Robbins | www.lullabot.com =--

Dublin Drupaller’s picture

Hi Issaac,

Let me know if this is of interest. It's a craglist style message board (or watercooler) for Drupal that is a work in progress, but, does exactly what you mentioned i.e. loads content and injects it into a DIV (As opposed to reloading the entire page).

Just click on the "new drupal forum test" to see how it works..it uses very simple ajax functions that could be used for "read more" links, tables, Drupal pagers etc..

Dub

Currently in Switzerland working as an Application Developer with UBS Investment Bank...using Drupal 7 and lots of swiss chocolate

sangamreddi’s picture

Hi Dub,

I have just seen the "new drupal from test" from the link given. It's really cool and amazing. Is there any module released? I have seen only ajax spellcheck module. looking for such solution.

Sunny
www.gleez.com

Dublin Drupaller’s picture

Hi Sunny..

A module may not be needed...it could be done with the theme...

the ajax script that I used on the "Drupal Watercooler idea" is very simple and uses a bog standard native XMLHttpRequest object that (I think) is part of the Drupal core from Druapl 4.7 onwards.

I need to double check that, but, I think it is possible to implement the ajax needed from your theme.

For example: let's say you wanted a two column bloglist. Where in the LEFT DIV you have a list of the 10 most recent blogs and in the RIGHT DIV, you have the blog node the user just clicked on.

you could theoretically do it by:

  1. use one of the sliced bread php page snippets to extract the list of 10 most recent blogs and before the Print $output statement, your links are formatted to call the native XMLHttpRequest object ajax call to display that node (just the $content) in the RIGHT DIV
  2. edit your page.tpl.php file to insert the necessary javascript in the page header

I hope that makes sense. I haven't tried that, but, it is extremely simple to implement in a document. I think it's possible to do it without the need of extra modules. Although I think it's only a matter of time, before we see an "Ajax Theme".

Dub

Currently in Switzerland working as an Application Developer with UBS Investment Bank...using Drupal 7 and lots of swiss chocolate

jasonwhat’s picture

Dub that is amazing stuff. I really like this for splash pages as well so you can give a visitor quick access to a bunch of overview information on one page. I'm curious though about only using CSS for much of this--is it possible, is it better to do it that way? I love ajax, but many people turn off java and some browsers still don't support those features, but nearly all support CSS. I have an example somewhere I'll try to dig up, or there is probably a good one on http://cssplay.co.uk.

Dublin Drupaller’s picture

Hi Jason,

That sounds like a great idea...it would be incredibly useful for a site map...or even handbooks. (One of the irritating things of online handbooks, is that you have to wait for the whole page to load, rather than just what you want)

To create an ajax based front page...you could:

  • install the front_page.module
  • Paste your complete HTML or mix of PHP & HTML into the text area provided.
  • select the FULL PAGE option
  • upload the ajax script to your server and insert the links to load the ajax in the HEAD of your document

As far as I know, you cannot do this with CSS alone. Although google, Apple and other very much used sites are using ajax as standard, so I think it's a light type of javascript that most people can see. i.e. as I understand it, one of the key advantages of ajax is that it is non-obtrusive javascript that most browsers allows. (Don't quote me on that, it's just as I understand it. check it out in wikipedia..the ajax I'm using for the "Watercooler for Drupal" uses the native XMLHttpRequest object)

hope that makes sense..and sparks a few ideas.

Dub

Currently in Switzerland working as an Application Developer with UBS Investment Bank...using Drupal 7 and lots of swiss chocolate

sangamreddi’s picture

Hi Dub,

I am very new to programming, i don't know all these stuff. I am good at HTML/CSS so i can theme well and moreover drupal theming is very flexible and easy.

It seems using ajax is very easy after reading your post. i'll try and post the same.

Thank you very much.

Sunny
www.gleez.com

Dublin Drupaller’s picture

if you know how to create a DIV and put a link in the HEAD of a document to load up some simple ajax script, you should be able to do this Sunny.

I found it incredibly easy to implement and very valuable from a functionality/ergonomic point of view

You simply create a DIV and call it something obvious like "contentDIV". When creating the links, ajax simply loads the content and puts it inside that "contentDIV" without loading the whole page again.

Edited: Sorry..posted the wrong link...here's the minimal ajax demo that will help get anyone with a rudimentary knowledge of HTML started.

Dub

Currently in Switzerland working as an Application Developer with UBS Investment Bank...using Drupal 7 and lots of swiss chocolate

jasonwhat’s picture

Thanks Dub,

This is great stuff. I'm using something similar with Flexinode so each flexinode field has its own tab.

I think you can do a lot of this in CSS, but you are right that with ajax usage becoming more common (and programs like ruby) it may not be necessary. Could you give some code samples of both the script used and formatting the php to separate the node titles and content to display like you did in your forums demo?

Dublin Drupaller’s picture

will do Sunny...am busy with something else at the mo. but will try and knock up a quick blog demo you could copy n paste.

Dub

Currently in Switzerland working as an Application Developer with UBS Investment Bank...using Drupal 7 and lots of swiss chocolate

sangamreddi’s picture

Hi Dub,

I have followed the minimum code example and it works fine for me. But i don't know how to do it with the dynamic content like list of blogs on one side and content on otehr side. well i am waiting for the example.
Take your own sweet time and write a demo blog where i can copy n paste.

Thanks a lot.

Sunny
www.gleez.com

sangamreddi’s picture

Hi Dub,

Waiting for the blog example. Sorry to remind you.

Sunny
www.gleez.com

Dublin Drupaller’s picture

reminder noted Sunny...I'm not ignoring you by the way..I'm busy doing something else and am just responding to queries that takes a few minutes.

The ajaxian blog needs an hour or two to get right...will try to get to it soon.

Dub

Currently in Switzerland working as an Application Developer with UBS Investment Bank...using Drupal 7 and lots of swiss chocolate

sangamreddi’s picture

Thank You verymuch Dub. I know U won't ignore. But i just reminded you as i am little eager to see.

Sunny
www.gleez.com

patrickharris’s picture

Thanks for the link to the jah.js Dub - it works great.
How to do this using drupal.js though? I've tried the three ajax/javascript tutorials for 4.7, but haven't managed to get any of them working. Any ideas?

jivyb’s picture

Hi. I think I follow everything you're saying in this thread, but I'm new enough to Drupal that I'm not sure how to insert the javascript into the head of the page--I can do it with other apps, but I'm not sure how to do it in drupal. Can anyone point me in the right direction or give a quick explanation? Once I get that figured out, I should be good to go... (hopefully!)

Steven’s picture

drupal_add_js('misc/drupal.js');
<?php print check_markup( << It's in fact even easier if you use the synchronous version of HTTPGet():

<div id="placeholder" style="white-space: pre; max-height: 12em; overflow: auto;"></div>
<a href="http://drupal.org/CHANGELOG.txt" onclick="if (isJsEnabled()) { $('placeholder').innerHTML = HTTPGet('http://drupal.org/CHANGELOG.txt'); this.style.display = 'none'; return false; }">Read Changelog.txt</a>

Live demo:

Read Changelog.txt

--
If you have a problem, please search before posting a question.

EOD
, 3, false);

nevets’s picture

While simplier to use synchronous requests they have the potential to lock up the browser if the request never completes.

ica’s picture

Looks and functions nicely, Steven

Is it possible to apply HTTPGet(NODES) link and HTTPGet(NAV) the block sub navigation items

- NAV -like the one on the right on this site -that is expands the menu items,
- and links to NODES without refresh (like Dubs example applied to the FORUM)

if so how?

isaachorton’s picture

wow thanks for the great responses.
im a bit curious about the prototype module although im guessing its overblown for what i want... i just want ajax calls to fill the contents of a div(from external file) and be backwards compatible with other non js enabled browsers(revert to "a href" links)

I really liked your application DUB of the watercooler thingy....
but if i disable javascript in my browser(via webdeveloper plugin) and go to the page and try to click anything, nothing happens....
this is what i want to prevent. however, youre doing it better than i am so far as of yet... I like the little "loading animation" that displays before each page pops in. nice. and great job integrating it with your installation!

Steven, you're synchronous implementation is klose to what im getting at but with the Nevets concern(and me trying to choose which direction im going like a dowser) im not sure if i should implement that.

ive also been playing with sack:
http://twilightuniverse.com/resources/code/sack/
which is an interesting implementation.

im still looking for the holy of grail of simple ajax page loading that is backwards compatible!!!

jivyb’s picture

I really like this and I think it does what you're talking about, I just don't know if you can use it with drupal. If so, I'd like to know how. But I've used it with another cms with great results.

http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

isaachorton’s picture

Hey I put together an example of what i was trying to to accomplish. so far its working quite nicely.
many thanks to Dublin Drupaller for providing the code and pointing me in the right direction. :)

im replacing two different divs with this script. its very sleek. highly recommended as its super easy to implement.

http://isaachorton.liquidratio.com/

clicking categories loads listing into center column and clicking listings loads blog posts into the far right column.
content shifts left in case of skinny browser window.

sangamreddi’s picture

Hi isaachortan,

Can u post the code here so that i can copy and paste. I am eagerly waiting for an example. The 'Dub' has pointed me to try some examples, and those worked fine. But I don't know how to create from dynamic list. for Ex; a list of blog titles on left side and when click the link, the blog content displays on the right side. The one in the example.

Thanks in Advance

Sunny
www.gleez.com

Dublin Drupaller’s picture

great design isaachorten..

looks superb.

Sunny: I have plopped the jas.js and javascript.js files that Isaachorton used for his excellent liquidratio example into my sandbox. You have a choice of ZIP or RAR.

Hope to catch an hour or two soon, to do a blog example that's copy and pastable for others to use.

Dub

Currently in Switzerland working as an Application Developer with UBS Investment Bank...using Drupal 7 and lots of swiss chocolate

sangamreddi’s picture

I jave just downloaded the rar. But I am waiting for the blog example.

Sunny
www.gleez.com

jasonwhat’s picture

Great implementation. I really like it. One thing you need to do with this type of stuff though is make sure you have clear permanent link fields so a user knows how to get directly back to a node or share it with others. I'm not sure the best way to do this, other than printing the url.

Thox’s picture

This doesn't seem to degrade for users with JS turned off for any reason. Any plans to change that?

ica’s picture

I am not sure a Javascript turned off while js option turned off on browsers prefs. is there a way around this?

If there is even Google is ignoring/missing this

example
try this with your js of your browser turned on and again off again

http://www.google.com/reader/lens/

btw- google will release media lens API exampled here allowing people intgerate into websites and frameworks

Thox’s picture

Damn drupal.org's security - I can't even tell you the code you're doing wrong!

Change your links, learn about accessibility and JavaScript. I would help more but this is the third time I've had to write this message.

marc80b’s picture

indeed a nice design Isaac,

I've accomplished something similar using the DOJO framework
http://dojotoolkit.org/docs/ and some instructions on making a page-refresh engine on http://snyke.net/blog/2006/02/05/ajax-design-patterns/
This is fairly easy to implement. I haven't explored your method in detail but i presume it works the same way; by loading content in a DIV using the innerHTML method. is that correct?

The problem that i'm facing now is that i want to implement other AJAX widgets (let's say a form validation) within the content DIV. unfortunately this is not possible while using the innerHTML method cause it simply doesn't parse JavaScript.

To my best knowledge (i'm merely a mid-core geek) this is only possible by using XML or JSON
Anyone had any experience with this?

thnx

ica’s picture

WrodPress based solutions seems step ahead on this subject too

to play with it
http://www.bloxpress.org/demo/

project site
http://www.bloxpress.org/

specs (quote from the site)
-You can drag everything around by clicking on the block title.
- You can add RSS, Flickr and more by clicking on “Add / Remove Content” at the top
- You can reset the layout by clicking on the Logo at the top.
- You can throw everything in the trash if you like to. Just open “Add / Remove” and move the block onto it.
- You can add as many items as you like.
- The “Layout Bookmark” is for cross-domain actions and has no real use in the demo yet.

Dublin Drupaller’s picture

thanks for the link..it is interesting to see how others are doing it..but that demo site crashed my browser (I was looking at it in IE)

the demo site (while I could look at it) was good but I think Isaacs link is far better and more intuitive.

Dub

Currently in Switzerland working as an Application Developer with UBS Investment Bank...using Drupal 7 and lots of swiss chocolate

ica’s picture

I agree that Isaacs demo is looks and functions better though it is a starting point but BloxPress used slightly approach and more combined them engine solution with using same tools,

I presume the theme engine built around js'libs/httpd/dom/css combination
this work in progress too which worth to look at it -i thought

BloxPress demo works fine with Safari, FireFox, Shiira and Flock on MacX on this side of the (browser) ocean,

IE sucks anyway :)
http://www.spreadinternetexplorer.com
(build on Drupal)

Dublin Drupaller’s picture

Yeah..the blogexopress link is obviously experimental and they probably got it right to make IE crash..I use opera and firefox as well...

There are a few modules on the way though..

Ajax shoutbox module for drupal:
http://drupal.smiletag.com/

and the dojo module for drupal
http://daryl.learnhouston.com/?p=258

dojo is one of the more impressive ajax collections. Although, I get the impression that ajax is just essentially a rebranding of javascript. either way, there appears to be a lot coming through.

Dub

Currently in Switzerland working as an Application Developer with UBS Investment Bank...using Drupal 7 and lots of swiss chocolate

ica’s picture

Thanks for the links.. i liked smiletag-
check out
http://www9.meebo.com

Yes, as the definition goes, Ajax is not a technology in itself, but a term that refers to the use of Document Object Model, JavaScript, XMLHttpRequest and CSS to theme working hand in hand

what is more that Micro$oft is also looking into it (apperendly they ignored back in the end of years of the last century while there was some development of their coders)

now they are working on webapp version of -web based- Ajax MSoffice suits -(paid on usage not sold as desktop app)
...and someone else started before the MS
http://goffice.com
http://online.thinkfree.com

a suit to follow/catchup and to be step ahead with

http://numsum.com
http://voo2do.com
http://www.basecamphq.com
http://www.writely.com
http://www9.meebo.com
http://rollyo.com
http://www.odeo.com
http://www.kiko.com
canvas drawing tools
http://caimansys.com/painter/index.html
http://developer.mozilla.org/en/docs/Canvas_tutorial
http://www.rexv.org/

and of course no need to mention Google suits, gmail,gmap, G-earth and Yahoo -Beta implementations and IBM Lotus working on it for Domino etc.

and many others and to come -mostly based on Ruby- signalling a direction
Ajax webapps looks like the future

-Of course there are some downsides of JS but if predictions on Ajax heading that way OS's and Browsers might taclle security and compatiblity to make it avaliable on all systems/browsers

but how about the benefits?
here is a study 'Measuring the Benefits of Ajax'
http://www.developer.com/xml/article.php/3554271

-some call it Web 2.0 (that is a bit extended definition not just as tecnology but usage type as 'social software' factor that includes Drupal as well, at least how i put it :)
on the tech side with more Ajax developments into Drupal is inavitable i presume to expand this great 'social software'

toma’s picture

I really like the website idea at

http://isaachorton.liquidratio.com/

I want to make this for my website, i download the code for jah, but i don't know how to make it for my theme, anyone can give a simple tutorial to do that!!

i saw the example in dynamicdrive check out here

http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

Its simple to make for drupal as it call only css div

The http://isaachorton.liquidratio.com/ example is very nice and can save a lot of time for me and for everyone here :) if you would take some time of yours to post a tutorial or how to for us

Finaly i get it to work with node content

Read on

http://drupal.org/node/51418

Thank you

Free drupal demo 4.7 beta 4
http://www.drupaldemo.org

zirafa’s picture

Hey guys,

Great post. Thought I'd pitch in my two cents. I was playing around with all these ideas and thought this might be useful to some folks. This is a little trick to load a node body dynamically into an html page (or the front page module if you wanted). Just drop these three files into your root directory, or call load.php and jah.js from your front page module. What I kind of like about this is that you can theme main.html without ever seeing any PHP code. Useful for those PHP-phobes!! ;)

DISCLAIMER: THE FOLLOWING IS NOT SUPPORTED CODE AND IS A POTENTIAL SECURITY RISK. IT WAS WRITTEN AS AN EXPERIMENT, PLEASE DO NOT USE IT IN A LIVE SITE IMPLEMENTATION. READ THE DRUPAL AJAX HANDBOOK PAGE FOR INFO ON PROPER USAGE AND IMPLEMENTATION.

  • main.html (the page that the viewer sees)
  • load.php (loads the node body)
  • jah.js (the javascript for the pageless refresh)

MAIN.HTML

<html>
<head>
<script language="javascript1.3" src="jah.js"></script> 
</head>
<body>
<a href="/javascript:jah('load.php?q=node/10','main');">the body of node 10</a><a href="/javascript:jah('load.php?q=node/11','main');">the body of node 11</a>

<div id="main">
Welcome to my awesome website.
</div>

</body>
</html>

LOAD.PHP

<?php

include_once 'includes/bootstrap.inc';
include_once  'includes/common.inc';
if(arg(0) == 'node' && is_numeric(arg(1))) $content = node_load(array('nid'=>arg(1)));
global $user;
if(node_access('update',$content, $user->uid)) $link = l(t('edit'),'node/'.$content->nid.'/edit') .' | '. l(t('create page'),'node/add');
   /** 
    * $content->nid: The ID of the node.
    * $content->type: The content type (story, blog, forum...).
    * $content->title: The title of the node.
    * $content->created: The creation date, as a UNIX timestamp.
    * $content->teaser: A shortened version of the node body.
    * $content->body: The entire node contents.
    * $content->changed: The last modification date, as a UNIX timestamp.
    * $content->uid: The ID of the author.
    * $content->username: The username of the author. 
    *
    **/
echo <<<END

<div class="content-title">{$content->title}</div>
<div class="content-body"> {$content->body} </div>
<div class="edit-link">{$link}</div>


END;
?>

JAH.JS

function jah(url,target) {
    // native XMLHttpRequest object
    document.getElementById(target).innerHTML = 'sending...';
    if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
        req.onreadystatechange = function() {jahDone(target);};
        req.open("GET", url, true);
        req.send(null);
    // IE/Windows ActiveX version
    } else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
        if (req) {
            req.onreadystatechange = function() {jahDone(target);};
            req.open("GET", url, true);
            req.send();
        }
    }
}    

function jahDone(target) {
    // only if req is "loaded"
    if (req.readyState == 4) {
        // only if "OK"
        if (req.status == 200) {
            results = req.responseText;
            document.getElementById(target).innerHTML = results;
        } else {
            document.getElementById(target).innerHTML="jah error:\n" +
                req.statusText;
        }
    }
}
potential’s picture

I just started playing with 4.7 and I am very impressed by the AJAX implementation shown above.

What do you guys think about putting AJAX in the teasers. The teaser could include a "quick read" widget. So when you click "quick read", it loads the node body right within the teaser without reloading the page.

Can someone explain how to accomplish this?

Thanks!

zirafa’s picture

the above code has lots of problems so use it as an educational tool, not in a real implementation. Please read up on the Drupal AJAX handbook page: http://drupal.org/node/42403

iajay’s picture

Hello
I tried the code given by zirafa. but i got stuck in the LOAD.PHP
i m getting errors in the file. like undefined function arg(
even i tried my own code

include_once 'includes/bootstrap.inc';
include_once  'includes/common.inc';
global $user;
print_r($user);
echo "this is ".$user->uid;

but this is alsio not working. what do it need to do to get the desired o/p
i m calling the url from the
"<a href="/javascript:jah('load.php','main');">the body of node 10</a>

what am i doing wrong.
is there any other way to just output a simple table from the db (without the theme and header etc)
just the plain table (gettting the data from DB using drupal connection and variable)
i can write a module for this if required,
Hoping for a quick reply
Thanks
Ajay

Do visit me at http://www.iajay.com

nedjo’s picture

I've done a very rough first draft of a module for loading content without page refreshing, see

http://cvs.drupal.org/viewcvs/drupal/contributions/modules/jstools/dynam...

It needs a lot of work, but the proof of concept is there.

If anyone wants to help finish it, I'd be happy for help!

jasonwhat’s picture

Great that you are working on a module for this. How do I use it? I put the the files in my module directory and enabled it but I see no settings for it anywhere and noticed no difference in my pages and how they loaded.

nedjo’s picture

Thanks for trying it. I'd appreciate feedback. Pls post as issues on the Javascript Tools project.

When you click a menu item, you should get:

* content area empties and is replaced by a progress bar with label "Loading page"
* the item dynamically loads into the content area.
* on error, either an error message and the previous content is restored or page forwards to clicked link

I'm working on ways to apply the behaviour to specific blocks: enable the behaviour for a block and specify the target (another block or the main content area) it should load into. This should be done within a few days.

jasonwhat’s picture

I've tried on my site and nothing seems to have changed. I don't get any errors, but when I click a menu item it behaves like it normally would. Does something need to be inserted in my theme or something?

My +1 is for using it to load comments dynamically and edit in a more dynamic fashion in addtion to integration with blocks and menus.

nedjo’s picture

I made significant changes today, introducing settings on the block configuration pages to apply the behaviour and select target areas.

nedjo’s picture

Do you have clean urls enabled? It looks like my code doesn't yet work with clean urls. (I don't have a clean urls test site.) I'll work on that. Meantime you could try turning off clean urls.

Let's move further discussion to the Javascript Tools module. If it's still not working, could you open an issue there?

Thanks!

travist’s picture

For anyone interested in this topic, I just created a tutorial on how to create your own custom Ajax goodness in Drupal 5.0. The tutorial is called Drupal and Ajax : A complete Tutorial.

I hope this helps someone!

Thanks,

Travis.

lhjava’s picture

Make your own Ajax loading indicators with http://www.webscriptlab.com/

panji’s picture

How can I implement this on Drupal 6?
Is there any themes or module that already implement this nice features,...

please don't stop this issue..

JayKayAu’s picture

Hi, (and welcome to July 2009)

I'm trying to figure out how to do this as well..

I basically want to display a grid of teaser graphics (2 across, 5 down), and when you click on one, you get it's details (large pic + description) in an adjacent column.

I'm dead certain lots of people have done this, but I don't know what this type of thing is called, or how to do it.

I'm guessing it needs to be done with jQuery/AJAX ?

Please advise! :)

websitedesignhampshire’s picture

function Load(div, link) { $(div).load(link); }

About the Project

website design hampshire