Help an AJAX newbie!

November 6, 2006 9:22 PM

AJAX help for a newbie. How do I rearrange the order of a set of images?

I have a site that allows users to create slideshows of images. This slideshow is ordered. How can I create an AJAX interface for rearranging the order of images in this slideshow?

The images are currently displayed in a table, from the first element to the last. I would like for a user to drag and drop an image from its current cell into its desired cell, which would then update its position in the slideshow and shift the placement of all following images up 1.

I am very familiar with programming, but know little about using Javascript in this way. Is there any mefites who can help me, or point me to a tutorial, for doing some AJAX programming like this?

posted by LoopyG to Computers & Internet (10 answers total)

This really isn't an AJAX function. AJAX involves making calls back to a controller function which will then act upon a data store to return information back to specific DOM elements.

A drag and drop function within a table is more adequately described as DHTML as it does not require calling functions and simply manipulating the elements in the browser. Check out rico or script.aculo.us as both javascript libraries contain drag and drop functions that are relatively easy to implement.
posted by purephase at 9:34 PM on November 6, 2006

There are a number of javascript libraries, for example Dojo, which make it relatively easy to implement drag and drop functionality.
posted by Hildago at 9:44 PM on November 6, 2006

I've actually been using scriptaculous on a project at work for what you're describing.

Really all you need (if you're using the scriptaculous library) is to create a unordered list (ul) with an id, give it some li's (the images, in your case) and call Sortable.create("id_of_the_ul");

I'm unsure from your post if you're looking to save the new order to file/database, but it's possible. I found that saving the new order with scriptaculous wasnt as intuitive as I would have hoped, so you may want to research other libraries first to see if they may suit your needs better.
posted by gradient at 10:05 PM on November 6, 2006

This is an example of such a function in practice, using scriptaculous. If you wanted to save the state of the changes, there's no *easy* way to do it. But it wouldn't be that hard to implement.
posted by |n$eCur3 at 1:18 AM on November 7, 2006

If you want to send user changes back to a datastore script.aculo.us can still provide you that functionality through the root Prototype javascript framework that it's built upon. Prototype has Ajax functions (check through this documentation for more information specifically about Prototype) that script.aculo.us even demostrates here. The example code is Ruby on Rails, but the main javascript calling function for the Ajax.updater (see below) is essentially Prototype.

< %=sortable_element 'list', br> :update => 'list-info',
:complete => visual_effect(:highlight, 'list'),
:url => { :action => "order" } %>

posted by purephase at 5:26 AM on November 7, 2006

You may want to check out Zen Photo. They implement this functionality in their admin interface.
posted by jpep at 5:45 AM on November 7, 2006

Another new animation framework is moo.fx

I like Scriptaculous as well, haven't tried Dojo
posted by jesirose at 6:04 AM on November 7, 2006

Response by poster: I am indeed trying to save the order. These slideshows are to be viewed by anyone, so the changes need to stay after the "drop" part. I will check out these frameworks, but as a newbie, I am unfamiliar with any of them, or how to incorporate them into my page. Remember, I make my pages in Notepad++, not any kind of real dev environment, but I'll check out their docs. Thanks for the advice.
posted by LoopyG at 7:54 AM on November 7, 2006

Notepad++ is great. I use it for all my web development as well. I think you'll find that most web developers use souped-up text editors.

It's really not as difficult as it used to be. Prototype simplifies javascript (which is why a lot of the fancy frameworks use it) to the point that it is really simple to do what you're looking for. Take a look through the Prototype manual and try using some of the demo's provided in the links that everyone provided. Once you've done a few examples it will all start to come together.
posted by purephase at 8:06 AM on November 7, 2006

Best answer: Drag and Drop Reordering of Database fields with Ajax
posted by kirkaracha at 2:22 PM on November 27, 2006