1

JQM 1.4.2 を使用して小さなアプリを作成していますが、ajax を使用してページを更新せずにテーブルを更新するという問題が発生しています。これはうまく機能し、テーブル (テーブル全体) が更新されますが、更新後に機能しdata-mode='columntoggle'なくなります - ボタンはありますが、列を表示するために行った選択はまったく機能しなくなります。

これが起こる理由を誰でも思いつくことができますか？以下のコード:

メインページ

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

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

おそらく行ごとにリロードする必要があると考えていました-それについて何か考えはありますか? それ以外の場合は、任意のアイデアをいただければ幸いです。ありがとう

4

1 に答える 1

6

jQM は、テーブルの最初のロードからの列のリストを含むポップアップを保持しているように見えるため、その後のロード後にリストを再作成していません。これを行うには、おそらくもっと「公式な」方法がありますが、簡単な回避策は、テーブルを更新するたびに DOM から動的ポップアップを削除することです。

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

テーブル ID が のvisualUnitListTable場合、jQM は ID が のポップアップを作成するvisualUnitListTable-popup-popupため、テーブル HTML を更新する直前にその要素で remove() を呼び出すことができます。

ここにデモがあります

于 2014-05-22T13:47:52.673 に答える