jQuery dynamic form creation in IE8 not working with large amounts of data

Question

At work, we have a report that is generated with IP's in it. There is a link you can click on in that report that will open a new window and call a script which brings up a google map with pin points to where each IP originates from. Depending on the report, it can return a lot of IP's (around 150 at times). So, in order for this to work out, we are having to POST data to that script since using a GET, the max size of the URL is exceeded at times.

So what I'm doing is when that link it clicked to open the map, I call a Javascript function that I wrote which takes the IP's, creates a form tag with a target attribute which points to the new window that will be opened, appends it to the current page, then appends hidden input's of the IP's to that form. Then I open the new window with the specified name and submit the form. The code looks like this:

function submitToWindow(url, nameValuePairs) {
    var form = document.createElement('form');
    form.setAttribute('action', url);
    form.setAttribute('target', 'newWindow');
    form.setAttribute('method', 'POST');
    for (i=0; i < nameValuePairs.length; i++) {
        var nameValue = nameValuePairs[i].split('=');
        var input = $('<input name="' + nameValue[0] + '" type="hidden" value="' + nameValue[1] + '"/>');
        form.appendChild(input[0]);
    }
    document.body.appendChild(form);
    window.open('http://fakeurl.com', 'newWindow');
    form.submit();
}

I'm creating the hidden input elements with jQuery for cross browser compatibility since IE8 seems to not like it when you call blah.setAttribute('name', 'value'); It turns that "name" attribute into "submitName". Which causes issues when the form is submitted.

This works great in FF and even IE8 when there aren't a large number of hidden input's that have to be created. However, when we get around 150 hidden input items, nothing seems to happen in IE8. I don't get any script errors or anything, it's just as if the click on the map link was ignored. I'm guessing there's some breakdown in there.

Does anyone have any suggestions on how to do this better?

Answer 1

I figured out the issue with this.

This wasn't an issue with jQuery at all.. It seemed to be an IE8 limitation on string literals. The nameValuePairs was actually a query string that looked like so...

'Key=Value&Something=Nothing'

This was generated by a script that output some HTML. When that string became fairly large, IE8 just simply wouldn't call my submitToWindow function above. There were no errors from IE8, it just didn't call that function.

The way I worked around this was to have the script generate hidden form elements so that my javascript code wouldn't have to parse that long string.