带有select2插件的multiselect以及通过nete中的AJAX数据返回空数组

时间:2019-03-08 13:53:51

标签: php ajax jquery-select2 multi-select nette

我在JS中有此代码。数据结果是通过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;
        }


    }
});

处理将数据发送到JS:

public function handleSelect2Array()
{

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

在nette中建立工厂

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

演示者的东西

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

最后,这是我在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>

一切正常。我可以在页面上的多重选择框中选择多个内容。问题是,当我单击提交按钮时。我从表单中获取所有其他值,但是multiselect返回空数组。我曾尝试在nette中玩有关ajax的代码片段和其他内容,但是我发现问题很可能出在select2的配置中……我在做什么错了?

1 个答案:

答案 0 :(得分:1)

我有同样的问题。使用多重选择时,还必须在Nette端指定值(可能出于安全原因)。确保双方都有相同的ID。 :)

Nette表格:

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

select2的JSON响应:

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