Issue with getting the Select2 remote data

Issue with getting the Select2 remote data

cj1005cj1005 Posts: 142Questions: 45Answers: 1
edited September 2020 in Free community support

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 :wink:

Kind Regards,
Chris

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

This question has an accepted answers - jump to answer

Answers

  • cj1005cj1005 Posts: 142Questions: 45Answers: 1
    edited September 2020

    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

  • cj1005cj1005 Posts: 142Questions: 45Answers: 1

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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Hi,

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

    Thanks,
    Allan

  • cj1005cj1005 Posts: 142Questions: 45Answers: 1

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    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

  • cj1005cj1005 Posts: 142Questions: 45Answers: 1

    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

  • cj1005cj1005 Posts: 142Questions: 45Answers: 1

    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

This discussion has been closed.