How to refresh?

[DeanKamali]

I'm using this with React, after a user performs an action I get an updated list of options from DB.
I would like to pass them to an existing dual-list box, how can I go about doing that? is there is a refresh function? if not how can I destroy the element and re-create it with new options?

[ahmad6242]

Please help me how to destroy and recreate this Dual List...?

[phorman]

This is how I am currently destroying and re-create the listbox.

When I instantiate a new dualListbox, I store the object into my current class.
Then in my class method, I set a new variable to the stored object.
dualListbox = this.dualListbox;

Then I call a promise that fetches new data.

post(this.siteUrl + 'vendors', data).then((result) => {
      console.log('result', result);
      this.addOptions('vendors', result);
}).then(() => {
      dualListbox.selected = [];
      dualListbox.available = [];
      dualListbox._splitOptions($('#vendors')[0].options);
      dualListbox.redraw();
}).catch((err) => console.log('fetch/vendors-error', err));

[MihirChichria]

listBox.available = [];
listBox.options = "";
response.forEach(function (customer) {
                    listBox._addOption( {
                        'text': `your_text`,
                        'value': `your_value`
                    });
                });
listBox.updateAvailableListbox();

[lahmkah]

This is how I approached it after close to 72 hours of suffering.
First in html, I defined a div with id select_div within which the select control would be placed.

<div class="col-md-8" id="select_div">
      <select id="enrollments" name="enrollments" class="dual-listbox" multiple
            data-available-title="Source Options"
            data-selected-title="Destination Options"
            data-add="<i class='fa-solid fa-angle-right'></i>"
            data-remove="<i class='fa-solid fa-angle-left'></i>"
            data-add-all="<i class='fa-solid fa-angles-right'></i>"
            data-remove-all="<i class='fa-solid fa-angles-left'></i>">
      </select>
</div>

Next, within javascript I defined a html string with a new select element and then using the div id above I retrived the div and replaced the inner html with the newly created html string as shown below

var html = "<select id='enrollments' name='enrollments' class='dual-listbox' multiple " +
        "data-available-title='Source Options' " +
        "data-selected-title='Destination Options'" +
        "data-add='<i class='fa-solid fa-angle-right'></i>'" +
        "data-remove='<i class='fa-solid fa-angle-left'></i>' " +
        "data-add-all='<i class='fa-solid fa-angles-right'></i>' " +
        "data-remove-all='<i class='fa-solid fa-angles-left'></i>'>" +
        "</select >";

var select_div = document.getElementById('select_div');

select_div.innerHTML = html;

let select = document.querySelector('#enrollments');
let dualListbox = new DualListbox(select, {
        availableTitle: "Unassigned assets",
        selectedTitle: "Assigned assets",
        addButtonText: "<i class='fa-solid fa-angle-right'></i>",
        removeButtonText: "<i class='fa-solid fa-angle-left'></i>",
        addAllButtonText: "<i class='fa-solid fa-angles-right'></i>",
        removeAllButtonText: "<i class='fa-solid fa-angles-left'></i>",
});
dualListbox.addOptions(listbox_options);
dualListbox.redraw();

Note:
listbox_options is an array similar to

[
  { text: "Option 1", value: "OPTION1" },
  { text: "Option 2", value: "OPTION2" },
  { text: "Option 3", value: "OPTION3", selected: true },
]