1

I have a large multi-select menu (450 items, result of poor categorisation). AJAX seems like a great way to pass those back to server and save folks the effort of inputting their choices again upon page re-load.

My problem is passing all of those back to Flask - right now I only get the first third or so.

My AJAX:

    var occList = document.getElementById('occClass');
    occArray = [];
    for (var i = 0; i < occList.options.length; i++) {
      if (occList.options[i].selected) {
        console.log(occList.options[i].value)
        occArray.push(occList.options[i].value);
      }
    }
    console.log(occArray.length)

So I can see each item being added to the list fine, and the length of the list is fine too at 450.

But in my Flask application, when I call

    request.form.getlist('occArray')

I can see it's only around the first third or so. Splitting it into a Python list reveals it to only have 150 or so elements - in the order that they exist in the menu, and in the order that the console logs them (and so appends them - presumably).

I've read around and I can't see what limit I'm bumping up against - is there one?

EDIT - COMPLETE AJAX CALL

As requested - this is the complete AJAX call (at least I think this is what is meant). Other elements have been omitted (e.g. the date picker). The return is response.graph.

<script>
function loadXMLDoc()
{
    var req = new XMLHttpRequest()
    req.onreadystatechange = function()
    {
        if (req.readyState == 4)
        {
            if (req.status != 200)
            {
                //error handling code here
            }
            else
            {
                var response = JSON.parse(req.responseText)
                $("#content").html(response.graph);
            }
        }
    }
    req.open('POST', '/safety1Ajax')
    req.setRequestHeader("Content-type", "application/x-www-form-urlencoded")

    var occList = document.getElementById('occClass');
    occArray = [];
    for (var i = 0; i < occList.options.length; i++) {
      if (occList.options[i].selected) {
        console.log(occList.options[i].value)
        occArray.push(occList.options[i].value);
      }
    }
    console.log(occArray.length)
    var postVars = occArray='+occArray
    req.send(postVars)
    return false
}
</script>
Ben Mayo
  • 1,285
  • 2
  • 20
  • 37
  • 1
    If you can't find any other solution, try using JSON instead of form encoded data. – Alex Hall May 09 '17 at 10:06
  • Could you post the complete ajax call? – VMRuiz May 09 '17 at 10:13
  • Getting there - it's breaking on an ampersand. Surely that's the issue... – Ben Mayo May 09 '17 at 12:03
  • Yep - got it. Sure did learn something today. http://stackoverflow.com/questions/11294107/how-can-i-send-the-ampersand-character-via-ajax – Ben Mayo May 09 '17 at 12:12
  • When I asked this question I thought the length of the list was the issue. After much klutziness I figured out that wasn't the case. Sure is impressive that I managed to write a duplicate question about an issue I had no idea existed. – Ben Mayo May 09 '17 at 18:38

0 Answers0