0 Replies Latest reply: Apr 17, 2012 11:29 PM by senkel RSS

    dragdrop sort a form with ajax, jquery

    senkel Community Member

      Hi all i have a question, i want to dragand drop the formfild line in a table to sort the request new and in finish save..

       

      i user this script:

       

      <cfquery name="daten" datasource="#dsn#">

      select *

      from test

      </cfquery>

       

       

      <script language="JavaScript" src="js/prototype.js"></script>

      <script language="JavaScript" src="js/scriptaculous.js"></script>

       

      <style>

      li { list-style-type: none; border: 1px black solid; padding:3px; margin:4px;

           margin-top:6px; background-color: FFFFCC; color: black; width: 300px; }

      </style>

       

      <script language="JavaScript">

      function getOrder() {

        var orderList = ';

        orderedNodes = document.getElementById("sortable_list").getElementsByTagName("li");

        for (var i=0;i < orderedNodes.length;i++) {

          orderList += orderedNodes[i].getAttribute('recordid') + ', ';

          }

        alert(orderList);

        }

      </script>

       

       

      <cfform name="myform" method="get" action="test2.cfm">

      <ul class="sortlist" id="sortable_list" style="cursor: move">

      <cfoutput query="daten">

         <li id="#daten.sortierung#" class="sortlist">

         <input type="hidden" name="artikel_#id#" value="artikel_#daten.id#">

         <input type="hidden" name="sortierung_#id#" value="sortierung_#sortierung#">

         <input type="hidden" name="titel_#id#" value="#daten.titel#">

        

         #trim(daten.titel)#</li>

      </cfoutput>

      </ul>

       

      <script language="JavaScript">

      Sortable.create("sortable_list");

      </script>

      <cfinput type="hidden" value="#valuelist(daten.id)#" name="version_id">

      <input value="Submit" type="submit" name="sub">

      </cfform>

      ################################################################

       

      All is ok.. i can move the position of the output, but how can i save the new sort request...

      example i have move line 6, at the start the new sort is 6,1,2,3,4,5

       

      this is the output from the form:

      test2.cfm?artikel_6=artikel_6&sortierung_6=sortierung_6&titel_6=Articel+6&artikel_1=artike l_1&sortierung_1=sortierung_1&titel_1=Articel+1&artikel_2=artikel_2&sortierung_2=sortierun g_2&titel_2=Articel+2&artikel_3=artikel_3&sortierung_3=sortierung_3&titel_3=Articel+3&arti kel_4=artikel_4&sortierung_4=sortierung_4&titel_4=Articel+4&artikel_5=artikel_5&sortierung _5=sortierung_5&titel_5=Articel+5&version_id=1%2C2%2C3%2C4%2C5%2C6&sub=Submit

       

      now i want to update the fdatabase:

      update table

      set artikel_sort = '6'

      where artikel_id = '#artikel_id#'