bootstrap data-load-remote not triggered after table sorted

Question

I'm using dynatable.js http://www.dynatable.com/ and bootstrap3 modal to show a map when a link inside a sortable table is clicked.

I'm looking for some help with a problem this issue. When I first load the page and I click the Location link, the modal and remote data shows and works fine, it loads a map of the location properly. However, If I load the page and then click one of the columns to sort the table (lets say for example I click the item# column to sort by item number) and then click the location link, the modal shows with the loading text but the [data-load-remote].on('click') does not trigger at all. I'm not getting any errors or console message when this happens either.

It only happens if I sort the column. If I load the page and don't click sorting a column everything works fine.

Table

<table id="inventory-table" class="table">
<thead>
    <tr>
     <th>Item #</th>
     <th class="hidden-xs">Location</th>
    </tr>
</thead>
<tbody>
<tr>
 <td>1234</td>
 <td><a href="#myModal" role="button" data-toggle="modal" data-load-remote="/item-location/4" data-remote-target="#myModal . modal-body">555 W. Test St.</a></td>
</tr>
</tbody>
</table>

Bootstrap Modal

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body bg-gray-lighter">
            <p>Loading...</p>
        </div>
    </div>
</div>

Javascript

<script type="text/javascript">
$( document ).ready(function() {
    $('#inventory-table').dynatable({
    dataset: {
        perPageDefault: 20,
        perPageOptions: [20, 30, 50, 100]
    }
    });

   $('[data-load-remote]').on('click',function(e) {
       e.preventDefault();
       var $this = $(this);
       var remote = $this.data('load-remote');

       if(remote) {
           $($this.data('remote-target')).load(remote);
       }

       $(".modal-body").html('<p>Loading...</p>');
  });

  $('#dynatable-query-search-inventory-table').addClass('form-control');
  $('#dynatable-per-page-inventory-table').addClass('form-control selectperpage');</script>

jangosteve · Accepted Answer · 2015-10-15T01:31:38.557

The way Dynatable works is by performing operations on the JSON collection which represents the data that the table is populated with. I.e. when you click to sort a column, Dynatable sorts the JSON collection, in this case something like:

["item-#": 1234, "location": "555 W. Test St."]

Then when it's done sorting, it redraws the table body HTML. So, what's probably happening is when it redraws your table body HTML into the page, it's losing all the attributes in your cell, including the link and the selector that your JavaScript function binds to with the click event.

What you need to do is override the default rowWriter function to use the format you want when generating the table body.

Note also that your row requires information that isn't in a column of its own (the link in data-load-remote), and therefore Dynatable won't automatically pick it up. So, you'll also want your own rowReader function that grabs that and stores it on the JSON object, so that it will look like this:

["item-#": 1234, "location": "555 W. Test St.", "link": "/item-location/4"]

That way Dynatable can write back the table rows from the JSON data.

// Function that renders the table rows from our records
function myRowWriter(rowIndex, record, columns, cellWriter) {
  var row = '<td>' + record["item-#"] + '</td><td><a href="#myModal" role="button" data-toggle="modal" data-load-remote="' + record.link + '" data-remote-target="#myModal . modal-body">' + record.location + '</a></td>';
  return row;
}

// Function that creates our records from the table when the page is loaded
function myRowReader(index, row, record) {
  var $row = $(row);
  record.link = $row.find('[data-load-remote]').text();
}

$('#inventory-table').dynatable({
  dataset: {
    perPageDefault: 20,
    perPageOptions: [20, 30, 50, 100]
  },
  writers: {
    _rowWriter: myRowWriter
  },
  readers: {
    _rowReader: myRowReader
  }
});

Check out the Rendering section of the docs for more info.

bootstrap data-load-remote not triggered after table sorted

1 Answers1