Trying to have a callback executed when all select2 elements are fully loaded/populated

[justin hyland]

I have a page in one of my web apps that uses the jQuery DataTables plugin to display a table with thousands of records, which are loaded via AJAX. And right above that table, I have a search form, which has multiple Select2 inputs. These Select2 inputs are loaded in the DataTables initComplete callback. So when InitComplete is called, I have some logic that looks for any select2 inputs, then grabs all of the unique data in the DataTables column named after the Select2 inputs name. 

The problem im having, is it takes the select2 inputs like 4 or 5 seconds to get completely loaded. And thats really bugging me.

I tried to place a "Loading..." div over them, then have the div removed or set to invisible once the DataTable and select2 elements are completely loaded, but it doesnt seem to work. 

Heres an example of what im talking about, you cant see the same problem I have, since this table only has like 50 something rows, but if it was over 2 thousand, you would see the select2 inputs lookin really ugly, then after a few seconds, they would be converted.

http://live.datatables.net/tuhomoli/2/edit?html,js,output (make sure you click Run in the upper right)

So, two questions...

1. Is it possible to have a callback execute after the select2 elements are loaded? I tried to just have the callback execute once the last iteration on the $.each loop was done, but that didnt work.
2. Is it possible to have the select2 inputs loaded with no options (just so they look pretty), THEN have the options added to them? that may help

Thanks!

[Kevin Brown]

Select2 should behave like a standard select box, which means you can add options to it after you initialize it. You may need to trigger the change event if there were no options to start with, so Select2 properly displays the selected items (if there are any).

Select2 does not have any events that are triggered when it is done loading. This is because nothing extra should be initialized after the call to select2() completes, so there is no point to having a synchronous event.

--
You received this message because you are subscribed to the Google Groups "select2" group.
To unsubscribe from this group and stop receiving emails from it, send an email to select2+u...@googlegroups.com.
To post to this group, send email to sel...@googlegroups.com.
Visit this group at https://groups.google.com/group/select2.
For more options, visit https://groups.google.com/d/optout.

[Luna lee]

FHSEOHub is a digital marketing platform that helps businesses boost their online visibility and search rankings. It offers SEO solutions tailored to drive traffic and improve brand presence. With FHSEOHub, you can grow your business effectively in today’s competitive digital world.

[Toni Kroos]

Coffee Aware is an initiative that promotes sustainable and ethical coffee consumption. It educates consumers about the environmental and social impact of coffee production. By supporting Coffee Aware, individuals can make informed choices that benefit farmers, communities, and the planet.

[Albert Robin]

If you're trying to trigger a callback only after all Select2 elements are fully loaded, you can loop through each instance and fire your function once every dropdown has finished populating. This approach is similar to how we handle async loading in gaming dashboards—especially when dealing with dynamic data like character lists or event items. I’ve used the same technique while optimizing tools for Null’s Brawl where UI elements must be fully rendered before actions like filtering brawlers or loading custom events can run smoothly.

Just make sure each Select2 emits a "select2:select" or "select2:open" completion state, then count them and trigger your callback once all are done.

[Jerry Robinson]

Elevate your crafting routine with premium Big Twist yarns from https://big-twist.com/
Designed with smooth textures and rich, vibrant colors, each skein brings warmth, beauty, and creativity to every project. Whether you’re working on simple patterns or detailed designs, Big Twist yarn offers the perfect balance of softness and durability. Turn your ideas into stunning handmade creations — one beautiful stitch at a time.