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.

a1

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.

a2

$.when(
   $("select[class*='select2']" ).select2({
    allowClear: true
  })
).done(function(){
     $('#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 http://api.jquery.com/jquery.when/

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

Leave a Reply

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

WordPress.com Logo

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

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s