Le filtre de tablesorti n'apparaît pas dans la boîte de dialogue JQuery lors de l'événement de modification

Question

J'utilise le filtre Tablesorter dans la boîte de dialogue JQuery. Lorsque j'ouvre la boîte de dialogue pour la première fois, le filtre Tablesorter se charge et fonctionne correctement. La boîte de dialogue contient une liste déroulante, lorsque je sélectionne une valeur dans cette liste déroulante, la boîte de dialogue recharge et affiche les données MAIS le filtre Tablesorter n'apparaît pas/visible.

Quelqu'un peut-il m'aider à résoudre ce problème?

Merci

var $dialogproperties = $('#dialogs'); 

$(document).on('change', '#ddl_Com', function (e) { 
     e.preventDefault(); 
     var url = getURL; 
     var data1 = getValues(); 

     url = '@Url.Action("Com_submit")?ID=' + id; 

     $.post(url, data1, function (data) { 
      //// Open popup dialog box 
      var tmp = data.commentdisplay.replace(/\n/g, '<br />'); 
      $dialogproperties.html(''); 
      $dialogproperties.dialog({ title: $('#title').text() }); 
      $dialogproperties.html(tmp); 
      $dialogproperties.dialog('open'); 
     }); 
     return false; 
}); 

$(function() { 
     //// - Dialog box width and height 
     var wWidth = $(window).width(); 
     var dWidth = wWidth * 0.9; 
     var wHeight = $(window).height(); 
     var dHeight = wHeight * 0.9; 
     var dialog = ""; 
     dialog = $("#dialogs").dialog({ 
      autoOpen: false, 
      modal: true, 
      width: dWidth, 
      height: dHeight, 
      fluid: true, 
      open: function (event, ui) { 
       stopscroll(); 
       alert('t'); 

       var $table = $('#tblCom'); 
       $table.tablesorter({ 
        textExtraction: { 
         '.img': function (node) { 
          var $node = $(node); 
          return $node.find('span[title]').attr('title'); 
         } 
        }, 
        imgAttr: 'title', 
        ignoreCase: false, 
        widthFixed: true, 
        widgets: ["filter", "columnSelector"], 
        widgetOptions: { 
         filter_useParsedData: true, 
         filter_columnFilters: true, 
         filter_ignoreCase: true, 
         filter_defaultAttrib: 'data-value', 
         columnSelector_mediaquery: false 
        } 
       }); 

      }, 
      close: function (event, ui) { 
      } 

     }); 

    }); 

Answer 1

code pour vous assurer que le HTML a rendu à l'intérieur de la boîte de dialogue avant d'initialiser tablesorter

dialog = $("#dialogs").dialog({ 
    // ... 
    open: function (event, ui) { 
    stopscroll(); 
    setTimeout(function() { 
     var $table = $('#tblCom'); 
     $table.tablesorter({ 
     // ... 
     }); 
    }, 0); 
    }, 
    // ... 
});