Range Slider - External Container creating extra Div's

[jawa-the-hutt]

Note: This issue only happens under the following conditions:

1. I load the data via Ajax
2. I have the range slider in an external container

If I put a range slider filter in an external container and move the slider, then it is creating extra Div's that are empty. I noticed this originally because of some CSS rules I had, the extra Div's were actually causing the page to grow in height. I took the CSS rules out, but the DIV's are still created, but not shown and the page does not grow in height.

From tracking what is going on in the source code, it appears that what is going on is that every time the the table draws, the

$(document).on("draw.dt", oTable.selector, function (event, ui) {
     appendFilters(oTable, yadcf.getOptions(ui.oInstance.selector), ui.oInstance.selector);
});

code at line 1946 is appending a new Div.

Here is a look at the HTML that get's created for the container:

<div class="ISGTableFilterContainer" id="SalesCommitToolOppsTableEstRevenueExternalFilterContainer">
    <div id="yadcf-filter-wrapper-SalesCommitToolOppsTableEstRevenueExternalFilterContainer" class="yadcf-filter-wrapper">
        <div onclick="yadcf.stopPropagation(event);" id="yadcf-filter-wrapper--SalesCommitToolOppsTable-9" class="yadcf-filter-wrapper">
            <div id="yadcf-filter-wrapper-inner--SalesCommitToolOppsTable-9" class="yadcf-number-slider-filter-wrapper-inner">
                <div id="yadcf-filter--SalesCommitToolOppsTable-slider-9" class="yadcf-filter-range-number-slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false">
                    <span class="yadcf-filter-range-number-slider-min-tip-hidden hide">5000</span><span class="yadcf-filter-range-number-slider-max-tip-hidden hide">485267</span>
                <div class="ui-slider-range ui-widget-header ui-corner-all inuse" style="left: 7.101466475939425%; width: 92.89853352406058%;"></div>
                <a class="ui-slider-handle ui-state-default ui-corner-all yadcf-filter-range-number-slider-min-tip inuse" href="#" style="left: 7.101466475939425%;">
                    <div id="yadcf-filter--SalesCommitToolOppsTable-min_tip-9" class="yadcf-filter-range-number-slider-min-tip-inner">39106</div>
                </a>
                <a class="ui-slider-handle ui-state-default ui-corner-all yadcf-filter-range-number-slider-max-tip" href="#" style="left: 100%;">
                    <div id="yadcf-filter--SalesCommitToolOppsTable-max_tip-9" class="yadcf-filter-range-number-slider-max-tip-inner">485267</div>
                </a>
            </div>
        </div>
        <input value="x" type="button" onclick="yadcf.stopPropagation(event);yadcf.rangeNumberSliderClear('-SalesCommitToolOppsTable',event); return false;" class="yadcf-filter-reset-button range-number-slider-reset-button"></div>
    </div>
    <div id="yadcf-filter-wrapper-SalesCommitToolOppsTableEstRevenueExternalFilterContainer" class="yadcf-filter-wrapper"></div>
    <div id="yadcf-filter-wrapper-SalesCommitToolOppsTableEstRevenueExternalFilterContainer" class="yadcf-filter-wrapper"></div>
    <div id="yadcf-filter-wrapper-SalesCommitToolOppsTableEstRevenueExternalFilterContainer" class="yadcf-filter-wrapper"></div>
    <div id="yadcf-filter-wrapper-SalesCommitToolOppsTableEstRevenueExternalFilterContainer" class="yadcf-filter-wrapper"></div>
    <div id="yadcf-filter-wrapper-SalesCommitToolOppsTableEstRevenueExternalFilterContainer" class="yadcf-filter-wrapper"></div>
    <div id="yadcf-filter-wrapper-SalesCommitToolOppsTableEstRevenueExternalFilterContainer" class="yadcf-filter-wrapper"></div>
    <div id="yadcf-filter-wrapper-SalesCommitToolOppsTableEstRevenueExternalFilterContainer" class="yadcf-filter-wrapper"></div>
    <div id="yadcf-filter-wrapper-SalesCommitToolOppsTableEstRevenueExternalFilterContainer" class="yadcf-filter-wrapper"></div>
</div>

Notice the last 8 lines. Every point that slider moves, one of these Div's is created.

FWIW, here's how I'm setting things up:

yadcf.init(oTable, [
    {
        column_number: 9,
        filter_container_id: "SalesCommitToolOppsTableEstRevenueExternalFilterContainer",
        filter_type: "range_number_slider"
    }
]);

Also, FWIW, here's my Ajax call in the table setup. I don't think it matters that I'm calling localstorage, as this will also happen if I make an Ajax call to a .txt file like in your 1.10 load from Ajax example.

ajax: function (data, callback, settings) {
    callback(
      JSON.parse(localStorage.getItem(LocalStorageKeyname))
    );
},

[vedmack]

taking me a while , and still its no the final fix, but I'm getting there...
you can grab the 0.8.3.beta.5 from https://github.com/vedmack/yadcf/tree/master/lab

[vedmack]

Fixed in 0.8.3.beta.6

[jawa-the-hutt]

thanks. that worked. Noticed one more small thing not related to the range slider issue, but related to ajax. I'll open a new issue.

[stt]

With this fix if filter_container_id is not defined then the whole column header gets emptied, as can be seen in the second table on this page
http://yadcf-showcase.appspot.com/DOM_Ajax_Multiple_1.10.html

Perhaps this line should do something like this instead?

$('.yadcf-filter-wrapper', filter_selector_string).remove();

[vedmack]

@stt , thanks for pointing me to this issue with empty header , I actually noticed this several days ago , and haven't had the time to look at this, anyhow, I refactored that function now and fixed this issue. will be released in 0.8.5.beta.2