String split to array to Select Component

Wappler General How To
#1

I am using a select component to allow users to see previous selections. The “Selected value” of the select component requires an array.
So to pass an array i am currently using string split function (on comma separated value returned from serverconnect query to a table) to set the value of the “Selected Value” of the select component but it is not taking it as an array.
I also tried by declaring an array and selecting arr.items in “selected value” and it works fine. But now I have a problem how to pass string split values to the array. The split function inserts all values in one index of the array making is same string as before.

I have gone through Data binding not recognizing an array and came to know that “setValue” function returns a string not an array.

Is there any workaround this?

Select2 Mult Select Usage guidance
#2

Ok. Now I have tried with a variable instead of array. Set value of the variable to the comma separated value from table. Pointing “selected value” of the select component to the variable as var2.value.split('.') and it is now showing the tags.
I am using select2 here.
Now there is another problem, when i try to select another table value, the selected tags shows old selection in the display but highlights the current selection in the dropdown.

#3

Have you tried re-initializing select2 on the select HTML control?

#5

I dont know how to do it. Please advise. Below is my code:
Select Component inside >Modal>Form

<select id="select3" class="form-control selectTwo" name="statesOne[]" data-msg-required="" style="width: 100%" dmx-bind:options="scStudyDescription.data.queryStudyDescription" optiontext="studyDescription"
optionvalue="studyDescription" required="" multiple="true" dmx-bind:value="var2.value.split(',')">
</select>

Code for ‘a’ tag

<a href="#" class="btn" data-toggle="modal" data-target="#mdlActiveStudyHistoryUpdate"
dmx-on:click="scStudyDescription.load({modality: modality},true);mdlActiveStudyHistoryUpdate.formUpdatePatientHistory.var2.setValue(studyDescription)">
<i class="fa fa-pencil-square-o"></i>
</a>

Select2 script:

<script>
$(document).ready(function() {
   $('.selectTwo').select2()
});
</script>
#6

On click of the anchor tag, you have to re-initialize select control.
So add this to a tag: onclick="$('.selectTwo').select2();"

#7

Tried it, but didn’t work, it still displays old tag but new selection in dropdown.

FYI I have 2 select components on the page in different modals.
Below new a tag code:

<a href="#" class="btn" data-toggle="modal" data-target="#mdlActiveStudyHistoryUpdate" dmx-on:click="scStudyDescription.load({modality: modality},true);mdlActiveStudyHistoryUpdate.formUpdatePatientHistory.var2.setValue(studyDescription)" onclick="$('.selectTwo').select2();">
<i class="fa fa-pencil-square-o"></i>
</a>
#8

Does running this directly in the browser console update the UI?

#9

Yes, it does changes and updates the UI correctly.

#10

So its just an issue of timing.
Try this:
onclick="setTimeout(function(){$('.selectTwo').select2();},300);"

#11

Got it, its working now with timeout. Thanks Siddhant.

#12

That’s great. :slight_smile:

NOTE: So this timeout approach is not actually a good way to configure this.
This works here because the variable you are using is being updated with local data.
You can probably reduce the timeout to 100ms and it will still work.

For future reference, it would be better to put the “re-initialization” code inside a dynamic success/done/fail/error kind of event. But that would depend on the use case.

#13

I was thinking the same to use without timeout, so i tried putting the re-initialization code on the variable static event on “value updated” and it works. However, it doesnot work on the dynamic event.

Thanks for the help.

1 Like