IE8 Child row issue

iggyweb

I am having difficulty using Child row functionality as demonstrated here https://datatables.net/examples/api/row_details.html when using IE8.

The DataTable is rendering and working correctly, but if I click the plus icon while using IE8 the child row does not appear.

I am using C# MVC framework, below is the code for selecting the various versions of jQuery:

<!--[if lt IE 9]> @Scripts.Render("~/bundles/jqueryold") <![endif]--> <!--[if gte IE 9]><!--> @Scripts.Render("~/bundles/jquery") <!--<![endif]-->

To translate bundles/jqueryold is actually jquery-1.11.3.js and bundles/jquery is jquery-2.1.4.js

Any assistance would be much appreciated :-)

jLinux

You wont get much here with anything related to C#, if you can reproduce the error using just jQuery on something like live.datatables.net, then we can try and help

iggyweb

It will be a little difficult to produce on live.datatables.net as I am generating dynamic content, I am not getting an error, just that if you click the plus icon, it wont show or hide the content, I have attached to the server using remote debugger and can confirm that clicking the icon does not initialise the fnOpen function.

<script language="javascript" type="text/javascript">
    $(document).ready(function() {
        var oTable;
        $('#ietest tbody td img').click(function() {
            var nTr = this.parentNode.parentNode;

            if (this.src.match('details_close')) {
                this.src = "/Images/details_open.png";
                oTable.fnClose(nTr);
            } else {
                if (this.src.match('details_open')) {
                    this.src = "/Images/details_close.png";

                    $.get("/GetData?id=" + $(this).attr("rel"), function(employees) {
                        oTable.fnOpen(nTr, employees, 'details');
                    });
                }
            }
        });

        oTable = $('#ietest').dataTable({
            responsive: true,
            "pagingType": "full",
            "iDisplayLength": 10,
            "aLengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
            "aoColumns": [
                { "bSortable": false, "bSearchable": false },
                null,
                null,
                null
            ],
            "order": [[1, "asc"]]
        });
    });
    $("select").addClass("form-control");
</script>

If the fnOpen function is not triggered, then data is not received and therefore there is nothing to show or hide.

Hope this information proves useful.

iggyweb

In fact the click function is not firing, hence everything else not working.

I have added an alert and it is not appearing when clicking the plus icon in IE8, yet other browsers the alert does appear.

        $('#ietest tbody td img').click(function() {
            var nTr = this.parentNode.parentNode;
            alert(nTr);

iggyweb

I've also tried:

        $('#illustrations tbody td img').on('click', function() {
            var nTr = this.parentNode.parentNode;
            alert(nTr);

Still no joy, all other browser trigger the alert on click.

iggyweb

Resolved, I had all of the following included in my dataTables bundle:

            bundles.Add(new ScriptBundle("~/bundles/dataTables").Include(
                "~/Scripts/DataTables-1.10.9/jquery.dataTables.js",
                "~/Scripts/DataTables-1.10.9/dataTables.bootstrap.js",
                "~/Scripts/DataTables-1.10.9/Buttons-1.0.3/dataTables.buttons.js",
                "~/Scripts/DataTables-1.10.9/Buttons-1.0.3/buttons.bootstrap.js",
                "~/Scripts/DataTables-1.10.9/Buttons-1.0.3/buttons.colVis.js",
                "~/Scripts/DataTables-1.10.9/ColReorder-1.2.0/dataTables.colReorder.js",
                "~/Scripts/DataTables-1.10.9/Responsive-1.0.7/dataTables.responsive.js",
                "~/Scripts/DataTables-1.10.9/RowReorder-1.0.0/dataTables.rowReorder.js",
                "~/Scripts/DataTables-1.10.9/Scroller-1.3.0/dataTables.scroller.js",
                "~/Scripts/DataTables-1.10.9/Select-1.0.1/dataTables.select.js"));

I stripped the bundle back for IE8:

            <!--[if lt IE 9]>
            @Scripts.Render("~/bundles/dataTablesIE8")
            <![endif]-->
            <!--[if gte IE 9]><!-->
            @Scripts.Render("~/bundles/dataTables")
            <!--<![endif]-->

            bundles.Add(new ScriptBundle("~/bundles/dataTablesIE8").Include(
    "~/Scripts/DataTables-1.10.9/jquery.dataTables.js",
    "~/Scripts/DataTables-1.10.9/dataTables.bootstrap.js"));

The Child row function is now working in IE8 and all other browsers.

jLinux

Can you change it from $('#ietest').dataTable() to $('#ietest').DataTable() ?

I believe the capital D hands down the API.. Which is also whats used in the example you linked to

But not sure thats really whats causing the issue. If you've narrowed this down to a Specific browser, and only the jQuery onClick, then I would actually say you ruled DataTables out..

If I had a computer with IE8, id try to debug it for you, but I try to keep that virus out ;-) jk

Have you tried changing the CSS selector to something simple? Just something like .openCloseImage or something? (and obv give that class to the image)

If you say the demo works, then you can obviously fix the code you have