vedmack / yadcf

Yet Another DataTables Column Filter (yadcf)
http://yadcf-showcase.appspot.com/
MIT License
731 stars 285 forks source link

Uncaught TypeError: Cannot read property 'sAjaxSource' of undefined #588

Closed RezbanAndreiTakeOff closed 5 years ago

RezbanAndreiTakeOff commented 5 years ago

Hi,

I'm working with datatables in Rails and I want to add a date range filter to a column.

I defined my datatable like this in javascript

({
  index() {
      return $(function() {
        const myTable = $('#dataTable').DataTable({
          processing: true,
          serverSide: true,
          ajax: $('#dataTable').data('source'),
          columns: [
              {data: "first_name"},
              {data: "last_name"},
              {data: "email"},
              {data: "application_date"},
              {data: "applied_for"},
              {data: "languages"},
              {data: "experience"},
              {data: "cv"},
              {data: "contacted"}
          ]});
        return yadcf.init(myTable, [ {
          column_number: 3,
          filter_type: "range_date",
          datepicker_type: 'bootstrap-datetimepicker',
          date_format: 'dd/mm/yyyy',
          moment_date_format: 'DD/MM/YYYY'
        } ]);});
    }
});

and my datatable is loading properly, like in the picture

Screenshot 2019-07-30 at 17 06 22

but i get this error

Uncaught TypeError: Cannot read property 'sAjaxSource' of undefined

I am using this version of yadcf https://cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.4/jquery.dataTables.yadcf.min.js

and I also decorated the created_at column

def created_at
     helpers.content_tag :span, class: 'time' do
       object.created_at.strftime("%d/%m/%Y")
     end
end

The four select tags from the picture are created like this

<th>
  Applied for
  <%= select_tag :job, options_from_collection_for_select(Job.all, "title", "title"), prompt: "Select..." %>
</th>
<th>
  Known languages
  <%= select_tag :languages, options_for_select(["Ruby", "HTML/CSS", "Javascript", "C/C++", "C#", "Java", "Swift", "Python"]), prompt: "Select..." %>
</th>
<th>
  Experience
  <%= select_tag :experience, options_for_select(["No experience", "1 year", "2 years", "3 years", "5 years", "10+ years"]), prompt: "Select..." %>
</th>
<th>
  CV link
</th>
<th>
  Contacted
  <%= select_tag :languages, options_for_select({"Yes" => "true" , "No" => "false"}), prompt: "Select..." %>
</th>

And they are working based on this function

$(function() {
  return $.extend($.fn.DataTable.defaults, {
    searching: true,
    ordering: true,
    lengthMenu: [10, 25, 50, 100],
    serverSide: true,

    initComplete() {
      return $('.filters input, .filters select', this).on('change', e => {
        const th = $(e.target).closest("th");
        return this.api().column(th.index()).search($(e.target).val()).draw();
      });
    }
  }
  );
});
vedmack commented 5 years ago

Hi, I'll need a link to a test page to see what wrong, but before that please use the latest beta

https://cdnjs.com/libraries/yadcf/0.9.4-beta.28

RezbanAndreiTakeOff commented 5 years ago

I inclued the latest beta, but on my server I have the same error

Here's the test page. I hope it's ok

https://jsfiddle.net/0mLe3zt8/1/

vedmack commented 5 years ago

@RezbanAndreiTakeOff it looks like the error is not related to yadcf, its still remains after commenting out yadcf