使用select2插件进行多选，通过网络中的AJAX获取数据，返回一个空数组

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?

Answer 1

I had same problem. When you are using multiselect, you must also specify values on Nette side (It's probably for some security reasons). Make sure if you have 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"
    }
  ],
}