[YADCF] Reset filter not triggering change event

[YADCF] Reset filter not triggering change event

CohavenCohaven Posts: 7Questions: 2Answers: 0
edited April 2018 in Free community support

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]);
    });

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • CohavenCohaven Posts: 7Questions: 2Answers: 0
    edited April 2018

    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

  • CohavenCohaven Posts: 7Questions: 2Answers: 0
    edited April 2018

    @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.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • CohavenCohaven Posts: 7Questions: 2Answers: 0

    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.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

    C

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    Answer ✓

    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

  • CohavenCohaven Posts: 7Questions: 2Answers: 0

    @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!

This discussion has been closed.