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
Prototype/Scriptaculous Module
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 =--
example application..
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
Is there any module yet released
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
module may not be needed..
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:
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 DIVI 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
Using pure css?
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.
An ajax based front page....great idea!
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:
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
Thanks Dub
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
quick one..
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
Sample codes
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?
will do..
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
awaiting your example
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
Ajax Blog Demo
Hi Dub,
Waiting for the blog example. Sorry to remind you.
Sunny
www.gleez.com
no worries..
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
Thank You
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
Great stuff, but
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?
explain how to put the js into the head of a page?
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!)
HTTPGet
drupal_add_js('misc/drupal.js');
<?php print check_markup( << It's in fact even easier if you use the synchronous version of HTTPGet():
Live demo:
Read Changelog.txt
--
If you have a problem, please search before posting a question.
EOD
, 3, false);
The drawback to synchronous requests
While simplier to use synchronous requests they have the potential to lock up the browser if the request never completes.
Is it possible to apply HTTPGet(NODES) link and HTTPGet(NAV)
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?
thanks guys
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!!!
this script works great...
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
-update- using the jah.js script "ahah" method
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.
Can U post the code here?
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
wow..
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
Thank You Dub
I jave just downloaded the rar. But I am waiting for the blog example.
Sunny
www.gleez.com
Need for URL's
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.
Doesn't degrade
This doesn't seem to degrade for users with JS turned off for any reason. Any plans to change that?
can a Javascript degrade while js option turned off?
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
You don't have the same excuse
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.
looking good
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
BloxPress an Ajax based modular WordPress Theme Engine -demo
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.
thanks..that crashed my browser!
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
I agree... and/but it works on all non IE browsers on mac
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)
agree completely re: IE..
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
Thanks for the links.. --- Ajax webapps, the future
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'
I really like the website... get it to work with node content
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
Load node body content without a page refresh (EXPERIMENTAL)
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
LOAD.PHP
JAH.JS
Impressive stuff
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!
the above code has lots of
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
Hello I tried the code given
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
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
Module roughed in
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!
How does it work?
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.
Currently applies to block menus
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.
Nothing doing
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.
Have a look at the instructions in README.txt
I made significant changes today, introducing settings on the block configuration pages to apply the behaviour and select target areas.
Clean urls?
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!
Here is how I did it....
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.
Ajax loading gif generator.
Make your own Ajax loading indicators with http://www.webscriptlab.com/
What about Drupal 6
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..
Me too!
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! :)
website design hampshire
About the Project
website design hampshire