Solved

Saving JQuery Sortable Results

Posted on 2012-04-11
2
528 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 500 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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

628 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