JQuery function stops working when trying to submit large amount of parameters

Report · Sep 12, 2014

Hi,

Run CF9 on Windows 2008 R2 Server.

I have a cfm page with multiple dropdowns (some are cfselect) and dynamically generated lists of checkboxes interdependent on each other. I am using JQuery to submit data to cfc functions and to display data.

It was all working fine until we added new company with large number of records. This translated into large URL query string with a lot of parameters submitted for processing. That's when we started to have problems. I noticed when trying to directly submitting URL, if the total number of characters in URL is more than 2114 I get an error status code 302 Redirect and nothing is displayed.

I tried to play with postParametersLimit and postSizeLimit increasing to 1000.0 in neo-runtime.xml and restarting server but, this did not help.

Below is jquery function:

function populateBills(){
   var plID;

   if ($('#planenrolldate_id').val() == undefined)
    plID = $('input[name=planenrolldate_id]').val();
   else
    plID = $('#planenrolldate_id').val();

   var sID = $('#sponsor_id').val();
   var pID = $('#plan_id').val();

   var fromMonth = $('#from_month').val();
   var fromYear = $('#from_year').val();
   var toMonth = $('#to_month').val();
   var toYear = $('#to_year').val();

   $.ajax({
    type:"POST",
    url:"../components/billing/custompremstatus.cfc?method=GetBillsArr&planenrolldate_id=" + plID + "&sponsorid=" + sID + "&fM=" + fromMonth + "&fY=" + fromYear + "&tM=" + toMonth + "&tY=" + toYear,
    dataType: "json",
    success:
     function(data){
      $.each(data, function(index, item) {
       addBillsCheckboxes(item.bill_id,item.bill_period);
      });
    }, //end the error function
    error:
     function(){
      alert("An error has occurred while fetching bills");
     } //end the error function
   }); // end ajax call
} // end of function

Report · Sep 12, 2014

There is an HTTP limitation on the size of a valid URL string (not a ColdFusion issue, it's at the web server level), and it sounds like you've hit it. I see you are using the POST type on the AJAX request. Rather than appending all of your data to the URL, use the "data" setting on the AJAX function (see http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings).

Change the URL of the AJAX call to "../components/billing/custompremstatus.cfc?method=GetBillsArr"

Then add a "data" key between URL and dataType. Pass the data key a JavaScript object containing key/value pairs of the data you are sending, like this:

url: "../components/billing/custompremstatus.cfc?method=GetBillsArr",

data: {

planenrolldate_id: plID,

sponsorid: sID,

fM: fromMonth,

fY: fromYear,

tm: toMonth,

ty: toYear

},

dataType: "json",

On the CFC side, the data should be arriving as matching arguments to the function.

-Carl V.

Report · Sep 12, 2014

Thank you, Carl

I changed to POST style:

url:"../components/billing/custompremstatus.cfc?method=GetBillsArr",
data:
{
sponsor_id: sID,
planenrolldate_id: plID,
fM: fromMonth,
fY: fromYear,
tM: toMonth,
tY: toYear
}...

As a result I am getting error "The PLANENROLLDATE_ID parameter to the GetBillsArr function is required but was not passed in.
The error occurred on line -1. "

In the console planenrolldate_id looks like array. I selected 2 planenrolldate_id`s in this particular example.

This is from console:

fM 9
fY 2014
method GetBillsArr
planenrolldate_id[] 564
planenrolldate_id[] 561
sponsor_id 59
tM 9
tY 2014

Tried changing cfc function to accept planenrolldate_id to "array" and then changed to "any"

Report · Sep 12, 2014

Can you send the JavaScript pIID variable to the developer console in your browser? What does it look like when you have multiple input boxes?

-Carl V.

Report · Sep 12, 2014

That's exactly from the console after I submit:

fM 9

fY 2014

method GetBillsArr

planenrolldate_id[] 564

planenrolldate_id[] 561

sponsor_id 59

tM 9

tY 2014

When I check just one planenrolldate_id then it looks like this

fM 9

fY 2014

method GetBillsArr

planenrolldate_id[] 561

sponsor_id 59

tM 9

tY 2014

This it cfc part:

SELECT bill_id,

(Convert(varchar(10),billing_start_date,103) + ' - ' + Convert(varchar(10),billing_end_date,103)) + ' [' + Convert(varchar(6),plan_id) + ']' AS bill_period

FROM ...

</cfquery>

</cfif>

</cfloop>

</cffunction>

Report · Sep 12, 2014

No, that's what's being "packaged up" into the JSON payload being sent by your AJAX request. I'm asking you to do this:

console.log( pIID );

Maybe put that in your code right after populating the pIID variable from the form inputs (above the AJAX call). I want to see what JavaScript is doing with the input data.

-Carl V.

Report · Sep 12, 2014

Oh, ok

Here is the output when selecting multiple planenrolldate_id's

["564", "559", "524", "517", "459", "438", "402", "390"]

Report · Sep 12, 2014

That looks like a valid JavaScript array. I don't know why it's being mucked up when it is sent to ColdFusion; jQuery should be passing it as a valid JSON array. It almost looks like how the form data would be sent during a normal form submit (non-AJAX request).

What does your HTML markup look like? And where is your populateBills() function called from on the page?

-Carl V.

Report · Sep 12, 2014

This is part of cfm file

<select name="from_month" id="from_month">
    <option value="0">Select Month</option>
    <cfloop from="1" to="12" index="i">
      <option value="<cfoutput>#i#</cfoutput>" <cfif Month(Now()) Eq i>selected</cfif>><cfoutput>#MonthAsString(i)#</cfoutput></option>
    </cfloop>
</select>
/
<select name="from_year" id="from_year">
    <option value="0">Select Year</option>
      <cfset VARIABLES.iYearFrom = Year(Now()) - 10>
      <cfset VARIABLES.iYearTo = Year(Now()) + 10>
      <cfloop from="#VARIABLES.iYearFrom#" to="#VARIABLES.iYearTo#" index="i">
        <option value="<cfoutput>#i#</cfoutput>" <cfif Year(Now()) Eq i>selected</cfif>><cfoutput>#i#</cfoutput></option>
      </cfloop>
    </select>

Report · Sep 12, 2014

Oh, g*d. Anytime you mix the CF UI stuff (CFSELECT, CFFORM, etc.) with custom JavaScript (including using jQuery) you are asking for pain. The CF UI stuff is based on old EXT-JS 2.0 libraries, and don't play well with others.

That said, what does the FORM or CFFORM tag look like? And how about the button or control that initiates the populateBills() function?

-Carl V.

Report · Sep 12, 2014

That an old page. I started adding javascript recently.

$(document).on('change','#planenrolldate_id',function(){

populateBills();

});