Geekzone: technology news, blogs, forums
Guest
Welcome Guest.
You haven't logged in yet. If you don't have an account you can register now.



717 posts

Ultimate Geek
+1 received by user: 21


Topic # 110131 3-Oct-2012 16:47 Send private message

I've made some websites for clients where they can add their own products (using PHP and MySQL).  Some of my clients wanted to be able to rearrange the order that the products were shown on a page rather than just list them sorted on title, so I came up with an easy solution that simply listed the products and put little up and down arrows next to each item and the user could click on the arrows to move the items around.  Behind the scenes I have each product set up with an ItemOrder field which I manipulated when the arrows were clicked on.

This works fine when there aren't many products but gets tricky to use when there are more than 20 or so products and  they're moving the item more than a few places because clicking the arrows would cause the page to refresh and the user would have to scroll down to the item and click the arrow again (bit hard to describe but I'm sure you get the picture).

I'd really like to replace this system with a better way of reordering items.  In the past I've found Javascript examples that show how to let the user drag and drop items but the examples would stop there and not show how to signal updates to the database, etc.

Can anyone point me to something, maybe using jQuery, that does what I'm looking for?  Or offer any other insights into how to achieve this in a way that is simple for the user to use?  I'm sure e-commerce packages must offer something like this but I'm not too familiar with any.

Create new topic
Phil Gale
1094 posts

Uber Geek
+1 received by user: 37

Trusted
Red Jungle
Subscriber

  Reply # 695682 3-Oct-2012 16:51 Send private message

The jQuery UI Sortable widget would be a good place to start. You should be able to get the starting position and dropped position to then post back to the server with an ajax call to update the database.




Red Jungle: we make fantastic software

RSS  Twitter  Facebook  Skype



717 posts

Ultimate Geek
+1 received by user: 21


  Reply # 695687 3-Oct-2012 16:55 Send private message

RedJungle: The jQuery UI Sortable widget would be a good place to start. You should be able to get the starting position and dropped position to then post back to the server with an ajax call to update the database.

Excellent!  Thanks for pointing that out to me.

And it appears to handle hitting the top and bottom of the page and scrolling, which is something I'd need but forgot to mention in my initial post.

Create new topic








Twitter »
Follow us to receive Twitter updates when new discussions are posted in our forums:



Follow us to receive Twitter updates when news items and blogs are posted in our frontpage:



Follow us to receive Twitter updates when new jobs are posted to our jobs board:



Follow us to receive Twitter updates when tech item prices are listed in our price comparison site:




News »

Trending now »
Hot discussions in our forums right now:

Forms of government for New Zealand
Created by charsleysa, last reply by sir1963 on 21-Apr-2014 20:57 (127 replies)
Pages... 7 8 9


Trouble setting up Orcon UFB
Created by brakelateandturn, last reply by brakelateandturn on 21-Apr-2014 23:08 (14 replies)

Whats the best wife friendly media centre?
Created by amorpeth, last reply by jonolynn on 19-Apr-2014 20:20 (14 replies)

Snap suffering Trans-Tasman congestion 18/04?
Created by Lias, last reply by NonprayingMantis on 19-Apr-2014 00:05 (26 replies)
Pages... 2


VDSL - Latency to nearby Router is Insane
Created by SimplyNooby, last reply by SimplyNooby on 21-Apr-2014 23:18 (25 replies)
Pages... 2


galaxy s4 now on 4.4.2
Created by nzrock, last reply by jeffnz on 21-Apr-2014 12:52 (62 replies)
Pages... 3 4 5


TVNZ on Demand Jailbreak Detection
Created by TranceManNZ, last reply by hio77 on 18-Apr-2014 20:25 (12 replies)

Naked Broadband, who's made the switch.
Created by Presso, last reply by Aredwood on 21-Apr-2014 17:08 (33 replies)
Pages... 2 3



Geekzone Live »
Try automatic live updates from Geekzone directly in your browser, without refreshing the page, with Geekzone Live now.

Are you subscribed to our RSS feed? You can download the latest headlines and summaries from our stories directly to your computer or smartphone by using a feed reader.

Alternatively, you can receive a daily email with Geekzone updates.