Solved

Saving JQuery Sortable Results

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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How to resize a div in html 3 37
forgetful about js objects 8 46
Do alert on select 6 13
Javascript: Setting a dropdown based on another dropdown selection 5 18
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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 code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

856 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