Passing a var from a select field to sort a table

eriklely

I am stuck here. I am trying to use data from a form to pass it as a filter for a table. If I use textfield as input it works fine. But when I use a selectfield as input it does not. I cannot figure out what problem is.

Any help is greatly appreciated!

So this is the script to sort the table:

<script type="text/javascript" class="init">
    function filterColumn (i) {
        $('#data-table-asc').DataTable().column(i).search( 
                    $('#col'+i+'_filter').val(),
                    $('#col'+i+'_regex').prop('checked'), 
                    $('#col'+i+'_smart').prop('checked')
            ).draw();
    }
    $('#data-table-asc').DataTable( {
            "order": [[ 0, "asc" ]]
    } );
    $('input.column_filter').on( 'keyup click change', function () {
    filterColumn( $(this).parents('div').attr('data-column') );
} );
} );
</script>

And if I use this a input it works fine:

<div class="input-control text full-size" data-role="input" id="filter_col3" data-column="2">
<label for="PCompany">Company:</label>
<input  type="text" 
name="PCompany" 
value="<%=PCompany%>" 
class="column_filter" 
id="col2_filter" 
    data-validate-func="required"                                   
        data-validate-hint="Company field cannot be empty.">
    <span class="input-state-error mif-warning"></span>
    <span class="input-state-success mif-checkmark"></span>
    <button class="button helper-button clear"><span class="mif-cross"></span></button>
</div>

But this does not work:

<div class="input-control select full-size" data-role="input" id="filter_col3" data-column="2">
<label for="PCompany">Company:</label>
<select     name="PCompany" 
class="column_filter" 
id="col2_filter" 
        data-validate-func="required"                                   
        data-validate-hint="Company field cannot be empty.">
<option value="<%=PCompany(1)%>"><%=PCompany(1)%>"<option>
<option value="<%=PCompany(2)%>"><%=PCompany(2)%>"<option>
    <span class="input-state-error mif-warning"></span>
    <span class="input-state-success mif-checkmark"></span>
</div>

eriklely

.

jLinux

Well in the jQuery, you're using..

$('input.column_filter').on( 'keyup click change', function () {

Since its now a select, you should be using

$('select.column_filter').on( 'change', function () {

Since its no longer just an input, its a select, and you cant keyup on selects

eriklely

That's why I added it to the $('input.column_filter'String).on( 'keyup click change'String, function () { and it does the trick for the textfield, datepicker field and numberpickerfields. Only select gives me a problem. BTW I tried the sollution (again) just to be sure, but unfortunately no luck...

jLinux

I don't think you understood what I was saying.... You're trying to use a CSS selector in jQuery to select select.column_filter as input.column_filter...

Try changing the line:

$('input.column_filter').on( 'keyup click change', function () {

to

$('select.column_filter').on( 'click change', function () {

eriklely

Unfortunately no luck, that's not it... But I get what you mean...tx

jLinux

Try

$( ".column_filter" ).change(function() {

eriklely

You are my hero! Yessss finally. So thank you very much

jLinux

No problem sir, have a good one!