saving a sortable list

[teedoff]

Ok, I have some sorting/drag and drop code that works fine as far as that basic functionality goes. I need to be able to serialize and save the sorting order to send back to the set method for the database.

Here is my js:

   <script language="JavaScript" type="text/javascript">
     $(function() {
      $("ul.droptrue").sortable({
         connectWith: 'ul',
         opacity: 0.6,
         update : updatePostOrder
     });
     <script language="JavaScript" type="text/javascript">
     $(function() {
      $("ul.droptrue").sortable({
         connectWith: 'ul',
         opacity: 0.6,
         update : updatePostOrder
     });

      $("##sortable1, ##sortable2").disableSelection();
      $("##sortable1, ##sortable2").css('minHeight',$("##sortable1").height()+"px");
         updatePostOrder();
      });

      function updatePostOrder() { 
         var arr = [];
         $("##sortable2 li").each(function(){
         arr.push($(this).attr('id'));
      });
      $('##postOrder').val(arr.join(','));
      }
      $("##wrapper").on("click", "a.secondary", function(event){
      $.ajax({
         url: "index.cfm?action=younger.trackListEdit",
         type: "POST",
         dataType: "json",
         data: $("##wrapper form").serialize(),
         success: function(d, t, x){
          if(d.svrstatus == "0"){
           settings.elem.$cocktailID.removeClass("problem-price");
           settings.$price30Dist.text(d.distcost30);
           settings.$price90Dist.text(d.distcost);
           settings.$price30Cust.text(d.retailcost30);
           settings.$price90Cust.text(d.retailcost);
           settings.$price30BV.text(d.bv30);
           settings.$price90BV.text(d.bv);
           settings.elem.specProcInput.val("*" + d.cocktailcode);
           settings.elem.$frm
            .find("input[name=labelName]")
             .val(settings.custName);//reset so that the label will work properly
           settings.elem.$cocktailID.toggleClass("loadingPrice", !!--requesting);
          }
          else{
           _.general.processAjaxError();
          }
         },
         error: function(x, t, e){
          _.general.processAjaxError();
         }
        });
       });

    </script>

and here is my html

<form name="trackListEdit" action="index.cfm?action=younger.albumsEdit" method="post">
  <h1>Edit Track List - #variables.songData.albumName#</h1>
  <div class="left">
   <div id="songList">
    <fieldset class="three">
     <h3>All Songs</h3>
     <div id="instructions">Drag and drop or re-order Tracks</div>
     <div id="songList">
      <ul id="sortable1" class='droptrue'>
      <cfloop from="1" to="#variables.songData.songListCnt#" index="i">
       <li class="ui-state-default" id="article_1">#variables.songData.songList[i]# <input type="hidden" name="prodID" value="#variables.songData.songList[i]#" /></li>
      </cfloop>
      </ul>
     </div>
    </fieldset>
   </div>
  </div>
  </form>
  <form name="trackListEdit" action="index.cfm?action=younger.albumsEdit" method="post">
  <div class="right">
   <div id="trackList">
    <fieldset class="three">
     <h3>Tracks on - #variables.songData.albumName#</h3>
     <div id="instructions">Drag and drop songs to upload and re-order Album Tracks</div>
      <ul id="sortable2" class='droptrue'>
       <cfloop from="1" to="#variables.songData.trackListCnt#" index="i">
        <li>#variables.songData.trackList[i]#<input type="hidden" name="prodID" value="#variables.songData.trackList[i]#" /></li>
       </cfloop>
      </ul>
    </fieldset>
   </div>
   <a class="button secondary" href="##">Edit</a>
  </div>
  </form>

[pritaeas]

Perhaps this code snippet can help.

[teedoff]

Pritaeuas, thanks for the link and help. I've almost got it..lol I can sort the list, and click my button and the alert says I am successful, but when I dump out the values, the list order hasn't changed.

Im using Coldfusion cfscript code and a method called setMediaEditAJAX that is supposed to get these new values and send them to the database. With the code above, not sure how that makes a "connection" to this method currently. Any advice?

My current code:

<script language="JavaScript" type="text/javascript">
 $(function() {
  $("ul.droptrue").sortable({
     connectWith: 'ul',
     opacity: 0.6,
     update : updatePostOrder
 });

  $("##sortable1, ##sortable2").disableSelection();
  $("##sortable1, ##sortable2").css('minHeight',$("##sortable1").height()+"px");
     updatePostOrder();
  });

  function updatePostOrder() { 
     var arr = [];
     $("##sortable2 li").each(function(){
     arr.push($(this).attr('id'));
  });
  $('##postOrder').val(arr.join(','));
  }
  $('##save-button').click(function() {
    var ids = [];
    $('##sortable2 > li.stories').each(function(el) {
      ids.push($(this).attr('id'));
    });

      var id = $('##brsel option:selected').attr('value');
     // var url = "index.cfm?action=younger.trackListEdit"+id;
        $.ajax({
            type: "POST",
            url: "index.cfm?action=younger.trackListEdit"+id,
            data: ({'listID':ids}),
            success: function(){
             alert("Changes been succesfully saved");
     }});
    })
    </script>

[pritaeas]

I am unfamiliar with ColdFusion, but you can test a regular POST to your index.cfm and see whether or not that works. If that does work, then there is something wrong with the calling Javascript code. For one, are you sure that you need to use two hash-tags for selecting ?

[teedoff]

Coldfusion uses the # for variable notation, so yes those have to be escaped with another hash.

Coldfusion in this case doesnt matter because we're using the cfscript tag which is basically javascript style coding...somewhat.

You set variables in cfscript just as you would in js, the main difference here being you can use CF functions within the cfscript tags. So really, the CF part I think may not be relative here as far as the jquery. Only the part of getting the data serialized and sent to the setter method.

Not sure what you mean by POST to my index.cfm? I thought that was what this line was doing.

 url: "index.cfm?action=younger.trackListEdit"+id,

Thanks again for all this help!

[pritaeas]

True. But what I mean is, if you use a regular PHP form to post to that page, does it then update your database correctly?

[teedoff]

I got it! Thanks for your help. Figured out the URL for the ajax data should have been my update page from my xml mapping. Thanks again!