How to populate data asynchronously e.g. multiselect


Topic: How to populate data asynchronously e.g. multiselect

Juric pro premium asked 8 months ago

Hi, we are using many multiselect elements in one form, and at the moment we populate the data from a database synchronously, which takes long time because many selectboxes are being populating one by one.

Before creating our own solution, we would like to know, if you possible already have a solution for that. If yes, could you put a small example? Thanks


Anna Morawska staff answered 8 months ago

Hi there,

unfortunately, we don't have any examples for that.

Do not hesitate to share your implementation experience here, so it can help someone out there.

Best,

Ania


Juric pro premium answered 8 months ago

Hi, I created a solution for populating select boxes. I cannot post here all my function because it will be too many. In general I have followings: on load I call generateParameters(params) function, where params is an array of arrays like:

['idElem', 'typeElem', 'dataSource' ...],[--another parameter....], ...

function generateParameters(params) creates all needed html elements and adds them to a DOM.

inside that function I have:

window.setTimeout(function() {
                    addOptionsToSelectFromSrc(...);
                }, 0);

so the function addOptionsToSelectFromSrc() will be called after generateParameters() is done.

Inside that function I populate select boxes asynchroniously (that is why it is very important, that to that moment all elements must be in DOM already.

function addOptionsToSelectFromSrc(...) {
    ...
 updateDropDownAsync(params...., callback=initMultiSelect)
}

The trick is, that if we have many multiselect elements, we need to initialize MDB multiselect only once, after all populating procedures are done. That means, after all select boxes are populated asynchronioulsly.

So we need to have a global counter of loaded multiselect elements. So

// Material Select Initialization
function initMultiSelect() {
    if(allMultiselectLoaded()) {
        // log('initializing of MDB multiselect ...');
        $('.mdb-select').materialSelect();
    }
}

Of course, we need to disable a call of $('.mdb-select').materialSelect(); in html body.


Anna Morawska staff answered 8 months ago

Wow, great, thanks for sharing. Please consider publishing it in the form of an article here.


Juric pro premium answered 8 months ago

Hi, I don't know if I would find time for that. And if I can. Never wrote articles )


Status

Closed

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: jQuery
  • MDB Version: 4.6.1
  • Device: Desktop
  • Browser: IE 11, Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No