Select2 initial value not working

Question

I'm using Select2 4.0.2 for CRUD pages. However, when I try to fill/initialize the selectbox in the edit page, it doesn't work for some reason. Why doesn't it work? Here's an example of what I have right now, it should be filled with e-mail address test@gmail.com. https://gyazo.com/92a89f5462c36a8c26f4dcd365fb1fb9

It should be something like this, but I don't get it to work: https://gyazo.com/194fa8b11a61736039a5acda763065ae

<script>
        token = '{{csrf_token()}}';
        $("#mainuser").select2({
            ajax: {
                dataType: "json",
                type: "POST",
                data: function (params) {
                    return {
                        term: params.term,
                        '_token': token,
                        isnew: 'false',
                        partner_id: {{$partner->id}}
                    };
                },
                url: '/partners/getusers',
                cache: false,
                processResults: function (data) {
                    return {
                        results: data
                    };
                }
            },
            "language": {
                "noResults": function () {
                    return "Geen gebruikers gevonden.<br> <a href='/klanten/nieuw' class='btn btn-danger'>Maak nieuwe klant</a>";
                }
            },

            escapeMarkup: function (markup) {
                return markup;
            }
        });
        $("#mainuser").select2('data', {id: 1, text: 'test@gmail.com'});

        // $("#mainuser").select2({...}).select2('data', {...}); doesn't work either...

</script>

What I have right now is the selectbox being populated by AJAX as expected, but not being filled (as how it should be in an edit page). It should be already filled by the `.select2('data', {id:... text: ...}); part but it's not being filled with this value, as you can see in the video, it's still blank. I've read this article but it doesn't work.

You need to run this line `$("#mainuser").select2('data', {id: 1, text: 'test@gmail.com'});` when ajax is done. Because now, you set the value to `test@gmail.com` but this option is not loaded yet. — Mosh Feu, Apr 03 '16 at 09:52
@MoshFeu Tried to use your suggestion but I still can't make it work — Markinson, Apr 03 '16 at 10:31

score 0 · Accepted Answer · answered Apr 03 '16 at 13:28

Found a solution:

<script>
        token = '{{csrf_token()}}';
        var select = $('#mainuser');
        select.select2({
            ajax: {
                dataType: "json",
                type: "POST",
                data: function (params) {
                    return {
                        term: params.term,
                        '_token': token,
                        isnew: 'false',
                        partner_id: {{$partner->id}}
                    };
                },
                url: '/partners/getusers',
                cache: true,
                processResults: function (data) {
                    return {
                        results: data
                    };
                }
            },
            "language": {
                "noResults": function () {
                    return "Geen gebruikers gevonden.<br> <a href='/klanten/nieuw' class='btn btn-danger'>Maak nieuwe klant</a>";
                }
            },

            escapeMarkup: function (markup) {
                return markup;
            }
        });

        var $option = $('<option selected>Loading...</option>').val(1);
        select.append($option).trigger('change'); // append the option and update Select2

        $.ajax({ // make the request for the selected data object
            type: 'POST',
            url: '/partners/getmainuser',
            dataType: 'json',
            data : { '_token': token, 'isnew' : 'false'},
            headers:
            {
                'X-CSRF-Token': '{{csrf_token()}}'
            }
        }).then(function (data) {
            // Here we should have the data object
            $option.text(data.text).val(data.id); // update the text that is displayed (and maybe even the value)
            $option.removeData(); // remove any caching data that might be associated
            select.trigger('change'); // notify JavaScript components of possible changes
        });


</script>

Kinda unfortunate that are obligated to initialize with a complete different AJAX call, but this seemed to be the only option.

Select2 initial value not working

1 Answers1