Tablesorter filter not showing in JQuery Dialog box on change event

Question

I am using Tablesorter filter in JQuery dialog box. When I open the dialog box for the first time, the Tablesorter filter loading and working properly. The dialog box contain a Drop down list, when I am selecting value from this Drop down list, the dialog box re-loading and displaying data BUT the Tablesorter filter does not appear/visible.

Can anybody help me solve this issue.

Thanks

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 to make sure that the HTML has rendered inside the dialog before initializing tablesorter

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