Multiselect with select2 plugin with data via AJAX in nette return an empty array

Question

I have this code in JS. Data results are loaded via handle from Presenter.

      $('.selectTypeAhead').select2({
            multiple: true,
            ajax: {
                url: url,
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        query: params.term,
                        page: params.page || 1
                    };
                },
                processResults: function (data, params) {
                    return {
                        results: JSON.parse(data.results),
                        pagination: {
                            more: true
                        }
                    };
                },
                cache: true
            },
            escapeMarkup: function (markup) {
                return markup;
            },
            minimumInputLength: 2,
            language: 'cs',
            templateResult: function (result) {
                return '<div>' + result.text + '</div>'
            },
            templateSelection: formatRepoSelection
        });

        function formatRepoSelection(repo) {
            return repo.full_name || repo.text;
        }


    }
});

Handle sending data into JS:

public function handleSelect2Array()
{

    $testData[] = [
        'id'=> '1',
        'text' => 'example'
    ];
    $this->payload->results = json_encode($testData);
    $this->sendPayload();
}

Form factory in nette

 public function createForm()
{
    $form = new Form();
    $form->addMultiSelect('multiselect', 'label description' );
    $form->addSubmit('send', 'Uložit');
    return $form;
}

Presenter stuff

   protected function createComponentForm()
{
    $form = $this->FormFactory->createForm();
    $form->onSuccess[] = [$this, 'FormSucceeded'];     
    return $form;
}

And finally, here is my latte template in nette:

     <div class="container">
        {snippet examplesnippet}
            {form Form, class=>'form'}
            <div class="modal-body">

                <div n:class="form-group">
                    <div class="input-group" id="select2example" data-link=" 
                     {link select2Array!}">
                        <div class="input-group-addon">
                            {label multiselect}
                        </div>
                            {input multiselect, class=>' form-control selectTypeAhead'}
                    </div>
                </div>
            {/form}
        {/snippet}
      </div>

Everything works all right. I can select multiple contents in my multiselect box on the page. Problem is, when I click on submit button. I get all other values from the form, but the multiselect returns empty array. I have tried to play with snippets and stuff around ajax in nette, but I found out that the problem is most possibly in configuration of select2...what am I doing wrong?

Jiří Juřica · Answer 1 · 2022-12-02T16:07:32.227

I had the same problem. When you use multiselect, you must specify values on Nette side also (it's probably for some security reasons). Make sure you have the same IDs on both sides. :)

Nette form:

$form->addMultiSelect('multiselect', 'label description', [
1 => 'item',
2 => 'another item'
] );

JSON response for select2:

{
  "results": [
    {
      "id": 1,
      "text": "item"
    },
    {
      "id": 2,
      "text": "another item"
    }
  ],
}

Multiselect with select2 plugin with data via AJAX in nette return an empty array

1 Answers1