Selected value not showing sometimes

Wappler General Need Help
1

Hi there,

On my edit form, the existing value of a select field is not showing up sometimes, but if I refresh the page sometimes it shows up. I have no idea why this is happening but the values from server connect are being passed just fine.

image image

<select id="inp_FKspokenLanguages" class="form-control select" name="FKspokenLanguages" dmx-bind:value="sc_editSpecialist.data.repeatLocations[0].FKspokenLanguages" dmx-bind:options="sc_langList.data.q_langList" optiontext="language" optionvalue="languageID"><option value="">Choose language</option> </select>

Does anyone know why this is happening, I am having the same issue on 2 other select fields.

2

Try adding a serverconnection.load to the dynamic success event to refresh the data on save, obviously selecting your server connection.

image
image698×701 46.6 KB

3

Hey @Hyperbytes,

Thanks for trying to help.

I think I figured out the problem. I am using select2 js plugin to customize the select fields so apparently select2 only recognized the 'selected' field if it has id property.

Wappler has the value property on the options of select fields so I need to map the value property to id in order for select2 to recognize the selected field.

Luckily select2 has some documentation around this. They are mentioning the following:

Select2 requires that the id property is used to uniquely identify the options that are displayed in the results list. If you use a property other than id (like pk ) to uniquely identify an option, you need to map your old property to id before passing it to Select2.

If you cannot do this on your server or you are in a situation where the API cannot be changed, you can do this in JavaScript before passing it to Select2:

    var data = $.map(yourArrayData, function (obj) {
      obj.id = obj.id || obj.pk; // replace pk with your identifier

      return obj;
    });

Do you know how can I map values returned from server connect to an array. Right now when I am binding them to an arrray from app connect I am getting [object] response.

4

Sorry, not something i can help with personally. I would use CSS to do customisation, rarely use plugins like that

5

I came up with a solution for this so thought I would leave it here. I run this on the onshown static event of the modal the select elements are in. No need to do have the value field for your selects to be ‘id’.

function selectSelects(){
$(’.select’).trigger(‘change’);
}

1 Like