Select2 inline editing with AJAX data source - current value

Select2 inline editing with AJAX data source - current value

ralfeusralfeus Posts: 23Questions: 5Answers: 1

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?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 54,716Questions: 1Answers: 8,560 Site admin

    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

  • ralfeusralfeus Posts: 23Questions: 5Answers: 1

    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?

  • colincolin Posts: 12,657Questions: 0Answers: 2,163

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

    Coln

  • ralfeusralfeus Posts: 23Questions: 5Answers: 1

    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.

  • ralfeusralfeus Posts: 23Questions: 5Answers: 1
    Answer ✓

    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.

  • allanallan Posts: 54,716Questions: 1Answers: 8,560 Site admin

    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

Sign In or Register to comment.