Datatables And Select2

Datatables And Select2

visotronicavisotronica Posts: 4Questions: 2Answers: 0

So I've just found a problem and I have no way to fix this right now.

So, if you use a datatable with a select2:
* (Example - Bottom of the page (no publicity intended))
* This one won't trigger the error because a datatable parameter is not set yet.

If you set the scrollY parameter an error will trigger:
* Uncaught TypeError: Cannot read property 'select2' of undefined

At first I thought this was a select2 problem... then I debugged and found that using or not using this parameter will trigger or not trigger this error.
On second thought this might be a problem of select2 as well.

I just would like someone to help me.
Thanks :smile:

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,300Questions: 26Answers: 4,769

    I'm a bit confused with your problem description. The example you linked to doesn't appear to use select2.

    I updated one of my column search with select2 examples to use scrollY and it seems to work:
    http://live.datatables.net/bixikujo/1/edit

    If my example doesn't help then please post a link to your page are a test case showing the issue.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • visotronicavisotronica Posts: 4Questions: 2Answers: 0

    Dear kthorngren, actually your example provides the same error as mine.

    Check it out :smile:

    imgur - Error

  • kthorngrenkthorngren Posts: 20,300Questions: 26Answers: 4,769

    Interesting. We have a test case for @allan and @colin to look at.

    Kevin

  • allanallan Posts: 61,715Questions: 1Answers: 10,106 Site admin

    Looks like it is a Select2 issue, but its already been fixed :-) updated example.

    Basically what was happening is that DataTables will clone the contents of the footer and use them in a hidden element when the table is scrolling, so make the columns all line up.

    Select2 (4.0.5 and earlier) uses:

          var $all = $('.select2.select2-container--open');
    
          $all.each(function () {
            var $this = $(this);
    
            if (this == $select[0]) {
              return;
            }
    
            var $element = $this.data('element');
    
            $element.select2('close');
          });
    

    So it finds the cloned element, but there is no element data point since the clone doesn't include the data. Since there is no condition to check that element was found, an error is thrown.

    Looks like 2.0.6 is going to resolve this :).

    Allan

  • visotronicavisotronica Posts: 4Questions: 2Answers: 0
    edited October 2018

    Good night everyone I actually posted a report here:

    Select2 Github Issue

    I'll add a comment there redirecting to this forum post is it ok?
    Thanks :)

    BTW: @allan "Looks like 2.0.6 is going to resolve this." you meant 4.0.6?
    And one other problem is, on focus if you click on any other place different from the select2 dropdown or other select2 it won't close the options list.

  • allanallan Posts: 61,715Questions: 1Answers: 10,106 Site admin
    edited October 2018 Answer ✓

    I'll add a comment there redirecting to this forum post is it ok?

    Absolutely.

    "Looks like 2.0.6 is going to resolve this." you meant 4.0.6?

    Oops. Yes!

    on focus if you click on any other place different from the select2 dropdown or other select2 it won't close the options list.

    That's fixed with 4.0.6 preview is it not?

    Allan

This discussion has been closed.