How can I programmatically trigger a YADCF filter input using jQuery?

Question

I have successfully managed to get YADCF working with daterangepicker in all but one respect: I cannot directly trigger the filtering action from the daterangepicker 'apply' button.

Click here for screenshot of daterangepicker with YADCF.

Everything works well if I set the date range and then manually click in the input field (.yadcf_daterangepicker), but I am unable to do this programatically using JS. Can anyone help please?

I have tried the following but it does not work:

$(".applyBtn.btn").click(function() {
    var e = jQuery.Event('keydown', { which: 13 });
    $(".yadcf_daterangepicker").trigger(e);
});

If I place an alert in there, it triggers, so I know that the 'apply' button click is being captured - it's transferring that click to the input field that I need help with please.

UPDATE: click here for a JSFiddle example

UPDATE 2: Following Daniel's help, I used the following code:

$(".applyBtn").click(function() {
    var start = $('.daterangepicker').find('input[name="daterangepicker_start"]').val();
    var end = $('.daterangepicker').find('input[name="daterangepicker_end"]').val();
    yadcf.exFilterColumn(table, [[1, start + ' - ' + end]]);
});

...which works perfectly on the updated fiddle, in that it populates the filter field and actions the filter, but using the same code on my real-world server-side script populates but does not action the filter. I am using all the very latest dependencies, exactly as per the fiddle, in the same order, and in all other respects, everything works as expected.

I spent hours hacking my complex application such that it loads nothing except the dependences on fiddle, but still no joy. I copied as much of my code as possible to a new fiddle (not server-side) and it worked. So I finally manually coded a static data array to my app and removed serverSide:true, processing:true and ajax:{} and suddenly everything works as expected.

Conclusion: something in the server-side JS or process is preventing yadcf.exFilterColumn() working as expected when inside a click wrapper. Any ideass?

UPDATE 3: Following Daniel's further help, I used the following code, which does the trick:

$(".applyBtn").click(function() {
    var start = $('.daterangepicker').find('input[name="daterangepicker_start"]').val();
    var end = $('.daterangepicker').find('input[name="daterangepicker_end"]').val();
    //notice the third parameter *true* in exFilterColumn
    yadcf.exFilterColumn(table, [[1, start + ' - ' + end]], true); 
});

Please provide a simple test page with the filter and apply and I will see whats missing... — Daniel, Apr 03 '18 at 06:56
Thanks Daniel. JSFiddle link added, although I appreciate that this is not a datatables issue as such. — losttheplot, Apr 04 '18 at 14:28

Daniel · Accepted Answer · 2018-04-08T19:38:57.573

0

As to this specific question on how to trigger yadcf programmatically - use the yadcf.exFilterColumn api you can use the yadcf.exGetColumnFilterVal too.

In your example:

$(".applyBtn").click(function() {
    var e = jQuery.Event('keydown', {
      which: 13
    })
    yadcf.exFilterColumn(table, [[1, yadcf.exGetColumnFilterVal(table,1)]]);  
  });

But I recommend to use the range_date filter which can be integrated with jquery-ui / bootstrap-datetimepicker (https://github.com/Eonasdan/bootstrap-datetimepicker) / bootstrap-datepicker (https://github.com/uxsolutions/bootstrap-datepicker)

read docs for more.

Update,

You must add a third parameter true to exFilterColumn

yadcf.exFilterColumn(table, [[1, yadcf.exGetColumnFilterVal(table,1)]], true);

Hopefully will update the docs regarding this one...

edited Apr 08 '18 at 19:38

answered Apr 04 '18 at 21:01

Daniel

36,833
10
119
200

Thanks Daniel. Your suggestion helped me come up with a solution for the non-server-side fiddle, but as you can read in my edit above, the function fails to work in server-side mode. Incidentally, the reason I would like to use daterangepicker, and am spending so much time trying to do so, is because I would like the user to enter a date range into a single filter input at the foot of a date column, not from two remote inputs elsewhere on the page. If I can get daterangepicker working for server-side, it would be the perfect UI solution. – losttheplot Apr 05 '18 at 15:08
then please provide a link to a server based example and write down a simple "expected scenario" and "actual scenario" – Daniel Apr 08 '18 at 07:30
See > http://dev.www.english-tuition-online.co.uk/datatables.php - I have replicated the exact code used on the fiddle, but with an AJAX JSON feed for the data. – losttheplot Apr 08 '18 at 18:18
updated answer, in short add third parameter to `exFilterColumn` , for example `yadcf.exFilterColumn(table, [[3, 'myvalue']], true);` – Daniel Apr 08 '18 at 19:41
you are welcome, b.t.w I suggest you to search in yadcf repo issues / google next time you have a problem, because I gave this solution in github several years ago (forgot about it / to update this method docs :) ) – Daniel Apr 09 '18 at 07:59
I always google things extensively before resorting to asking in posts. In many decades of programming, this and another datatables/yadcf question were the first questions I have ever asked on stackoverflow. As I'm sure you know, if one does not know what keywords define a problem, because one does not understand what the problem is, then one can often completely miss solutions. – losttheplot Apr 10 '18 at 08:54
@losttheplot , it cool :) feel free to ask here anything / anytime, it wasn't a criticism, b.t.w your daterangepicker usage of the text filter is really nice – Daniel Apr 10 '18 at 09:02

How can I programmatically trigger a YADCF filter input using jQuery?

1 Answers1