How do i get a string value of the new sorted list?

Sep 30, 2009 at 3:41 AM

Firstly... Great script, thanks for sharing :-)

My Question:
How do i get a string value of the new sorted list?

My Objective:
I want to be able to sort a gallery of thumbnail images, then submit a form and update my database with the new order of the sorted list.

Example:
if i start with a simple ordered list like (1,2,3,4,5,6)
... then i sort them into a new order like (5,2,4,1,3,6)
... How do i get a string of the new order? - Ideally the string would be the 'id' of each <li> or <div> tag.

Cheers :)

Coordinator
Sep 30, 2009 at 8:44 AM

My pleasure. In the download there is a file called example.aspx that provides an example of what you are talking about. Although this makes an ajax request to the server immediately without waiting for the form to be submitted. If you didn't want to save the order until the user clicks the submit button then save the serialStr to a hidden input field and on postback read it's value. The example file is in ASP.NET but here is a page that provides an example of making ajax requests in PHP:
http://www.talkphp.com/vbarticles.php?do=article&articleid=58&title=simple-ajax-with-jquery

Oct 5, 2009 at 11:28 PM

AWESOME!

Thanks for your help... a clear & precise solution to my question :D

For anyone who finds this thread and wants to acheive a similar thing... i use javascript to populate a hidden form field and then submit form to update database.

Also note - i have moved the id="gallery" into a containing <div> (the original script used <ul id="gallery">) - i found the div works better in FireFox browser when images wrap onto new line! 

 ----------------------------------------------------------
<div id="gallery">
<ul >
   <li id="1"><div ><img border="1" src="i/thumbs/pic01.jpg" width="120" height="90"></div></li>
   <li id="2"><div ><img border="1" src="i/thumbs/pic02.jpg" width="120" height="90"></div></li>
   <li id="3"><div ><img border="1" src="i/thumbs/pic03.jpg" width="120" height="90"></div></li>
   <li id="4"><div ><img border="1" src="i/thumbs/pic04.jpg" width="120" height="90"></div></li>
</ul>
</div>

<form name="sortForm" action="sortPics_submit.php" method="post">
    <input type="hidden" id="sortOrder" name="sortOrder">
        <button type="submit" class="submit3" name="submit"><span>Save & Continue...</span></button>
</form>

<script type="text/javascript">
// this tells the sort script to do its thing
$("#gallery").dragsort({ dragSelector: "li div", dragEnd: saveOrder });

// this is the function that puts the new sort order into a string
function saveOrder() {
    var serialStr = "";
    $("#gallery li").each(function(i, elm) { serialStr += (i > 0 ? "," : "") + $(elm).attr("id"); });

// this dynamically updates string to hidden form field
    document.getElementById('sortOrder').value = serialStr;
};
</script>
----------------------------------------------------------

Cheers,
Brendon

Dec 26, 2009 at 11:53 PM

Love the script, but I cannot seem to get it to work with tables. In the example below, it will drag, but not sort. If I change the TABLE tag to UL, TR tags to LI and TD tags to DIV, it works.

 

