Issue with getting the Select2 remote data

cj1005

Hi,

I'm having a problem trying to use 'Select2' instead of the plain 'Select' as I need to load the data remotely.

My Ajax function is being called and is returning the initialVal as instructed, which works as expected, but when I click the select2 element (or type a string to search), the Ajax request is run and I can see the correct results behind the scenes, but the select2 element does not show the results.

I have added the CSS and JS CDNs, also I have added the editor.select2.js Plug-in

Please see my JS code below:

itkusers_editor = new $.fn.dataTable.Editor( {
            ajax:  'AjaxITKusers.wc',
        table: '#dtitkusers',
        template: '#itkusersForm',
        "idSrc": "recno",
        fields: [
            { label: 'Branch', name: 'itkusers.branch' , type: "select2",
                "opts": {
                    delay: 250,
                    ajax: {
                            url: "AjaxSelect2.wc",
                            dataType: 'json',
                            data: function (params) { return { searchTerm: params.term, ti: "branches", fi: "branch" }; }
                        },
                        processResults: function (response) { return { results: response }; },
                        cache: true
                    },
                        }
            ]
 }); // itkusers Editor

My server response to the initialVal call is as follows:

{ "id": "Guildford", "text": "Guildford" }

And when for example I type "w" into the search box the server response is:

[ { "id": "Wandsworth", "text": "Wandsworth" }, { "id": "Wimbledon", "text": "Wimbledon" }, { "id": "Woking", "text": "Woking" } ]

But this does not show.

I have done some console.log() tests and I can see the 'success' function is called on the initialVal but not on the search?

I'm quite new to web development and I suspect I'm missing something obvious, but any advice would be VERY welcome as I've been banging away at this for 2 days and have hit a wall

Kind Regards,
Chris

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

cj1005

Just to extend on the above, looking at the plug-in code, I can see it determines whether or not to use Ajax by looking to see if an option[value=<currentvalue>] exists or not:

if (conf._input.find('option[value="' + val + '"]').length === 0) { needAjax = true; }
But after the initialVal is applied an option[value=Guildford] does exist, so I guess this is why the success function does not run when I do subsequent Select2 requests.

Not sure if this helps, but seems strange.

Thanks, Chris

cj1005

ps. If it helps I can share my webpage (via a pm as needs credentials) for debugging?

allan

Hi,

Yes, if you could drop me a PM with the details, that would be great.

Thanks,
Allan

cj1005

If anyone is willing and able to take a look at the above issue, then to see a live example please go to: https://wd4g.com/WCGateway/WDLogin.wc

Enter the username and password both as: allan

Then you will see a Sele2 Test option, click this and you will see a list of users, when editing a user, there is a Select2 for the Branch, this is where my issue is.

Also, you will notice a Test2 menu option, this has different variations of Select2 successfully working with Ajax, but outside of the Datatable Editor.

Any help or suggestions would be really appreciated.

Chris

allan

Hi Chris,

Sorry for the delay in replying here! I've sent you a PM, but also copying it in here.

Looking at the Select2 documentation, I think you might need to have your server return data in the format:

{
  "items": [
    { "id": ..., "name": ... },
    ...
  ]
}

i.e. basically what you have, but with the object and items parameter surrounding it. If you do that for the non-initial value, I think that will be how Select2 uses the remote data. It isn't currently hitting the Editor code when just typing in the input - only when setting the value (i.e. the initialisation of the form edit).

Regards,
Allan

cj1005

Hi Allan,

Thanks for getting back to me.

I had tried that format previously, that is why I then tried to replicate the same format as the initialval load as this was working.

Anyway, I reverted back to the format you mentioned and still no luck, the new Ajax response format is as follows:

   "items": [
          { "id": "A3 Robinhood", "name": "A3 Robinhood" },
          { "id": "Ash", "name": "Ash" },
          { "id": "Camberley", "name": "Camberley" },
          { "id": "Canterbury", "name": "Canterbury" },
          { "id": "Chertsey", "name": "Chertsey" },
          { "id": "Guildford", "name": "Guildford" },
          { "id": "Kingston", "name": "Kingston" },
          { "id": "Leatherhead", "name": "Leatherhead" },
          { "id": "Wandsworth", "name": "Wandsworth" },
          { "id": "Wimbledon", "name": "Wimbledon" },
          { "id": "Woking", "name": "Woking" },
          { "id": "New Malden", "name": "New Malden" },
          { "id": "South Wimbledon", "name": "South Wimbledon" }
     ]
 }

I was able to get a Select2 working without Ajax, so I think it is something on the Ajax response that is failing, any other ideas?

Also, I have changed the password to access my webpage for security reasons.
I will pm this to you now.

Thanks,
Chris

cj1005

For future reference, the issue was in the results file, it needed to be in this format:

{
   "results": [
          { "id": "A3 Robinhood", "text": "A3 Robinhood" },
          { "id": "Ash", "text": "Ash" },
          { "id": "Camberley", "text": "Camberley" },
          { "id": "Canterbury", "text": "Canterbury" },
          { "id": "Chertsey", "text": "Chertsey" },
          { "id": "Guildford", "text": "Guildford" },
          { "id": "Kingston", "text": "Kingston" },
          { "id": "Leatherhead", "text": "Leatherhead" },
          { "id": "Wandsworth", "text": "Wandsworth" },
          { "id": "Wimbledon", "text": "Wimbledon" },
          { "id": "Woking", "text": "Woking" },
          { "id": "New Malden", "text": "New Malden" },
          { "id": "South Wimbledon", "text": "South Wimbledon" }
     ]
 }

The key being I was using "items": [ etc... ] but it needed to be "results": [ etc... ]

Thank to Allan for pointing me in the right direction.
Ta, Chris