Last week I released version 2.5 of the Select2 APEX plugin in which I introduced the lazy loading feature. I also wrote a blog post that described in what way you had to apply lazy loading to a Select2 page item. The technique involved consisted of creating an On Demand AJAX process that then had to be referenced in the Remote Data Process item setting. The bad thing about this Remote Data Process was that you had to duplicate the query from the item’s LOV definition to successfully return the query result in JSON format. It was a solution that worked, but my instincts told me there had to be a better way to incorporate lazy loading in the Select2 APEX plugin. However, I wasn’t able to come up with a better solution.
Luckily, Franke Menne wrote a comment on my blog post and was kind enough to show me how I had to improve the lazy loading part. A big thanks to Frank to share his solution and make the Select2 plugin more convenient to use. I’m not going to bother you with the technical adjustments I had to make. I’ll just explain how you can enable lazy loading in the latest version of the Select2 plugin (which is 2.6 on the moment of writing).
First of all, forget about the Remote Data Process I talked about earlier on. We don’t need it anymore, thus no more code duplication. The plugin itself takes care of the JSON generation, completely based on the item’s LOV definition. All we have to do now is check a checkbox when we want to enable lazy loading.

That makes it a whole lot easier. I have also added the item setting Lazy-append Row Count. With this number you can determine the amount of results that get lazy-appended to the select list when the result list is scrolled down to the end. An example of this technique can be seen here, under the Infinite Scroll with Remote Data section. Leave this setting empty to disable lazy-appending.
Very nice enhancement!
LikeLike
Upgraded; seems to work well so far – will need to test to see if it improves the performance for our large lists but I have a feeling it will be better.
LikeLike
UAT has passed; users happy :)
LikeLiked by 1 person
Haha, that’s great to hear.
Thanks for the feedback.
LikeLike
Reblogged this on SutoCom Solutions.
LikeLike
We’ve just noticed that when we switch Lazy Loading on for a select2 item, the clear button (little “x”) doesn’t get rendered anymore. Any ideas?
LikeLike
I haven’t seen that bug before. Does it happen in all browsers? Can you reproduce on apex.oracle.com?
The clear buttons for the lazy loading items on the Select2 demo page seem to work just fine.
LikeLike
Reproduced in Chrome (v40.0.2214.111 m) and Internet Explorer 8 and 10.
Uploaded test case to https://apex.oracle.com/pls/apex/f?p=67465:1
I’ll PM you access to the workspace.
LikeLike
Thank you for the test case.
The “Null Display Value” setting seems to be the problem here. The clear button gets rendered as soon as you enter a placeholder value for the setting. This bug originates from the Select2 library itself, not the APEX plugin. That makes it difficult to fix. The easiest solution for now is to fill in the “Null Display Value” setting.
LikeLiked by 1 person
Thanks, that takes care of it.
LikeLike
Hi! How can i set value from pl/sql dynamic action, using lazy loading functionality?
I try :P1_X := 1; and put “P1_X” to “Page Items to Return”, but there was no effect.
I try using Set Value dynamic action, but there was also no effect.
Can you add this functionality to plugin?
Thanks.
LikeLike
I am afraid it is a little more complicated than that. You can set the value of a Select2 item with lazy loading enabled by executing the following JavaScript command.
You need both the return and display value of the LOV value you would like to set client-side. It might be the easiest to work with two hidden items in which you fetch the return and display value. After fetching these values, execute the above JavaScript line based on the the hidden items.
Does that help you out?
Kind regards,
Nick
LikeLike
Just wanted to let anyone who stumbles upon here that; when you write an query which extends the column length defined in oracle; then lazy loading does not work.
Meaning if you have a query
select name || desc , id from table1
lazy loading might give an error failed to load
Solution is to alias the column as shown below
select name || desc name, id from table1
LikeLiked by 1 person
Thanks for the heads up. Aliasing the column fixes the issue indeed.
LikeLike
Hi,
Is there a way to get an event trigger for when the drop-down values are refreshed? I need to both refresh the list & set it to a specific value. Is there a good way to do that?
TIA
mwt
LikeLike
Hello,
Create a dynamic action:
* Event: After Refresh
* Selection Type: Item
* Item(s): The name of the item that will be refreshed
In your true action, execute JavaScript code to set the item’s value:
Don’t forget to select the appropriate affected element(s).
Hope that helps,
Nick
LikeLike