Unable to set values in Javascript

[bernd-wechner]

I have a DAL widget and I'd like to set its values (multiselect) in Javascript.

Alas have spent hours trying and reading and failing.

There is conflicting advice on-line almost certainly related to versions of select2 and DAL but the latest Select2 doc:

https://select2.org/programmatic-control/add-select-clear-items#selecting-options

is clear. But if I try this I have no luck.

As this is a JS issue, I think we needn't dwell on the python side of it, or? And I would like to offer up a fair JS context to help assess. This is the rather complex widget DAL produced for me:

<select name="Game" id="games" data-placeholder="All Games" data-theme="bootstrap" data-autocomplete-light-language="en-US" data-autocomplete-light-url="/autocomplete/Game/name/all" data-autocomplete-light-function="select2" multiple="" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true">
</select>
<span class="select2 select2-container select2-container--bootstrap select2-container--focus" dir="ltr" style="width: 17px;">
   <span class="selection">
      <span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1">
         <ul class="select2-selection__rendered">
            <li class="select2-search select2-search--inline"><input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list" placeholder="All Games" style="width: 318px;"></li>
         </ul>
      </span>
   </span>
   <span class="dropdown-wrapper" aria-hidden="true"></span>
</span>

and folllowing the doc I try:

$("$games").val([1, 2]);
$("$games").trigger('change');

But nothing happens. Methinks the problem is the value simply isn't retained. I can do this in the browsers console:

$("#games").val([1,2]);
jQuery.fn.init [select#games.select2-hidden-accessible]
$("#games").val();
[]

If I select a view values in the browser itself (clicking the widget) I can then in the console see:

$("#games").val();
(3) ["29", "30", "1"]

and after that oddly it works better but still weirdly. Take this console trace:

> $("#games").val(["29", "30"]);
jQuery.fn.init [select#games.select2-hidden-accessible]
> $("#games").val();
(2) ["29", "30"]
> $("#games").val(["1", "2"]);
jQuery.fn.init [select#games.select2-hidden-accessible]
> $("#games").val();
["1"]
> $("#games").val(["21", "22"]);
jQuery.fn.init [select#games.select2-hidden-accessible]
> $("#games").val();
[]

Wowsers. Flakey or what?

What gives here?

[bernd-wechner]

I slept on it and had a thought. Checked the documentation again and:

https://select2.org/programmatic-control/add-select-clear-items#preselecting-options-in-an-remotely-sourced-ajax-select2

The first line says it. Doh! I've yet to implement a fix, but will close this if that document solves it for me (i.e. if DAL doesn't have some special approach).

[bernd-wechner]

Yep, confirmed this was the issue and solved with an ajax call.