By jjeff on

I'm thinking it's time that we catch up with Ruby on Rails in the AJAX/DHTML department. Rails has integrated the Prototype and Scriptaculous libraries into their distribution and there's no reason that Drupal couldn't do the same - either as part of core or as a contrib module.

I'm thinking about building a prototype.module which will essentially be a port of the Prototype functions in Rails. Themes and other modules could call these functions and form fields to access the AJAX functions in these libraries.

I've also looked at Dojo, but right now I'm leaning toward Prototype.

I realize that Drupal has been "rolling its own" AJAX up until now, but the pace has been slow and my feeling is that we've already got our hands full with the PHP functions of Drupal. These AJAX libraries will continue to develop and thrive in parallel and we can continue to benefit from those advances.

Some features I'd love to integrate:
- sortable lists
- in-line editing
- auto-validating form fields
- animated error/info messages

Has anyone else done any work in this direction? Does anyone want to help with this effort?

Got any tips, tricks, ideas, or cautions about this? I'd love to get some feedback before I launch into this project.

Thanks!

-Jeff Robbins

p.s. Now all I have to do is learn Ruby ;-)

⋅ Categories: Drupal 4.7.x

Comments

robertdouglass’s picture

robertdouglass commented

... if you sign an agreement that you'll keep working on Drupal ;-)

I'm using ever more AJAX in my applications and would probably get more mileage for my efforts if I could depend on some robust libraries. I'd be very interested in working on this with you.

- Robert Douglass

-----
My sites: HornRoller.com, RobsHouse.net

saerdna’s picture

saerdna commented

dont forget that ruby on rails is a webdevelopment framework while drupal is a full-featured CMS.

jjeff’s picture

jjeff commented

Incidentally, here's the Rails docs on the Prototype functions:
http://api.rubyonrails.com/classes/ActionView/Helpers/JavaScriptHelper.html

