Posting Static & Variable length data to the Server with JQUERY & Coldfusion

Question

I'm looking to post the following type of data to a server using JQUERY & Coldfusion:

foodID - int
foodDESC - text html text from a WYSIWYG (CKEDITOR)
--there will always be just 1 foodID and foodDESC per POST to the server but there can be a variable number of:
locationID - int
LocationDesc - text
--There can be 0-8+ of these.

Should I send this in one post or multiple posts? If one post, what's the smartest way to do this? I'm never had to deal with this much data before.

Thank you

Answer 1

You can send them in one POST, just make sure the input field names are unique.

Answer 2

I'm going to have to guess what your form looks like:

myform.cfm (assumes that jquery 1.4.x and your custom js script is loaded)

<form id="myForm">
<input type="hidden" name="foodID" id="foodID" value="" />
<textarea name="foodDESC" id="foodDESC"></textarea>

<input type="text" name="locationID1" value="" class="locID" />
<input type="text" name="locationDesc1" value="" class="locDesc" />

<input type="text" name="locationID2" value="" class="locID" />
<input type="text" name="locationDesc2" value="" class="locDesc" />

..more locationIDs and LocationDesc inputs as needed..
<input type="button" name="save" id="save" value="Save" />
</form>

myScript.js

// I highly recommend validating javascript with www.jslint.com and testing with firebug
$("#save").click(function () {
    var serviceUrl, foodID, foodDESC, locIDs, locDescriptions;
    serviceUrl = "myProcessor.cfc?method=save";
    locIDs = [];
    locDescriptions = [];

    // get the value of the two easy ones:
    foodID = $("#foodID").val();
    foodDESC = $("#foodDESC").val();

    // Reference: http://marcgrabanski.com/article/jquery-select-list-values
    // Get all locationIDs based on the similar class name and save them to an array

    $('.locID').each(function (i, item) {
        locIDs[i] = $(item).val();
    });

    // likewise for the location descriptions
    $('.locDesc').each(function (i, item) {
        locDescriptions[i] = $(item).val();
    });

    // send form data to server side form processor
    $.post(serviceUrl, {
        foodID: foodID,
        foodDESC: foodDESC,
        locationIDs: locIDs,
        locationDescs: locDescriptions 
    }, function (result) { 

            // display result message
            alert(result);
        }, "json");

});

myProcessor.cfc

<cfcomponent output="no">
<cfsetting showdebugoutput="no">
<cfset ds="myDatasource">

    <cffunction name="save" access="remote" returnFormat="JSON" output="no" hint="Saves data to the server db">
            <cfargument name="foodID" type="string" required="yes">
            <cfargument name="foodDESC" type="string" required="yes">
            <cfargument name="locationIDs" type="string" required="yes">
            <cfargument name="locationDescs" type="string" required="yes">
            <cfset var result = "Success!">

            <cftry>

            <!--- Process arguments here for your server side needs such as a cfquery
            foodID will be a simple string or integer
            foodDESC will be a string varchar or text
            locationIDs and locationDescs will be a javascript array. Can't remember if Coldfusion will process it as a comma delimited list or an array. Either way, it's simple to handle with CF. If it's an array, you will need to modify the argument type above --->

            <cfcatch>
                <!--- Uh oh, something happened, return the message for debugging --->
                <cfset result = cfcatch.message & " " & cfcatch.detail>
            </cfcatch>
            </cftry>
            <cfreturn result>
     </cffunction>
</cfcomponent>