Skip to main content
A
Anonymous
October 4, 2011
Answered

jquery and serialize / passing variables

  • October 4, 2011
  • 1 reply
  • 1856 views

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:-)

This topic has been closed for replies.
Correct answer

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

1 reply

A
Anonymous
Correct answer
October 7, 2011

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

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices