Using jQuery .when() to trigger a screen update after select2 has loaded

We have an XPage with over 100 complex fields on it and we found that applying Select2 to it took a noticeable amount of time – tangible to the user.

Users would see the original “SELECT” fields before the nicer select2 style was applied.


So we determined to hide all the fields on the form until select2 was finished loading, then show them all select2’d. The problem was that we could not find an obviously way to do this. I was looking for a parameter within the select2 and I could not get anything to work. So I looked elsewhere…..

We decided to hide all the form fields with a <STYLE> on the main section. Then when the select2 was finished brought them into view. The experience is much better on the user.


   $("select[class*='select2']" ).select2({
    allowClear: true
     $('#mainContent').css({'visibility': 'visible'})

Using the jQuery .when() causes the code to be synchronous, so I know that it will be triggered when the select2 code is finished.

For more on .when() check out the API


3 thoughts on “Using jQuery .when() to trigger a screen update after select2 has loaded

  1. Oliver Busse @zeromancer1972
    @MarkyRoden impress your users by using fadeIn() instead of css switching 😉

    Oh DUH!!

  2. Brilliant! I had pretty much resolved that there was just no good way to gracefully hide the SELECT fields until after the Select2 styling had been applied….

    Then I found this brilliant solution. Thanks for sharing!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s