How to populate data asynchronously e.g. multiselect

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

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.

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

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