Rendering 20 large identical listBoxes

Question

I have an HTML table with rows (20 rows). Every row has a listbox of countries (about 250 countries) that are filled using a single dataset from the database.

Loading time is quick enough, but rendering time is really a mess. Is there any way I can speed the rendering of those listboxes?

Answer 1

You could load it only once, and then copy the DOM element everywhere you need it...

I'm not sure if this would improve a lot since it would rely more on the user's computer, but I guess it's worth trying if it's too slow the way it is right now.

edit: here's how I'd do it. Use with caution, I haven't tested it and there is most likely tons of errors with this code, it's just to give you an idea of what I was saying.

<mylistbox id="listboxtemplate"> ... </>

<div class="thisPlaceNeedsAListbox"></div>
<div class="thisPlaceNeedsAListbox"></div>
<div class="thisPlaceNeedsAListbox"></div>

on document ready, using jquery:

jQuery(".thisPlaceNeedsAListbox").append( jQuery("#listboxtemplate").clone() )

Answer 2

You could try to add next select box only after user has selected previous one (using JavaScript).

I'm quite sure that you can rethink the form or the process, but I can't suggest anything specific since you haven't given enough information. For example depending on situation you could use multi-select or some fancy JavaScript widget.

EDIT based on your comment:

Then how about serving the table without selects. And if user double clicks on a country field you change the text element to select element using javascript. And once user has selected the country you can change back to text element. You can submit results back to server using Ajax (after user has selected the country) or using hidden fields a submit button. This way DOM will never contain more then 1 select element.

You can pass countries to javascript using inline JSON object/array (in script tags). To make things even more faster after user has edited the first element, just hide (css: display: none;) the first build select element and clone/move it around each time user wants to edit a row.

As you can see there are a lot of paths you can take using this approach, it all depends how much you want to optimize/work on it.