Cannot dynamically populate data from ajax response

[abdulrachman]

Hi there,

I just trying get data from ajax, and I want to try to populate array of data / response to DualListBox (available or selected)
Can you please just give me the right way?

Thankyou

[bloodyburger]

I do this to dynamically update from Ajax response, just make sure dualListbox is declared globally.

$.ajax({
           url: '/fxx',
           type: "POST",
           data: formData,
           dataType: "json",
           headers: {
               'X-CSRFToken': $("[name=csrfmiddlewaretoken]").val()
           },
           mimeType: "multipart/form-data",
           success: function(data) {
               console.log(data.input_cols)
               var cols = data.input_cols
               //let dualListbox = new DualListbox("#dg_dual_listbox");
               dualListbox.available = [];
               dualListbox.options = "";
               $.each(cols, function(idx, col) {
                   console.log(col)
                   dualListbox._addOption({
                       'text': col,
                       'value': col
                   });
               });
               dualListbox.updateAvailableListbox();

           },

[JostCrow]

I am also working on a new release where adding data dynamically should be possible.

[bloodyburger]

I do this to dynamically update from Ajax response, just make sure dualListbox is declared globally.

$.ajax({
           url: '/fxx',
           type: "POST",
           data: formData,
           dataType: "json",
           headers: {
               'X-CSRFToken': $("[name=csrfmiddlewaretoken]").val()
           },
           mimeType: "multipart/form-data",
           success: function(data) {
               console.log(data.input_cols)
               var cols = data.input_cols
               //let dualListbox = new DualListbox("#dg_dual_listbox");
               dualListbox.available = [];
               dualListbox.options = "";
               $.each(cols, function(idx, col) {
                   console.log(col)
                   dualListbox._addOption({
                       'text': col,
                       'value': col
                   });
               });
               dualListbox.updateAvailableListbox();

           },

There is a problem with this approach, the selected values are not passed to the request. I'm waiting for update from @JostCrow to see his approach.

[Fregionz]

Hello, i'm using dynamic option value, but when i try to add or remove it return a error:

Uncaught TypeError: Cannot read properties of undefined (reading 'selected')
at d.changeSelected (dual-listbox.js:140:47)
at d.actionItemDeselected (dual-listbox.js:285:18)
at HTMLButtonElement. (dual-listbox.js:344:18)

even my option have selected element already:

arrOptions.push ({
text : val['name'],
value : val['id'],
selected : listSelected.includes(val['id'])
});

[eobeda]

Hi,

I had a similar issue and found that the "value" is expected to be a string value. I couldn't tell from your example the data type you are using. A quick fix might be to try:

value : val['id'].toString(),

when loading the data. Watch out for how this data conversation might affect other bits of your downstream logic.