yadcf - Why no events? I'd like to run some JS after it loads

pejrich

I have a wide datatable, and the filter text boxes look terrible on narrow rows, so I'd like to hide the clear button and add a listener to show the clear button and widen the input on focus.

I am only able to add a class to the input so I need some JS to hide the clear button, but there is not event to add my JS to.

$('.hide_x_after').siblings('button').css('display', 'none');

Any advice?

jLinux

@daniel_r would be the guy to talk to, he created YADCF, its not a DataTables supported plugin.

I agree though, When I try to use the filter_reset_button_text setting, it really screws with the display, Heres the screenshot.

What I wanted to do, is use the Bootstrap style to group the inputs, like so, but I couldn't find a way to do this.

The HTML to accomplish something like that would be..

<div class="input-group date" id="whatever">
    <input type="text" name="search_box" class="form-control">
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

so I was trying to find a way to do that with jQuery, ill let ya know what I come up with.

jLinux

@pejrich - Check this out

1. Go to my alpha demo site
2. Login with un/pw DempAdmin / Password1
3. Go to assets list
4. Click on the [ X ] on the right side of the screen to expand the "tool box"
5. Click the Show Filters at the bottom, and collapse the tool box
6. Focus/blur the filters, to see what ive got so far.

The bug in running into now, is I have it setup so the X button will show up on focus, and hide on blur, but when you go to click on the X button, that would qualify as a "blur", thus it hides the button... hmmmm

Heres the Related CSS (Exclusing Bootstrap CSS)

.yadcf-filter-wrapper {
    display: table !important;
    position: relative !important;
    border-collapse: separate !important;
}
.yadcf-btn-group {
    padding: 0 !important;
    visibility: hidden;
}
.yadcf-btn {
    height: 17px !important;
    padding: 2px 2px !important;
    line-height: 0 !important;
}

And the jQuery

// Add the classes to the buttons, and enclose the btn in a span
$( "button.yadcf-filter-reset-button" )
    .addClass('form-control yadcf-btn')
    .wrap( '<span class="input-group-addon yadcf-btn-group"></span>' );

// Show/hide the clear input button on focus/blur
$('input.yadcf-filter' )
    .focus(function(){
        $( this )
            .next( 'span.yadcf-btn-group' )
            .css('visibility','visible');
    })
    .blur(function(){
        $( this )
            .next( 'span.yadcf-btn-group' )
            .css('visibility','hidden');
    });

pejrich

I managed to get mine working, but I used the DataTables 'draw' event

 $(document).on('draw.dt', function () {//Stuff})

See if that works

jLinux

Oh so you hide the button on each draw event? Did you use the rest of what ibpasted above?

Not sure if the draw event is the best idea, i meanbit draws as you type, so if it disappears, how can you click it

pejrich

I actually decided to hide the button with css. .hide_x_after + button {display:none;} Then I add my JS listeners to the input on the draw event

daniel_r

yadcf is listening to the datatables draw event , so you could really listen to it too, or you can try the init event too , let me know if there is still an issue related to the yadcf