Select2 inline editing with AJAX data source - current value

ralfeus

Hi all,
I hope my question is rather standard one and it's just something I've missed in configuration.

I use Select2 plug-in for inline editing of the field.
When I use static list of options and try to edit a field the current value appears there:

            {
                label: 'Customer',
                name: 'customer_id',
                type: 'select2',
                options: g_customers
            }

However when I get options using AJAX and try to edit a field the current value is empty:

            {
                label: 'Customer',
                name: 'customer_id',
                type: 'select2',
                 opts: {
                     ajax: {
                         url: '/api/v1/admin/order/subcustomer',
                         processResults: data => ({
                             results: data.map(i => ({
                                 text: i.name,
                                 id: i.id
                             }))
                         })
                     }
                 }
            }

but the options list is built properly:

How do I make a current value to appear when editing is started?

allan

Hi,

I suspect the Ajax script isn't handling the initialValue property. Can you give me a link to your page so I can take a look and debug it please?

Allan

ralfeus

I have no initialValue property. I saw mention of one here but didn't understand what means "must be able to accept a request with the parameters: initialValue:true and value:..." nor found it anywhere in Select2 documentation. Would you please elaborate on that or point to right direction?

colin

There's some discussion of the initialvalue here that may help,

Coln

ralfeus

As far as I've got so far you can provide initialValue: true in the opts for a field and it sends initialValue and value parameters to the server side. But after that the input gets cleaned. Because the server response doesn't match Select2 format I have to do a response transformation using processResults property. However even though I set selected: true property there for desired item the input remains empty.

ralfeus

Ok, I've figured that out.
When Select2 input is activated, it sends a query to the API endpoint with parameters initialValue: true and value:{{ID of the field being edited}}. The server has to respond with the object matching that ID in format of Select2:

{
  id: # Value for select
  text: # Label to show
}

it doesn't invoke processResults and I couldn't see any other way how the response can be transformed by the client side at all therefore proper object should be provided directly by the server side.

allan

Thanks for posting back - good to hear you have a solution for this.

We've been thinking about doing a tight integration with Select2 or Selectize, where we'd handle this kind of thing automatically. That will hopefully come in a future update.

Allan

Maikel

@allan is there still a plan to do a thight integration with select2/selectize?

we are currently using select2 but we face a lot of problems in combination with the editor.

allan

No specific plans at this time. Development work is currently focused on DataTables 2. What specific issues are you having with Select2? If you create a new thread with a link to a test case showing the issues, hopefully we can get them resolved.

Allan