通过AJAX和列切换的jQuery Mobile更新表停止工作 [英] JQuery Mobile update table via AJAX and column-toggle stops working

问题描述

我正在使用JQM 1.4.2创建一个小型应用程序，但遇到了一个问题，即我在不使用Ajax刷新页面的情况下更新表.效果很好，并且在更新data-mode='columntoggle'后我的表(整个表)已更新，但是data-mode='columntoggle'不再起作用-该按钮在那里，但是您为显示列所做的任何选择都不再起作用.

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:

主页

            <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 -->

表页面(为了便于阅读，我从此处删除了很多php！):

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>

单击编辑"按钮以打开一个弹出窗口，当您关闭该弹出窗口时，将使用更新的信息重新编写表格. ajax重新加载表而不刷新整个页面:

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

推荐答案

jQM似乎从表的第一次加载开始保留带有列表列表的弹出窗口，因此，在后续加载之后，它不会重新创建列表.可能有一种更正式"的方法来执行此操作，但是一种快速的解决方法是每次刷新表时都从DOM中删除动态弹出窗口:

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();

鉴于表ID为visualUnitListTable，jQM会创建一个ID为visualUnitListTable-popup-popup的弹出窗口，因此您可以在更新表HTML之前立即在该元素上调用remove().

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

这篇关于通过AJAX和列切换的jQuery Mobile更新表停止工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！