0

I have an old web application that already uses select2 v3.3.1 and powered by jQuery 1.8.2. I implemented the select2 pagination but got "Error: Option 'ajax' is not allowed for Select2 when attached to a element." in the console. I swapped select2 v3.3.1 with select2 v4.0.11 and the data is returning from the PHP script but not displaying on the select element.

My question is: Is the select options not showing because of the jQuery version and if so, how can I use noConflict to resolve it OR can it be corrected using multiple versions of select2.

Example code:

                   $('.search-diagnosis').select2({
                      placeholder: 'Select an item',
                      minimumInputLength: 5,
                      ajax: {
                        url: 'path/to/php/script',
                        dataType: 'json',
                        delay: 250,
                        data: function (params) {
                          return {
                            search: params.term, // search term
                            page: params.page || 1,
                            page_limit: 100
                          };
                        },
                        processResults: function (data, params) {
                          params.page = params.page || 1;
                          return {
                            results: data.results,
                            pagination: {
                              more: (params.page * 100) < data.total_count
                            }
                          };
                        },
                        cache: true
                      }
                    });

-------------------
Sample return data:
-------------------
{
  "results": [
    {
      "id": "5039",
      "text": "MALARIA"
    },
    {
      "id": "8957",
      "text": "MALARIA AND ACUTE RTI"
    },
    {
      "id": "8952",
      "text": "MALARIA AND BRONCHITIS"
    },
    {
      "id": "9027",
      "text": "MALARIA AND DIARRHOEA"
    },
    {
      "id": "5043",
      "text": "MALARIA AND ENTERIC FEVER"
    },
  ],
  "total_count": 5
}
SaAy
  • 9
  • 2
  • I have been able to make the 2 versions of Select2 worked following the method in https://stackoverflow.com/questions/33962395/select2-multiple-versions-on-same-page-site but while the old Select2 elements are working fine, the Select2 pagination still not showing the fetched data. – SaAy Nov 03 '19 at 08:35

1 Answers1

0

I discovered that Select2 was not loading the ajax data because it is embedded in a modal. I just included:

dropdownParent: $("#modalId"),

as part of the Select2 pagination options and it is fine now.

SaAy
  • 9
  • 2