Load html into Datatable child row using ajax

Question

I am trying to load the html returned from a controller into a div when the user clicks on the row of a table.

Here is my code:

   // Add event listener for opening and closing details
   jQuery('#exRowTable tbody').on('click', 'td.details-control', function () {
     var tr = $(this).closest('tr');
     var row = exRowTable.row(tr);

      if (row.child.isShown()) {
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                }
                else {
                    // Open this row
                    row.child(format()).show();
                    tr.addClass('shown');
                    loadChildRow(row);
                }
            });


 function format() {
            return '<div id="detailsDiv"></div>';
        };

        function loadChildRow(row) {
            $.ajax({
                type: 'GET',
                url: '@Url.Action("ChildRow","Users",new{ id= 1})',
                data: null,
                success: function (data) {
                   $('.detailsDiv').innerHTML = data;                        
                }
            });
        };

However this is not actually inserting the html properly.

I think it could have something to do with the div being added dynamically to the dom.

What am I doing wrong?

Also, I would some how like to pass the row var into the `loadChildRow()1 function and then be able to select only from divs within that row. any idea how i can do this?

Answer 1

As I can see in your code, you are adding a div with an id="detailsDiv" in the format function. However, when adding the html after ajax call, you are using ".detailsDiv", which is trying to find a class (not id) with name "detailsDiv" (that probably does not exist in your page). This may be one of the reason for the data not being displayed.

Also, there should be only one element in the page with a particular id. In this case, if someone tries to expand two rows in the table, it will create two html elements (div) with id "detailsDiv". This may lead to unpredictable results.

I have a similar code working on my dev setup.

function format() {
  return '<div id="detailsDiv_' + rowId +'"></div>';
};

function loadChildRow(row) {
  $.ajax({
    type: 'GET',
    url: '@Url.Action("ChildRow","Users",new{ id= 1})',
    data: null,
    success: function (data) {
      $('#detailsDiv_' + rowId).html(data);                       
    }
  });
};

In the above code "rowId", may be randomly generated or just a counter to identify particular row.

Answer 2

For your first question:

            success: function (data) {                 
                        $('.detailsDiv').html(data);                       
            }

For your second question: can you give us an example of what you want to do?

Answer 3

What I discovered if you insert html page, it doesn't apply your current page styles. So add your formatting to the page you are trying to insert because it is treated as a separate page.

Answer 4

Have you tried this?

$.ajax({
  type: 'GET',
  async: false,
  url: '@Url.Action("ChildRow","Users",new{ id= 1})',
  data: null,
  success: function (data) {
    $('.detailsDiv').innerHTML = data;                        
  }
});