Tablesorter not loaded with dynamically generated content

Question

I am trying to load jQuery tablesorter in a customized infowindow generated by cartodb.js. The idea is that when I click a data point on the map an infowindow will open, loading data dynamically from the database. While the information is loaded correctly and displayed as an ordinary table, the tablesorter is not loaded.

The relevant code:

<script>
$(document).ready(function() 
{ 
    $("#bewohner").tablesorter();
} 
); 
</script>

<script type="infowindow/html" id="infowindow_template">
  <div class="infowindow-custom">
    <a href="#close" class="cartodb-tooltip-close-button close">x</a>
     <div class="cartodb-tooltip-content-wrapper">
       <div class="cartodb-tooltip-content" style="padding:2px">
       <div id="strasse"></div>
         <table id="bewohner" class='tablesorter table table-condensed'>
            <thead>
                <tr>
                    <th>
                    <th>Familienname
                    <th>Vorname
                    <th>Beruf</th>
                    <th>Etage</th>
                    <th>Tel.</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
       </div>
     </div>
     <div class="cartodb-tooltip-container"></div>
  </div>
</script>

....

  cartodb.createLayer(map, layerUrl, layerOptions)
    .addTo(map)  
    .on('done', function(layer) {
    var infowindow = layer.getSubLayer(0).infowindow
      infowindow.set('template', function(data) {
        var clickPosLatLng = this.model.get('latlng');
        var fields = this.model.get('content').fields;
    if (fields && fields[0].type !== 'loading') {
      var obj = _.find(fields, function(obj) {
        return obj.title == 'strasse_original'
      }).value
               } // end test of status                   
        $.get("http://******.cartodb.com/api/v1/sql?q=select * from vauban_1 where strasse_original= '" + obj + "' ORDER BY etage, familienname ASC", function(data) {
        $('#strasse').append("<h4>" + data.rows[0].strasse_heute + " / " + data.rows[0].strasse_original +"</h4>");
          for (var i = 0; i < data.total_rows; i++) {
              $('#bewohner tbody').append("<tr><td>" + data.rows[i].zusatz + "<td>" + data.rows[i].familienname + "<td>" + data.rows[i].vorname + "<td>" + data.rows[i].beruf + "<td>" + data.rows[i].etage + "<td>" + data.rows[i].telefon + "</td></tr>");
              }
        });
        return $('#infowindow_template').html();
      });
  })

It seems that I somehow have to trigger the tablesorter each time the infowindow is loaded, but I don't know how.

Answer 1

I the call for tablesorter was not placed correctly, as it has to be placed inside the function that updates the infowindow. Thus, a working version of the function is:

cartodb.createLayer(map, layerUrl, layerOptions)
.addTo(map)  
.on('done', function(layer) {
var infowindow = layer.getSubLayer(0).infowindow
  infowindow.set('template', function(data) {
    var clickPosLatLng = this.model.get('latlng');
    var fields = this.model.get('content').fields;
if (fields && fields[0].type !== 'loading') {
  var obj = _.find(fields, function(obj) {
    return obj.title == 'strasse_original'
  }).value
           } // end test of status                   
    $.get("http://******.cartodb.com/api/v1/sql?q=select * from vauban_1 where strasse_original= '" + obj + "' ORDER BY etage, familienname ASC", function(data) {
    $('#strasse').append("<h4>" + data.rows[0].strasse_heute + " / " + data.rows[0].strasse_original +"</h4>");
      for (var i = 0; i < data.total_rows; i++) {
          $('#bewohner tbody').append("<tr><td>" + data.rows[i].zusatz + "<td>" + data.rows[i].familienname + "<td>" + data.rows[i].vorname + "<td>" + data.rows[i].beruf + "<td>" + data.rows[i].etage + "<td>" + data.rows[i].telefon + "</td></tr>");
          }
       $("#bewohner").tablesorter();
    });
    return $('#infowindow_template').html();
  });
})