Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Saving JQuery Sortable Results

Posted on 2012-04-11
2
Medium Priority
?
529 Views
Last Modified: 2012-04-12
Using JQuery Sortable to drag and drop images on a page in the order I want them to appear.

After the user is done sorting, I want a save button that will save the results to a database.  Each li element would have an id, and it would be that id I would want to save as well as the position of that element (ie:  Position 1, 2, 3, etc..)

Any help would be appreciated.

Thanks
0
Comment
Question by:cartch2008
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 20

Accepted Solution

by:
BuggyCoder earned 2000 total points
ID: 37835101
assuming your button id is btnTest, here is the jquery to get the value of all the li elements under say a ul with id ulTest

var liData;
$('#btnTest').click(function(){
$('$ulTest li').each(function(index){
liData = liData + '{index:' + index + ';Id:' + $(this).attr('id') + ';}'
});
$.post("yoururl", { data: liData },
  function(data){
    alert("Hello");
  }, "json");

});

Open in new window


Data would be in the following format:-

{index:0;Id:1;}{index:1;Id:2;} and so on
0
 

Author Closing Comment

by:cartch2008
ID: 37840513
This would work, so I'll give the points, but, I found a much easier way to do it.  Create a form, store the id's in hidden fields.  The values are submitted in the order that they are sorted in.  I didn't think they would be, that is why I was looking for a jquery solution.  But, they are!
0

Featured Post

New benefit for Premium Members - Upgrade now!

Ready to get started with anonymous questions today? It's easy! Learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Find out what you should include to make the best professional email signature for your organization.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

670 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question