Jquery and serialize / passing variables

Question

I already put this question on the jquery forum but noone responded. My question is about jquery.
I have this image gallery, people can drop and drag pictures, the idea is they can determine theirselves the order in which images are shown on their website.
I have the sortable part, but I don't know how to pass the new order to the next page that should contain a query that updates the ordernumber for each item.
My code:
<!--- load the necessary scripts --->
     <script src="scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
    <script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
,!--- the actual sortable image gallery --->
<ul id="ulsortable">
    <cfoutput query="items">
        <li id="ID_#T_items_autoID#">
            <CFIF #T_items_img1# IS NOT 0>
                <img src="../#session.foldername#/galleries/#T_items_itemid#_thumbsitemanager.#T_items_img1#" alt="Click here to update" border="0" width="125" height="125">
                <CFELSE>
                    <img src="layoutimg/no_picture_available.jpg" alt="" width="125" height="125" border="0">
                </CFIF><br>
                <CFIF #T_items_title# IS NOT "">#left("#T_items_title#","15")#</CFIF>
        </li>
    </cfoutput>
</ul>
  <script>
    $(function() {
        $( "#ulsortable" ).sortable();
        $( "#ulsortable" ).disableSelection();
        $('#frm-sort').submit(function(){
            var sort_serialized = $("#ulsortable").sortable("serialize");
    </script>
<form action="#request.site.webroot#/actions/act_writeneworder.cfm" method="post" id="frm-sort">
  <input type="submit" name="save" id="save" value="save" />
  <input type="hidden" name="sort_serialized" id="sort_serialized" value="" />
</form>
When I use this and go to the next page thrugh submit button I get the error that sort_seriallized is an empty string. i must be doing something wrong. It has been 3 days i am on it:-)

Answer 1

If anyone is interested, here is the working code.
Make sure to include the right jslibraries
Make your stylesheet so you have an unordered list that looks like an image gallery:
<style>
         ul
            width                : 715px;
            list-style-type    : none;
            margin              : 0;
            padding             : 0;
        /* float & allow room for the widest item */
          ul li
            float                 : left;
            width                : 136px;
            height              : 165px;
            margin              : 2px;
            text-align          : center;
            border              : 1px solid gray;
           /* stop the float */
          br
            clear            : left;
          /* separate the list from subsequent markup */
          div.wrapper
            margin-bottom    : 1em;
    </style>
Then the jquery script:
<script type="text/javascript">
        $(document).ready(function(){
// sortable makes the ul drag and drop
            $("#ulsortable").sortable();
// create variable that will be submitted with form           
                $("#frm_sort").submit(function(){
                    var order = $('#ulsortable').sortable("serialize");
                    $('#order').val(order);
    </script>
Ouput the listitems:
<ul id="ulsortable">
    <cfoutput query="items">
        <li id="myprimarykey_#T_items_autoID#">
                 <img src="../#session.foldername#/galleries/#T_items_itemid#_thumbsitemanager.#T_items_img1#" alt="Click here to update" border="0" width="125" height="125">
                <br/>
               <CFIF #T_items_title# IS NOT "">#left("#T_items_title#","15")#</CFIF>
        </li>
    </cfoutput>
</ul>
Finally the form with submit button and hidden field that passes variable:
<form action="actions/act_writeneworder.cfm" method="post" id="frm_sort">
      <input type="hidden" name="order" id="order" value="" />
      <input type="submit" name="save" id="save" value="Save new order" />
</form>
The page that handles the serialize and database update:
<!--- convert the serialized string to a comma delimited list --->
    <cfset idlist = ReReplaceNoCase( form.order, "(&)?myprimarykey\[\]=", ",", "all" )>
    <cfset position = 0>
    <cfset pk = 0>
<cfloop list="#idlist#" index="pk">
      <cfset position++>
    <cfquery name="writeneworder" datasource="#request.dba#">
        UPDATE T_items
            SET T_items_order = <cfqueryparam value="#position#" cfsqltype="CF_SQL_INTEGER">
             WHERE T_items_autoID = <cfqueryparam value="#pk#" cfsqltype="CF_SQL_INTEGER">
    </cfquery>
</cfloop>
<cflocation url="#request.site.webroot#/item_choose_cat.cfm?currentopic=changeorder" addtoken="no" />
As I couldn't find anywhere a full working exemple I decided to post this code, hope it helps you.
Bianca