jQuery Mobile ColumnToggle on a table not working after AJAX call

Question

I have a table that is displayed on a certain page. The column toggle works for this table since it is already loaded in the page. The table structure looks like this:

<table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke infotbl hidecol">
    <thead>
    <tr>
        <th data-priority="1" class="ui-table-priority-1">Campaign</th>
        <th data-priority="1" class="ui-table-priority-1">Description</th>
        <th data-priority="3" class="ui-table-priority-3">Leads</th>
        <th data-priority="3" class="ui-table-priority-3">Quotes</th>
        <th data-priority="3" class="ui-table-priority-3">Sales</th>
        <th data-priority="4" class="ui-table-priority-4">Premium</th>
        <th data-priority="5" class="ui-table-priority-5">P-Factor</th>
        <th data-priority="1" class="ui-table-priority-1">Lead To Quote</th>
        <th data-priority="1" class="ui-table-priority-1">Sale Conversion</th>
        <th data-priority="2" class="ui-table-priority-2">Total Comm</th>
        <th data-priority="2" class="ui-table-priority-2">IMU</th>
        <th data-priority="1" class="ui-table-priority-1">Total After IMU</th>
        <th data-priority="1" class="ui-table-priority-1">VPL</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td class="alleft">1013-HCBC-1</td>
            <td class="alleft"></td>
            <td>1</td>
            <td>0</td>
            <td>0</td>
            <td>0.00</td>
            <td>4</td>
            <td>0%</td>
            <td>0%</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
            <td>0.00</td>
        </tr>
        <tr>
            <td class="alleft">1013-LIFE-1</td>
            <td class="alleft">medicalaidsite.co.za</td>
            <td>46</td>
            <td>15</td>
            <td>3</td>
            <td>506.00</td>
            <td>4</td>
            <td>33%</td>
            <td>7%</td>
            <td>2024.00</td>
            <td>355.09</td>
            <td>1420.35</td>
            <td>30.88</td>
        </tr>
    </tbody>
</table>

The table changes depending on the date range selected. I send the data through AJAX and then there's a script that processes it and returns back a table similar to this. The problem is: the column toggle is not applied to the data (table) that the AJAX returns.

This is the AJAX/Javascript code:

$('.frankbtngo').click(function(){

        var date = $('#frankdate').val();

        $('#frankstats').html(fetch_data);

        $.ajax({
            type: 'post',
            url: 'frankstatsfilter.php',
            data: {
                date:date
            },
            success:function(data){
                $('#frankstats').html(data);
            }
        });
    });

I tried to put $(".hidecol").table("refresh"); on the success part but it doesn't work. Is there any way I could re-enable/re-apply the column toggle to the table returned by AJAX?

Answer 1

When you load the html content onto the page the widgets aren't created. To solve this trigger the create method after you've loaded the data.

success:function(data){
    $('#frankstats').html(data);
    $('#frankstats').trigger('create');
}