TypeError instance is undefined from select2.js

pcpacino2141

When using select_type: select2. I get error TypeError: instance is undefined from select2.js. I found that if only 1 filter is using select2 The error occurs when you click any filter, but when all filters use select2 there is no error? Below is my init

let oTable;
jQuery( document ).ready( function($) {
  'use strict';

  let pageClass = function () {
      let el = $( 'ul.pagination' ).addClass('pagination-sm');
  }

  // define order of table's control element
  let domStyling = "<'row'<'col-sm-6'f><'col-sm-6'lB>>" +
    "<'row'<'col-sm-12'tr>>" +
    "<'row'<'col-sm-5'i><'col-sm-7'p>>";


  oTable = $('table.search-documents').DataTable( {
    deferRender: true,
    dom: domStyling,
    ajax: {
            "url": "/search-for-guidance-json",
            "dataSrc": ""
        },
    processing: true,
    columns: [
            { "data": "title" },
            { "data": "field_associated_media_2" },
            { "data": "field_issue_datetime" },
            { "data": "field_issuing_office_taxonomy" },
            { "data": "field_topics" },
            { "data": "field_final_guidance_1" },
            { "data": "open-comment" },
            { "data": "field_comment_close_date" },
            { "data": "field_docket_number" },
            { "data": "field_regulated_product" },
            { "data": "field_regulated_product_field" },
            { "data": "field_communication_type" }
        ],
    columnDefs: [
            {
                "targets": [ 9 ],
                "visible": false,
                "searchable": false
            },
            { 
                "type": "date",
                "targets": [2, 7]
            },
            {
                "targets": [ 11 ],
                "visible": false,
                "searchable": true
            },
            {
                "targets": [ 10 ],
                "visible": false,
                "searchable": true
            }
        ],
    pageLength: 50,
    searching: true,
    autoWidth: false,
    responsive: true,
    lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
    buttons: [
      {
        extend: 'excel',
        text: 'Export Excel'
      }
    ],
    initComplete: pageClass,
    drawCallback: pageClass
  }); // end datatable

  yadcf.init(oTable, [ // start yadcf
      {
        column_number : 10, // Product
        filter_container_id: 'external_filter_container1',
        filter_reset_button_text: false,
        select_type: 'select2', 
        filter_default_label: ''
      },
      {
        column_number : 5, // Darft or Final
        filter_container_id: 'external_filter_container3',
        filter_reset_button_text: false,
        filter_default_label: ''
      },
      {
        column_number : 3, // FDA Organization
        filter_container_id: 'external_filter_container4',
        filter_reset_button_text: false,
        select_type: 'select2', 
        filter_default_label: ''
      },
      {
        column_number : 6,  // Open for Comment
        filter_container_id: 'external_filter_container5',
        filter_reset_button_text: false,
        filter_default_label: ''
      },
      {
        column_number : 11, // Document Type
        filter_container_id: 'external_filter_container6',
        filter_reset_button_text: false,
        select_type: 'select2', 
        filter_default_label: ''
      },
      {
        column_number : 2, // Issue Date
        filter_container_id: 'external_filter_container7',
        filter_reset_button_text: false,
        filter_type: 'date',
        date_format: 'mm/dd/yyyy',
        filter_default_label: ''
      },
      {
        column_number : 7, // Comment Closing Date on Draft*
        filter_container_id: 'external_filter_container8',
        filter_reset_button_text: false,
        filter_type: "custom_func",
        custom_func: myCustomFilterFunction,
        data: [
            { value: 'days1', label: 'last 7 days'},
            { value: 'days2', label: 'last 30 days'},
            { value: 'days3', label: 'last 60 days'},
            { value: 'days4', label: 'last 90 days'},
            { value: 'days5', label: 'Next 7 days'},
            { value: 'days6', label: 'Next 30 days'},
            { value: 'days7', label: 'Next 60 days'},
            { value: 'days8', label: 'Next 90 days'}
          ]
      },
      {
        column_number : 4, // Topics
        filter_container_id: 'external_filter_container2',
        filter_reset_button_text: false,
        select_type: 'select2',
        filter_default_label: ''
      }
  ]); // end yadcf

}); // end ready function

function myCustomFilterFunction(filterVal, columnVal, rowValues) {

    var found;
    if (filterVal === '') {
        return true;
    }

    switch (filterVal) {
        case 'days1':
            // TODO Need to create the method to filter the results
            break;
        case 'days2':
            // TODO Need to create the method to filter the results
            break;
        default:
            found = 1;
            break;
    }

    if (found !== -1) {
            return true;
  }
  return false;

  
} //end custom function

below is the html
```

Product

  <div class="form-item form-group">
    <label class="control-label" for="edit-field-regulated-product-target-id">Topic</label>
    <span id="external_filter_container2">
      <!-- Yadcf datatable plugin populates this content -->
    </span>
  </div>

  <div class="form-item form-group">
    <label class="control-label" for="edit-field-regulated-product-target-id">Issue Date</label>
    <span id="external_filter_container7">
      <!-- Yadcf datatable plugin populates this content -->
    </span>
  </div>

  <div class="form-item form-group">
    <label class="control-label" for="edit-field-regulated-product-target-id">Darft or Final</label>
    <span id="external_filter_container3">
      <!-- Yadcf datatable plugin populates this content -->
    </span>
  </div>

  <div class="form-item form-group">
    <label class="control-label" for="edit-field-regulated-product-target-id">Organization</label>
    <span id="external_filter_container4">
      <!-- Yadcf datatable plugin populates this content -->
    </span>
  </div>

  <div class="form-item form-group">
    <label class="control-label" for="edit-field-regulated-product-target-id">Open for Comment</label>
    <span id="external_filter_container5">
      <!-- Yadcf datatable plugin populates this content -->
    </span>
  </div>

  <div class="form-item form-group">
    <label class="control-label" for="edit-field-regulated-product-target-id">Document Type</label>
    <span id="external_filter_container6">
      <!-- Yadcf datatable plugin populates this content -->
    </span>
  </div>

  <div class="form-item form-group">
    <label class="control-label" for="edit-field-regulated-product-target-id">Comment Closing Date on Draft*</label>
    <span id="external_filter_container8">
      <!-- Yadcf datatable plugin populates this content -->
    </span>
  </div>

  <span id="reset-all-table-filter">
      <input type="button" onclick="yadcf.exResetAllFilters(oTable);" value="Clear Filters" class="some_btn general_btn">
  </span>

</div>


  <table class="search-fda-guidance-documents display table">
    <thead>
      <tr>
        <th>Summary</th>
        <th>Document</th>
        <th>issue date</th>
        <th>Organization</th>
        <th>Topic</th>
        <th>Guidance Status</th>
        <th>Open for Comment</th>
        <th>Comment Closing Date on Draft</th>
        <th>Docket Number</th>
        <th>Regulated Product hidden</th>
        <th>Regulated Product Field hidden</th>
        <th>Guidance Type hidden</th>
      </tr>
    </thead>
  </table>
```

colin

Hi @pcpacino2141 ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin