Problems when submitting a form from jquery to cgi

Question

I have a problem where, when I submit a form with X amount of things selected, my code hangs. My form is auto generated and depends on user inputs. When it is a small amount of data being selected in the form, there are no problems submitting the data and my cgi script runs fine. It seems when the array 'params' gets larger than 124 items, the code hangs and never loads.

\$('#HTML_EXECUTE_BUTTON').click(function() {

                 \$("#prog").html("<h2>WORKING - <img src='./lib/jqueryui_start/development-bundle/themes/base/images/ui-anim_basic_16x16.gif'> </h2>");

                 var params  = \$("#mec_html_step_B_inputs").serializeArray();
                 var params1 = \$("#mec_html_step_C_inputs").serializeArray();
                 var params2 = \$("#mec_html_step_D_inputs").serializeArray();
                 var params3 = \$("#mec_html_step_A_inputs").serializeArray();

                 params = \$.merge(params, params1);
                 params = \$.merge(params, params2);
                 params = \$.merge(params, params3);

                 params.push({ name: 'menu_mode', value: '5' });
                 params.push({ name: 'mode', value : '$mode'});
                params.push({ name: 'modetype', value: '$GLOBAL_MQA_MODE' });

                 \$("#HTML_EXECUTE_BUTTON").css("background-color","");

                    my_window = window.open("", "DEBUG WINDOW", "status=1,width=350,height=150"); //for debugging
                    my_window.document.write(dump(params)); //for debugging
                    alert(params.length); // for debugging


                 \$.get("./cgi_scripts/$GLOB_SCRIPT_NAME",params , function(data) { 
                    \$("#grapharea").html(data);
                    \$("#prog").html(" ");
                 });
            });

Is there a character/parameter size limit for the $.get() function? I've debugged as much as I can and this is my last area where i think it can go wrong. Unless there's a maximum number of parameters that the CGI.pm can handle? any thoughts on what could be wrong? something that I have not considered?

Thanks

Btw, the called cgi script is being loaded in the same page as the form, just underneath.

Answer 1

I know that different web servers have different URL lengths, but they are often on the order of 2-6,000 chars.

Here's the thing -- if the data being sent to the server is supposed to be stored somewhere, you probably ought to make this a POST request. POST will handle large datasets much more robustly, because the form data goes in the request body. More importantly, GET requests are supposed to be idempotent -- submitting the same request over and over should always produce the same results, and shouldn't change anything elsewhere. If this request is not like that, it should be POST.

You may want to try using something like LiveHTTPHeaders (for Firefox) or Fiddler to examine the request that actually gets sent. Compare that to what you expect should be sent.

EDIT: Here's an attempt to modify your request to use a POST. Based on my cursory glance at the jq docs, it looks like you may be able to rely on jq to automatically serialize your arrays for you.

\$('#HTML_EXECUTE_BUTTON').click(function(event) {

    \$("#prog").html('<h2>WORKING - <img src="./lib/jqueryui_start/development-bundle/themes/base/images/ui-anim_basic_16x16.gif" /> </h2>');

    var params  = \$("#mec_html_step_B_inputs").serializeArray();
    var params1 = \$("#mec_html_step_C_inputs").serializeArray();
    var params2 = \$("#mec_html_step_D_inputs").serializeArray();
    var params3 = \$("#mec_html_step_A_inputs").serializeArray();

    params = \$.merge(params, params1);
    params = \$.merge(params, params2);
    params = \$.merge(params, params3);

    params.push({ name: 'menu_mode', value: '5' });
    params.push({ name: 'mode', value : '\$mode'});
    params.push({ name: 'modetype', value: '\$GLOBAL_MQA_MODE' });

    \$("#HTML_EXECUTE_BUTTON").css("background-color","");

        my_window = window.open("", "DEBUG WINDOW", "status=1,width=350,height=150"); //for debugging
        my_window.document.write(dump(params)); //for debugging
        alert(params.length); // for debugging

    jQuery.ajax({
        url: './cgi_scripts/$GLOB_SCRIPT_NAME',
        type: 'POST',
        data: params,
        error: function(jXHR, sStatus, eError) {
            // react to failures
        },
        success: function(data, textStatus, jqXHR) {
            // react to success
            \$("#grapharea").html(data);
            \$("#prog").html(" ");
        }
    });
    event.preventDefault();
    return false;
});

(I also changed your HTML generation to use proper quotes in the markup. No biggie.)

EDIT 2: Now, click event is captured and consumed by this handler.