I have a form which has about 40-50 select2 combos. I'm trying to set the values for all these, by retrieving the values using ajax.
I'm able to fetch the values using ajax and also able to set all the combos from the fetched values, but, the page response is too slow. It takes roughly about 12-15 seconds for the updated values to reflect on the page, and the browser is not responsive during that time.
To update the values on the combos, I'm first setting the "value" of the element equal to the value fetched from ajax call, and then calling the "change" event on each of the combos. When I disable this piece of code (calling the "change" event), there is almost no delay, but the updated values don't get reflected on the page. I've also tried using the "select2.change" event to update the values, but there's no effect.
//sample I'm using to set the value
comboElem1.val(value1);
comboElem2.val(value2);
comboElem3.val(value3);
//sample used to update the values, so that it's reflected on page
comboElem1.change();
comboElem2.change();
comboElem3.change();
Update: I'm only making 1 ajax call to fetch the data for the fields, which returns a single JSON object.