Dynamically load extened (more) text or content with AJAX

By tseven on 30 Apr 2007 at 00:04 UTC

I have reviewed many, many modules pertaining to AJAX but haven't found -exactly- what I'm looking for.

What I would like to accomplish:

I will be using this primarily for writing tutorials.
Lets say I am explaining something complex like "the internet". I would start by giving a small description.. then give the user the option to view the longer extended description without reloading the page, opening any sort of pop-up or new page.

For example:

The internet is a series of tubes. [read more]

When the user clicks [read more] a once empty div below the short description would appear with the newly loaded extended description. I could easily achieve this with a little js and css, but what I'm trying to accomplish is the AJAX benefit of loading the new content only when needed.

The fall back (degrade) option could be linking to the extended content, or reloading the current page with all the extended information visible.

I would like to be able to use this method freely in any node/content type. But if that's not possible, I can live with it. I just want to write multiple tutorials in one shot, one short and concise, and one long and detailed.

Is there a module which does what I want? Perhaps with a little tweaking? If not, how would I go about programming this and which AJAX class/library would you recommend?

Thanks in advance to all who reply :)

Comments

Hey tseven, I don't know of

rszrama commented 30 April 2007 at 03:07

Hey tseven,

I don't know of any ready-made modules doing this sort of thing right now. What you'll want is to setup your page so there's the empty div with an id of your choosing and an onclick on the "show more" link that uses jQuery's $.post() method. You can read about it at http://www.visualjquery.com.

In order to have jQuery automatically linked, I suggest you add the JS to the links using drupal_add_js().

Then I'd say you will need a custom module that loads up an article based on an ID in the URL or something and instead of returning $output like you would normally for a menu callback, you'll want to just print it at use exit(). This way the output won't get themed... it'll just get sent back as the return value for $.post(). You can then empty the full text div and append the contents of the response...

Anyways, this actually gives me an idea for a pretty simple module that I may try coding tomorrow or Tuesday evening to do just what you're asking based on a node ID. If you don't solve it before then and I get around to coding that module, I'll post a note in here...

----------------------
Current Drupal project: http://www.ubercart.org

Activecontent in jstools

dman commented 30 April 2007 at 03:33

Activecontent in jstools can be configured to apply that behaviour, with a bit of tweaking.
I got it to do so anyway, although can't recall how much customizing it took.

I keep meaning to do a diff and provide some feedback, but the project it was for is currently stalled so the solution is not quite complete.

... oh yeah, we were working on transitions, so I upgraded the jquery version ... and that sort of left me with an incompatable code branch. I'll see if I can trim down my changes to a useful patch tho...

.dan.
How to troubleshoot Drupal | http://www.coders.co.nz/

_{.dan. is the New Zealand Drupal Developer working on Government Web Standards}