DataTables showed contents disappear after a couple of filtering commands

[MrCsabaToth]

I have some basic 2-3 column DataTables with Mvc.jQuery.DataTables. When you first navigate to any of these pages, the content is properly displayed. Then you apply some filter texts, delete filters, etc. Pretty soon, the content just disappears. Reloading of the page doesn't help, even Ctrl+refresh. I don't see any error messages in the development console of the browser (IE, FF, Chrome). I need to restart the debug session to get back to the content.

Anyone else experienced this? I don't have a demo for this unfortunately.

[mcintyre321]

Is it making requests (use fiddler)? Are empty one being cached perhaps? On 31 Aug 2015 1:10 am, "Csaba Toth" notifications@github.com wrote:

I have some basic 2-3 column DataTables with Mvc.jQuery.DataTables. When you first navigate to any of these pages, the content is properly displayed. Then you apply some filter texts, delete filters, etc. Pretty soon, the content just disappears. Reloading of the page doesn't help, even Ctrl+refresh. I don't see any error messages in the development console of the browser (IE, FF, Chrome). I need to restart the debug session to get back to the content.

Anyone else experienced this? I don't have a demo for this unfortunately.

— Reply to this email directly or view it on GitHub https://github.com/mcintyre321/mvc.jquery.datatables/issues/130.

[MrCsabaToth]

I don't see any requests made in the debugger tools of the browsers. I'll investigate this further, it can happen that it's some problem in my code.

[mcintyre321]

Make sure you grab the latest version, the packages were broken over the weekend.

On 31 August 2015 at 17:33, Csaba Toth notifications@github.com wrote:

I don't see any requests made in the debugger tools of the browsers. I'll investigate this further, it can happen that it's some problem in my code.

— Reply to this email directly or view it on GitHub https://github.com/mcintyre321/mvc.jquery.datatables/issues/130#issuecomment-136422507 .

[MrCsabaToth]

I debugged this and what happens is the following. In one case I have a table which receives entities with two properties: "RangeName" and "Value". The framework infers these and automatically shows them as column titles, and on top of that they are also displayed as a the placelholder text for the column filter controls. Somehow that placeholder text gets leaked into the data query as a real search phrase. Since there's no RangeName content which matches "RangeName", nothing is displayed suddenly. If I try to clear that text, then the other column's placeholder leaks into the search phrase.

[MrCsabaToth]

So this must be some kind of bug with the interaction between the DataTables and the column filter. Here's the partial View which defines my table:

    @using Xyz
    @using Xyz.Controllers
    @using Xyz.Models
    @using Mvc.JQuery.DataTables
    @using Mvc.JQuery.DataTables.Serialization

    <script type="text/javascript" src="~/Scripts/jquery-2.1.4.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery-ui-1.11.4.js"></script>

    <script type="text/javascript" src="~/Scripts/jquery.dataTables.js"></script>
    <link rel="stylesheet" href="~/CSS/jquery.dataTables.css" />

    <script type="text/javascript" src="/Content/jquery-datatables-column-filter/jquery-ui-timepicker-addon.js"></script>
    <link rel="stylesheet" href="/Content/jquery-datatables-column-filter/jquery-ui-timepicker-addon.css" />

    <link rel="stylesheet" href="/Content/jquery-datatables-column-filter/media/js/jquery.dataTables.columnFilter.css" />
    <script type="text/javascript" src="/Content/jquery-datatables-column-filter/media/js/jquery.dataTables.columnFilter.js"></script>

    @{
        var vm = Html.DataTableVm("table-id", (ProjectsController p) => p.GetReportData(null));

        vm.ColumnFilter = true;
        vm.StateSave = true;
        vm.LengthMenu = LengthMenuVm.Default();
        vm.PageLength = 25;
        vm.ColVis = false;
    }

    @Html.Partial("DataTable", vm)

[MrCsabaToth]

And the final View:

    @using Xyz.Controllers
    @using Mvc.JQuery.DataTables

    @{
        ViewBag.Title = "Project Report";
    }

    @section Styles {
        @Styles.Render("~/CSS/projectreport")
    }

    <div>
        <h1>Data Report for project</h1>
    </div>

    @Html.Partial("_ReportTable")

    @section Scripts {
        @Scripts.Render("~/bundles/projectreport")
    }

Since the code is so few lines (which actually is the advantage of Mvc.Jquery.Datatables, that's why I use it: to get rid of plumbing code), I'm not sure what did I do wrong. Maybe it's something with the initialization?

[MrCsabaToth]

The same bug happens right now with all of my other Mvc.Jquery.Datatables too.

[mcintyre321]

Could you fork it and make it happen in the example project? On 6 Sep 2015 02:04, "Csaba Toth" notifications@github.com wrote:

The same bug happens right now with all of my other Mvc.Jquery.Datatables too.

— Reply to this email directly or view it on GitHub https://github.com/mcintyre321/mvc.jquery.datatables/issues/130#issuecomment-138015996 .

[MrCsabaToth]

I couldn't reproduce it yet with the online example. Maybe I'll slim down an example project later. Until then I took some screenshots. Notice, that for whatever reason I have two clear buttons, a larger and a smaller x. That's an anomaly I have a feeling has to do something with the problem. Maybe some jQuery addon is interfering?

[MrCsabaToth]

The DOM looks like similar for the control though:

<span class="filter_column filter_text">
    <input class="text_filter form-control x" type="text" placeholder="RangeName" rel="0">
</span>

[MrCsabaToth]

Also notice that the placeholder text comes out bold looking almost the same as the header above it. That's also different compared to the on-line demo.

[MrCsabaToth]

I noticed that the on-line demo uses 1.11 jQuery while I'm on v2+. I'll try to downgrade it and see if it helps. I'll also try to search for which jquery addon or rouge thing interferes regarding the clear button. Any advice is welcome

[MrCsabaToth]

It didn't help to downgrade to jQuery 1.11.3 NuGet package, but when I turn off the state save, that cures the bug: //vm.StateSave = true;

[MrCsabaToth]

So probably this is the combination of this rogue extra clear button's cause interfering with the state saving mechanism. Originally I turned off state saving so at least after reload the bug would go away.

[MrCsabaToth]

Correction: with StateSave not turned on the error doesn't go away completely. But refresh can help.

[mcintyre321]

Does your data contain quotes? Could be some code that doesn't handle escape characters On 6 Sep 2015 20:25, "Csaba Toth" notifications@github.com wrote:

Correction: with StateSave not turned on the error doesn't go away completely. But refresh can help.

— Reply to this email directly or view it on GitHub https://github.com/mcintyre321/mvc.jquery.datatables/issues/130#issuecomment-138117011 .

[MrCsabaToth]

Workaround: I turned off the per column filters but provide general search box.

[mcintyre321]

There must still be something unusual about your setup, but I'm not sure what it could be. Glad you've managed to work around it.