Do you have any suggestions on this?

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript" src="dragsort-0.3.8.js"></script>
  <style type="text/css">
    body { font-family: Arial; font-size:12pt; padding:20px; width: 800px; margin:auto; border:solid 1px black; padding-top: 20px; margin-top:20px; }
    .placeHolder td { background-color: white !important; border: dashed 1px gray !important; }
    #table1 { width: 100%; }
    tr { background-color: #ccc; }
  </style>
</head>
<body>

  <table id="table1">
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    <tr><td>4</td></tr>
    <tr><td>5</td></tr>
    <tr><td>6</td></tr>
    <tr><td>7</td></tr>
    <tr><td>8</td></tr>
    <tr><td>9</td></tr>
    <tr><td>10</td></tr>
  </table>

  <!-- save sort order here which can be retrieved on server on postback -->
  <input name="list1SortOrder" type="hidden" />

  <script type="text/javascript">
    $("#table1").dragsort({ itemSelector: "tr", dragSelector: "tr > td", placeHolderClass: "placeHolder", placeHolderTemplate: "<td></td>", dragEnd: saveOrder });

    function saveOrder() {
      var serialStr = "";
      $("#table1 tr").each(function(i, elm) { serialStr += (i > 0 ? "|" : "") + $(elm).children().html(); });
      $("input[name=list1SortOrder]").val(serialStr);
      alert(serialStr);
    };
  </script>

  <div style="clear:both;"></div>
</body>
</html>

 

Dec 27, 2009 at 12:35 AM
Edited Dec 27, 2009 at 12:47 AM

Your code works for me! - (in both firefox and IE6) ... althou i am using an older "DragSort v0.3" .js file

Can you explain further what you mean by "it will drag but not sort"...

I copy & pasted your exact code into a fresh html document... the page dragged & sorted fine... the 'javascript alert' matched the new sorted order displayed in browser!

A possible problem with your code... try a simpler call to the "dragsort" function (eg. the first line of javascript) Try...

$("#table1").dragsort({ dragSelector: "tr td", dragEnd: saveOrder });

Ignore my suggestion above for simpler call to "dragsort" - it doesn't work with your code! ...

Also note most browsers don't refresh javascript cache when clicking the browser "refresh" button... you must either open new browser window or use "ctrl+shift+click browser refresh"

 I may be totally on the wrong track... as i said, your code already works for me, so i can't test your problem!

 Brendon.

Coordinator
Jan 2, 2010 at 6:13 AM
Edited Jan 2, 2010 at 6:24 AM

Thanks for testing this Brendon, this is actually something that will have only stopped working with the 0.3.8 release. Basically 0.3.8 contains a fix to make sortable lists inside sortable lists work. As part of that fix itemSelector must now match elements that are a direct descendant of the container element in this case "#table1" (not the case with dragSelector). The reason it does not work in this example is because browsers actually render tables like this:

<table id="table1">
 <tbody>
   <tr><td>1</td></tr>
   ...
 </tbody>
</table>

So as you can see tr is not a direct descendant of table but rather tbody is. Since this is not obvious I've made a change to the pending 0.3.10 release to automatically reassign the container as tbody in this scenario:
http://dragsort.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=37479

 

Mar 19, 2010 at 2:34 PM
Edited Mar 19, 2010 at 2:37 PM

Hello all,  in example.php line 55  (version 0.3.10) we have

$.post("example.php", { "ids[]": data });

that will generate _POST data like

Array ( 
[0] => Array ( [0] => 0 ) 
[1] => Array ( [0] => 1 )
[2] => Array ( [0] => 2 )
[3] => Array ( [0] => 3 )
[4] => Array ( [0] => 4 )
[5] => Array ( [0] => 5 )
[6] => Array ( [0] => 6 )
[7] => Array ( [0] => 7 )
[8] => Array ( [0] => 8 )
)

if we change it to:

$.post("example.php", { "ids": data });

_POST wil look like:

 Array ( 
[0] => 0 
[1] => 1
[2] => 2
[3] => 3
[4] => 4
[5] => 5
[6] => 6
[7] => 7
[8] => 8
)
just for info...
Coordinator
Mar 20, 2010 at 12:26 PM
Edited Mar 20, 2010 at 12:39 PM

Thanks for mentioning that AnyMaster. The example file is using jQuery 1.3.2 and you are required to pass arrays using { "ids[]": data } otherwise _POST will only contain the number 8 instead of the array. It looks like with jQuery 1.4.0 the behaviour has changed to what you are observing now if you used the same code, so would be something to watch out for when upgrading jQuery. However, with jQuery 1.4.2 they've now sorted this so that both { "ids[]": data} and { "ids": data } will now give the same results for passing arrays. Here's an article with information regarding the change they made in the 1.4 release:

http://benalman.com/news/2009/12/jquery-14-param-demystified/
http://dev.jquery.com/ticket/6041

Mar 20, 2010 at 4:19 PM
Edited Mar 20, 2010 at 5:51 PM
mcm_ham wrote:

Thanks for mentioning that AnyMaster. The example file is using jQuery 1.3.2 and you are required to pass arrays using { "ids[]": data } otherwise _POST will only contain the number 8 instead of the array. I
.....

Line 16 of example.php:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
;) 

Anyway, thank you for explanation and for sharing your knowledge.

P:S. Is here a way to send request to server only when some items really reordered, not by click only on item ?

Coordinator
Mar 22, 2010 at 10:49 AM

Oops, in that case thanks for letting me know (I did debate what version of jQuery to use but thought what I had in the repository is what I used for the last release).

| Is there a way to send request to server only when some items really reordered, not by click only on item?

That's a fair enough request. I'll look at making that change when I get back from the tramp I'm busy packing for now and will let you know.

May 12, 2010 at 1:40 PM

Man please could you explain how it work to save the new sort to data base at asp.net with SQL

the example of the aspx page dosn't  save the new sort  or i can't execute the function am a beginner  and may be confused .

plz explain the code and if you could give me an example

 

my own case that i have a table (image_id , image_name) and a folder that i am saving the image in it

the sorting going well but what i want to do to save the new position of the sort

thank you very much

Coordinator
May 14, 2010 at 2:25 PM

Here's a sample site that saves the ordinal to the database.
SampleSite.zip

Here's a useful post that explains Linq to Sql used in the sample site and it's use of lambda expressions.
DotNet 3.5 Changes

The sample site is in .NET 4 although you can target .NET 3.5 instead. However, if you need it to run on an earlier version of .NET or some other database instead of MS SQL I can change the sample site to suit. Does this help?

May 17, 2010 at 11:17 AM

Thanks a lot for replaying me but....

 

i am not familiar with linque  tech so if you please could do the example with the usual ado tech (sqlconnection, sqlcommand and so on...) and with repeater

i will be very thankful

and am sorry for that  but am still beginner

thank you very much

 

Coordinator
May 17, 2010 at 1:53 PM

Ok here is a .NET 2 version without the Linq stuff:
SampleSite2.zip

This does use C# Generics to separate the database logic from the data objects but can remove it's use if you like.

May 20, 2010 at 12:31 PM
Thank you very much man its work good if you are going to Egypt any time just tell me =) you will be my guest thanks a lot
Coordinator
Jun 6, 2010 at 11:56 PM
This discussion has been copied to a work item. Click here to go to the work item and continue the discussion.