This project is read-only.

retreive sorted list

May 10, 2011 at 7:18 PM

I'm trying to retreive a sorted list of the image id's... to pass in a form variable to another form.  This is based off some other code I found here, but I can't seem to get it to work.

The problem is that the sortOrder() function does not seem to be called - I have an alert call in there that never gets fired and the sortOrder field never gets updated... any thoughts on what I'm missing?

here is my code:

<!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.5.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.dragsort-0.4.2.min.js"></script>

<style type="text/css">
  ul { margin:0px; padding:0px; margin-left:20px; }
  .list1, .list2 { width:250px; list-style-type:none; margin:0px; }
  .list1 li { float:left; padding:5px;  }
  .list1 div { border:solid 1px black; background-color:#E0E0E0; text-align:center; margin-top:30px; padding-top:0px; }
  .placeHolder div { background-color:white !important; border:dashed 1px gray !important; }
</style>

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

// 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;
 alert(serialStr);
 
};
</script>

</head>
<body> 

<div id="gallery">
<ul class="list1">
   <li id="1"><div ><img alt="1" src="1.png" /></div></li>
   <li id="2"><div ><img alt="2" src="2.png" /></div></li>
   <li id="3"><div ><img alt="3" src="3.png" /></div></li>
   <li id="4"><div ><img alt="4" src="4.png" /></div></li>
</ul>
</div>


<script type="text/javascript">
 $("ul:first").dragsort();
</script>
<br/>
<div>
<form name="sortForm" action="save-sort.asp" method="post">
    <input type="hidden" id="sortOrder" name="sortOrder"  />
        <button type="submit" class="submit3" name="submit"><span>Save &amp; Continue...</span></button>
</form>
</div>

 

</body>
</html>

May 16, 2011 at 10:23 AM
Edited May 16, 2011 at 1:15 PM

Hi JFC, the only thing you're missing is just knowing that javascript can only access elements that appear before it in the page not after, so if you try "alert($("#gallery").size());" before the gallery div you will get 0 and if you try it after you will get 1. So the code that is actually enabling the dragsort to work is "$('ul:first').dragsort();" where no dragEnd function is specified to be called. Also no doubt you added "();" after the name of the dragEnd function to call as something to try in getting this to work but that is only needed when you want to invoke a function, in this case you just want to pass a reference to the function for the dragsort script to invoke at the appropriate time. And last of all something I haven't made clear in my documentation, in order for me to support nested sortable lists easily, I've made it a requirement that the elements that get moved need to be direct children of the list container element, which is not the case here because the LI tags are not direct children of the gallery div, so if you change the selector to "#gallery ul" that will fix that. So try:

<!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.5.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.dragsort-0.4.2.min.js"></script>
<style type="text/css">
  ul { margin:0px; padding:0px; margin-left:20px; }
  .list1, .list2 { width:250px; list-style-type:none; margin:0px; }
  .list1 li { float:left; padding:5px;  }
  .list1 div { border:solid 1px black; background-color:#E0E0E0; text-align:center; margin-top:30px; padding-top:0px; }
  .placeHolder div { background-color:white !important; border:dashed 1px gray !important; }
</style>
</head>
<body>

<div id="gallery">
<ul class="list1">
   <li id="1"><div ><img alt="1" src="1.png" /></div></li>
   <li id="2"><div ><img alt="2" src="2.png" /></div></li>
   <li id="3"><div ><img alt="3" src="3.png" /></div></li>
   <li id="4"><div ><img alt="4" src="4.png" /></div></li>
</ul>
</div>

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

    // 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;
        alert(serialStr);
    };
</script>
<br/>
<div>
<form name="sortForm" action="save-sort.asp" method="post">
    <input type="hidden" id="sortOrder" name="sortOrder"  />
        <button type="submit" class="submit3" name="submit"><span>Save &amp; Continue...</span></button>
</form>
</div>
</body>
</html>