[YADCF] Reset filter not triggering change event

Cohaven

I'm trying to reset a dependent/child filter whenever the value of the parent filter gets changed. I'm using the following "on change" code to do so. This works fine for when I go into the dropdown and select a new value, but it doesn't work when I click the reset button next to the select list. The following is the code I'm using to perform this task.

    parentFilter.on('change', function() {
        yadcf.exResetFilters(table, [2]);
    });

colin

Hi @Cohaven ,

My thoughts are does the reset button have a click event that calls the same YADCF function? If that all looks good, it would be worth mocking up the problem in a live example, or giving access to your site so we could take nose.

Cheers,

Colin

Cohaven

This is the code the button is executing:

<button type="button" id="yadcf-filter--listDocs-1-reset"
onmousedown="yadcf.stopPropagation(event);"
onclick="yadcf.stopPropagation(event);yadcf.doFilter('clear', '-listDocs', 1); return false;" 
class="yadcf-filter-reset-button ">
x</button>

Here's the doFilter code:

function doFilter(arg, table_selector_jq_friendly, column_number, filter_match_mode) {
        $.fn.dataTableExt.iApiIndex = oTablesIndex[table_selector_jq_friendly];

        var oTable = oTables[table_selector_jq_friendly],
                selected_value,
                column_number_filter,
                columnObj,
                settingsDt = getSettingsObjFromTable(oTable);

        column_number_filter = calcColumnNumberFilter(settingsDt, column_number, table_selector_jq_friendly);

        columnObj = getOptions(oTable.selector)[column_number];
        if (arg === "clear") {
                if (exGetColumnFilterVal(oTable, column_number) === '') {
                        return;
                }
                $("#yadcf-filter-" + table_selector_jq_friendly + "-" + column_number).val("-1").focus();
                $("#yadcf-filter-" + table_selector_jq_friendly + "-" + column_number).removeClass("inuse");
                $(document).data("#yadcf-filter-" + table_selector_jq_friendly + "-" + column_number + "_val", "-1");
                oTable.fnFilter("", column_number_filter);
                resetIApiIndex();

                refreshSelectPlugin(columnObj, $("#yadcf-filter-" + table_selector_jq_friendly + "-" + column_number), '-1');
                return;
        }

        $("#yadcf-filter-" + table_selector_jq_friendly + "-" + column_number).addClass("inuse");

        $(document).data("#yadcf-filter-" + table_selector_jq_friendly + "-" + column_number + "_val", arg.value);

        selected_value = $.trim($(arg).find('option:selected').val());

        if (arg.value !== "-1") {
                yadcfMatchFilter(oTable, selected_value, filter_match_mode, column_number_filter);
        } else {
                oTable.fnFilter("", column_number_filter);
                $("#yadcf-filter-" + table_selector_jq_friendly + "-" + column_number).removeClass("inuse");
        }
        resetIApiIndex();
}

Here's the live example. Note the relationship between the Position and Office filters. try selecting the position, then an office, then reset the Position filter using the button and try again by selecting another Position from the dropdown yourself.
http://live.datatables.net/kagelege/1/edit?js,output

Cohaven

@colin
From what I've seen in other relatively similar posts about YADCF events, I should be able to listen to another DataTables event to achieve similar functionality. I tried draw.dt and search.dt, but they haven't worked. They give "invalid regular expression" syntax errors for some reason.

colin

Hi @Cohaven ,

I just want to be sure I understand the problem. In that live example, is the problem that when I reset the Position filter by pressing 'x', the Office filter retains it's value and isn't also reset?

You said, "Note the relationship between the Position and Office filters. try selecting the position, then an office, then reset the Position filter using the button and try again by selecting another Position from the dropdown yourself." I tried this and thought it behaved as expected! What would you expect to happen in this case?

Cheers,

Colin

Cohaven

Hi @colin ,

"In that live example, is the problem that when I reset the Position filter by pressing 'x', the Office filter retains it's value and isn't also reset?"

That is correct. When you reset the Position filter using the reset button, the Office filter retains its value. When you reset the Position filter by selecting another position value from the dropdown, the Office filter resets its value. That's the difference that I want to avoid. I want both actions on the Position filter to have the same result - the Office filter value getting reset.

The problem appears to be with the fact that the reset button doesn't count as a "change" event. I either need to listen to another event or modify the plugin code to fire the change event once the reset button executes its code. I'm not sure I should be modifying the plugin code and it might be better to engage the plugin owner to do this. As I've stated, I've tried to listen to other events, but they resulted in seemingly unrelated errors.

colin

Gotcha, thanks for the explanation... looking at it now...

C

colin

That was fun - good JS programming practise! I think I've got it - take a look at this example here: http://live.datatables.net/foneqobu/1/edit

The dependencies all work, and the clear buttons clear to the right of the one that was clicked. Can you let me know please if that's behaving how you expected.

Cheers,

Colin

Cohaven

@colin
Oh true, I could have just had an on click listener for the reset button as well! I don't need the age filter affected. Only need the two filters in question. I'll take it from here. Thanks!