And the source file is in the Ruby distribution under vendor/rails/actionpack/lib/action_view/helpers/javascript_helper.rb (haven't been able to find source online).

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

matt westgate’s picture

matt westgate commented

I'd love to see Drupal ship with a sexy ajax library. Could you imagine drag and drop ordering of taxonomy terms and menu items? Ooh la la

robertdouglass’s picture

robertdouglass commented

Don't forget the ERD/UML-like drag-and-drop schema editor for the CCK + Relations modules ;-)

- Robert Douglass

-----
My sites: HornRoller.com, RobsHouse.net

matt westgate’s picture

matt westgate commented

oh yeah, drag 'n drop form building! woah.

jjeff’s picture

jjeff commented

Yeah, I could see the creation page having a floating window full of form elements that you just drop over to your form. Click on the titles of the form elements to rename them (in place). Drag to resize. Drag rearrange. Hit submit (or don't!), and you've got a node-type with those fields.

Very cool!

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

nedjo’s picture

nedjo
he/him/his
Primary language English
commented

This thread:

http://lists.drupal.org/archives/development/2005-11/msg00378.html

I saw a fair bit of support for looking at integrating prototype in core. Nonetheless, I'd recommend going with a contrib module first. I'd be happy to collaborate as you get going on this.

Thox’s picture

Thox commented

The main reason I like prototype compared to other libraries is the size. For that reason, I dislike Scriptaculous. I vaguely prefer moo.fx.

On the other hand, it's possible for us to develop our own library.

jjeff’s picture

jjeff commented

Well I've taken a shot at it. I've got a functional theme_sortable_list() function working, but I'm still far from anything that I would call complete.

Here's what I've got so far. At some point I'll cram it into my sandbox, but for now, it's late and I'm tired.

One thing that I could really use some help with is parsing the Rails implementation (see link above), so that we can echo that in Drupal.

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

jjeff’s picture

jjeff commented

There's an in-progress version of the module in my sandbox. The module currently has a demo page with several examples of dragable, resizable, and sortable elements. Prototype (and the module) make creating these elements really easy!

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

nedjo’s picture

nedjo
he/him/his
Primary language English
commented

Jeff, you've made a great start. Some suggestions and questions at this point.

1. It would be great to find a way to get the script calls out of the html page. Using behavior.js should help, and is easy for simple cases (make this element draggable). For more complex cases, like, make items from this list draggable to those from these two lists, the key question is, "How do we feed the information on what elements to use, if we can't just code it into a script?" Look at how the existing autocomplete elements pass data on the automplete_path through a hidden field (see function theme_textfield). Another possibility is to encode the data into e.g. other attributes of the

2. Practical applications. The main application I can think of for sortable lists in drupal core is cases where weight is used, e.g., sorting taxonomy terms, book pages, and blocks. So, if we're looking for a target to shoot for, any of these would work. In particular, when we introduced block regions, we talked about leaving the door open to being able to interactively assign blocks to regions in admin/block.

3. The hardest think in any of this is graceful degrading. How do we code a page that can be sorted using standard HTML weight selects, but, if js is available, e.g. these selects disappear and a draggable interface appears?

4. Should we be using drupal_add_js() (which adds the drupal.js file as well, which might not be needed)?

5. More generally, I've been working on a couple of javascript additions for an ecommerce project. Autorefresh, http://cvs.drupal.org/viewcvs/drupal/contributions/sandbox/nedjo/modules..., comparable to autocomplete, allows form selects to be filtered based on the selections in other controls, see example at http://www.islandnet.com/~nedjo/guatemala/?q=autorefresh/example/construct. Tabs, http://cvs.drupal.org/viewcvs/drupal/contributions/sandbox/nedjo/modules..., introduces client-side page tabbing, see example at http://www.islandnet.com/~nedjo/guatemala/?q=tabs/example. Rather than introducing each of these as separate modules, I'm wondering if it might make sense to have a general js module, written extensibly so it could include these two, the prototype stuff, and more. What do you think?

Thox’s picture

Thox commented

The tabs CSS should ideally be the same as Drupal tabs (or some minor variation). The JS seems to do a lot more than just tabs though - cookie handling, event handling etc. JS tabs can be implemented in a lot less code.

It's a good concept, but I don't know where it is needed right now and how it would react to the existing tabs too.

nedjo’s picture

nedjo
he/him/his
Primary language English
commented

I'm not sure how applicable dynamic tabs are to the existing tabbed interface, used for local tasks. To implement this, we would need to load page data for all the primary and secondary local tasks. This would be somewhat costly in terms of server-side resources and also bandwidth.

I don't know where it is needed right now

I'm using this for an interactive application where users need to switch frequently between available screens while maintaining state information. I'm thinking in general that client-side tabbing serves a set of design needs that only partially overlaps with our existing local tasks.

dman’s picture

dman commented

... especially the look.
I'd like to see a tab-content div inside the tab-page next to the h2.tab, just for styling. And I get delays with the background images loading on mouseover, maybe need to pre-load them somehow (you won't see that on local dev probably). Otherwise looks nicely CSS.

I see that they are appropriate for complex forms which are in distinct sections.
You want to keep certain state info, but don't need to clutter the screen with a long list of fields ...

This would be good when I want to have some data there, but optional. 'advanced' sections which do get saved with a node, but not in-your-face all the time.

I remeber seeing a similar demo with early Firefox.

Nice addition I think.

http://www.coders.co.nz/

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

jjeff’s picture

jjeff commented

I've just committed a new version to my sandbox. There are now demos of a custom form element type called "sortable" and in-place content editing.

Just to show how easy a lot of these ajax functions become, here is some of the code:

function prototype_inplace_test($op = NULL){
  if ($op == 'callback'){
    if($val = $_POST['value']){ // prototype defaults to sending content using this variable
      variable_set('prototype_inplace_test', $val);
      print $val;
    }
    exit;   
  }
  $output .= "<div id='editable'>";
  $output .= variable_get('prototype_inplace_test', 'You can edit this text!');
  $output .= "</div>";
  prototype_in_place_editor('editable', 'prototype/test/inplace/callback', array('rows' => 5)); // this writes the JS to the page to make the div editable
  
  return $output;
}

function prototype_sortable_test(){
  if ($edit = $_POST['edit']){
    $order = prototype_get_sort($edit['sort']);
    drupal_set_message('Order: '. implode(', ', $order));
  }
  $items = array('first' => 'This one was first', 'second' => 'This one was second', 'third' => 'This one was third');
  $form['sort'] = array('#type' => 'sortable', '#items' => $items, '#title' => t('Sortable'), '#attributes' => array('id' => 'formsort'));
  $form['submit'] = array('#type' => 'submit', '#value' => t('Submit'));
  $output .= drupal_get_form('sort_test', $form);
  return $output;
}

...easy, right?

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

Stefan Nagtegaal’s picture

Stefan Nagtegaal commented

Any more progress made in this module? jjef??
i would love to see this module working, and use the effects offered by scriptaculous/prototype...

Hope to hear from you soon..

jjeff’s picture

jjeff commented

The Prototype module is now called S/P Ajax (for Scriptaculous/Prototype) and has been committed to the CVS repository.

The more exciting part is probably the S/P Magic Menus module that creates (optionally) floating and draggable, animated autoexpanding menu blocks... makes more sense when you see it.

Please check it out and let me know how it works for you.

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

killes@www.drop.org’s picture

killes@www.drop.org commented

Tried it and it works great. Now all I need is some CSS for my primary links to display as dhtml tabs.
--
Drupal services
My Drupal services

--
Drupal services
My Drupal services

Veggieryan’s picture

Veggieryan commented

Okay,
This is RAD!!!!
Thanks so much...
My immediate thoughts...
Can this allow a drag and drop interface for various things...
Example 1... kill del.icio.us by letting users drag and drop any link, video, photo, media.. etc.. and easily tag it without waiting for a popup to load?
Asking my blog owners to signup for delicious, install a firefox extension, and enter their delicious account info to their drupal account just so we can share our bookmarks is NOT GONNA HAPPEN....
This could lead to all sorts of input possiblities with that drag and drop usabilty everyone loves... it could upload from your desktop, import from an outside website, allow a local apperance for externally hosted media(ie: my video on ourmedia.org plays in my blog as if it was hosted at my blog... and all i did was drop the link in the "magic video box" etc....
Im seeing that floating popup with a "keep me ontop" checkbox so it can go "tagging" and you can drag multiple items into it without reloading... just drag and tag.. it all comes back to the mothership...hmm... maybe the checkbox could say.. "lets go tagging"... or "blog this"..
Or you could drag and drop blocks etc... or take it a step further and make a drag and drop on the fly theme editor that has popup color pickers with harmonic colors....drop down font options... drag and drop the logo and bullets and icons... woah... yeah.. thats where this heading... maybe just a bunch of tinymce 2 windows that you can resize and drop into place to make custom regions.. with some kind of region profile manager to organize the styles of the various blocks like the header, menu bar, node, node list, node table, navigation..etc...
ruby on rails is a framework.. drupal is a CMS..CMF..DLA... ajax works on drupal so don't reinvent the wheel...drupal 5 will be the killer killer app before a ruby cms hits 1.0... there is more to do in developing from drupal 4.7 to 5.0 than there was in gettin from 0-4.7..
The real reason i was urged to chime in was that this really made me see how close drupal is to letting me finish my virtual studio site where people can drag and drop their ableton live song files.. their samples will be collected and tagged, remixed and related, licensced and tracked... remixes are shown like a web.. using node relations...
if the musicians could drag thier songs and related samples into a "share me" box... and the box could filter this input to the proper areas.. well.. we are almost there and Im grateful.
Please direct me if I can be of more use than just filling up this comment section...guess its time to learn ajax!

------------------------------
Ryan Grace
Webdev&design
www.realenergy.net
www.thefractal.org

zirafa’s picture

zirafa commented

awesome stuff!

currently the 4.6 Playlist.module I am working includes prototype to do drag and drop sorting of playlist items. This should make things much easier for the 4.7 version. I'll have to sit and play with it ;)

Farsheed

pol’s picture

pol
Location Brussels
commented

Nice Ajax demos ;)

-Pol-

-Pol-
https://not-a-number.io/

Tigerstorm@creativebits.org’s picture

Tigerstorm@creativebits.org commented

I just want to see AJAX functions built in new modules and updates on older versions of existing modules..

It rocks!

Great work Jeff!!

Thox’s picture

Thox commented

There is no point introducing AJAX where it is not needed. If you want to be more specific and post a request somewhere then it might get done.

Tigerstorm’s picture

Tigerstorm commented

I can point out several areas where AJAX could make drupal more efficiant and nicer.. Thox are you feeling some kind of anger regarding AJAX?

I've already posted another post about a thing I wanted to see implemented..

drupalninja99’s picture

drupalninja99 commented

i'm learning ajax right now and I'm thinking prototype is the way to go. Drupal definately needs AJAX support to keep up with the big boys.