JQuery Mobile update table via AJAX and column-toggle stops working

Question

I'm creating a small app using JQM 1.4.2 and I'm having an issue where I am updating a table without a page refresh using ajax. This works well and my table (the whole table) is updated BUT after an update the data-mode='columntoggle' no longer works - the button is there but any selections you make to display columns no longer works at all.

Can anyone think of a reason why this would happen? Code below:

Main page

            <div data-role="content" data-theme="a" >   
         <div id='visualUnitTable'>
        <!-- list loads dynamically - popup & jquery at bottom of page -->  

         </div>

    <!------------------POPUP------------------- --> 
       <div data-role='popup' id='popupVisualUnit' data-theme='a' data-overlay-theme='a' data-dismissible='false'  style='min-width: 300px;'>
                <div data-role='header' data-theme='a'>
                    <h1>Visual Check</h1>
                </div>
                <div data-role='main' class='ui-content'>
                    <form id='frmVisualUnit'>
                        <!--using ajax to create the form-->

                    </form>
                </div>
            </div>

    </div><!-- /content -->

table page (ive removed a load of php from here for ease of reading!!):

<table data-role='table' id='visualUnitListTable' data-mode='columntoggle' class='ui-body-b ui-shadow table-stripe ui-responsive' data-column-btn-mini='true' data-column-btn-text='Columns to Display' data-column-btn-theme='c' data-column-popup-theme='a' >
                        <thead>
                        <tr>
                        <th data-priority='1'>Unit No.</th>
                        <th data-priority='1'>Size Code</th>
                        <th data-priority='2'>Size</th>
                        <th data-priority='3'>Week Rate</th>
                        <th data-priority='3'>Month Rate</th>
                        <th data-priority='2'>Overlocked</th>
                        <th data-priority='2'>Visual Check</th>
                        <th data-priority='1'>Status</th>
                        <th></th>
                        </tr>
                        </thead>
                        <tbody>
echo"<tr>
        <td><a href='./unit_Details.php?unitid=" . $row['unitid'] . "'>" . $row['unitno'] . "</a></td>
        <td>" . $row['sizecode'] . "</td>
        <td>" . $row['usize'] . "</td>
        <td>" . $row['wrate'] . "</td>
        <td>" . $row['mrate'] . "</td>
        <td>" . $row['overlocked'] . "</td>
        <td>" . $row['visual'] . "</td>
        <td>" . $row['description'] . "</td>
        <td><div id='custom-border-radius'><a onclick= DisplayVisualCheckPopUP('" . $row ['unitid'] ."') class='ui-btn ui-icon-edit ui-btn-icon-notext ui-corner-all' data-rel='popup' data-position-to='window' data-transition='pop'>" . $row['unitno'] . "</a></div></td>
    </tr>
</tbody>
</table>

Click on the edit button to open a popup which when you close re-writes the table with the updated info. ajax to re-load the table without refreshing the whole page:

      function LoadVisualUnitTable() {
                    $.post('unit_DisplayVisualTable.php', 'unitSearchBox=<?php echo $_POST ['unitSearchBox'];?>&choiceUnitSearch=<?php echo $_POST ['choiceUnitSearch'];?>&choiceDeletedUnit=<?php echo $_POST ['choiceDeletedUnit'];?>&selectSiteUnit=<?php echo $_POST ['selectSiteUnit'];?>&choiceUnitSearchCri=<?php echo $_POST ['choiceUnitSearchCri'];?>&selectUnitStatus=<?php echo $_POST ['selectUnitStatus'];?>&sid=RI201310111345581600', function(data) {
                        $("#visualUnitTable").html(data); //<!-- load data to div -->
                        $("#visualUnitTable").trigger('create'); //<!-- load data to css -->
                    });
                    return false;
                };

I was thinking that perhaps I need to just reload row by row - any thoughts on that? Otherwise any ideas would be appreciated! Thanks

Answer 1

It looks like jQM is keeping the popup with the list of columns from the first load of the table, so after subsequent loads it is not recreating the list. There is probably a more 'official' way to do this, but a quick workaround is to just remove the dynamic popup from the DOM each time you refresh the table:

$("#visualUnitListTable-popup-popup").remove();        
$("#visualUnitTable").html(data).enhanceWithin();

Given your table id of visualUnitListTable, jQM creates a popup with an id of visualUnitListTable-popup-popup, so you can call remove() on that element right before updating the the table HTML.

Here is a DEMO