0

同じタイプのデータ (果物としましょう) を表示できる単一のページを作成しようとしています。次に、このページを Web サイト階層の任意の場所にロードしますが、毎回異なるパラメーターを使用します。

次のようなメイン ページがあり、同じページへの 2 つのリンクがありますshow.html。

<div data-role="navbar" data-iconpos="top" data-theme="a" class="nav-ecommera">
    <ul >
      <li>
        <a href="show.html?p=apples" data-role="button">Apples</a>
      </li>
      <li>
        <a href="show.html?p=oranges" data-role="button">Oranges</a>
      </li>
    </ul>
</div>

2 つのボタンのそれぞれをクリックするとshow.html、DOM にページの新しいインスタンスが作成されます。したがって、show.html 内のすべてのアイテムは、DOM 内で重複した ID を持つことになります。

私のjavascriptでは、show.htmlページを動的に埋めたい:

$('div[id="show"]').live("pagebeforeshow", function(e, data) {
     var p = getUrlParameter("p");
     show(p);
});

var show = function(p) {
    $.ajax({
        url:'http://show.com/?p='+p,
        success: function(data) {
                    // Refresh 'show' page with new data
                    // First time: It's fine.
                    // Second time: 'show' page is duplicated in the DOM so it's messy.
                 } 
    });
}

これで、最初のshow.htmlロードはすべて問題ありません。ただし、2 回目はすべてがshow.html2 回読み込まれ、DOM には多くの重複 ID が含まれます。

新しいページをロードする前に DOM から最初のページを削除する方法はありますか?

または：

ここで達成しようとしていることを実行するより良いアプローチはありますか?

更新:show新しいページをロードするときに、ページ の以前のインスタンスを削除しようとしました。2ページ目の表示に関する限り機能します。しかし、手動で削除した後、最初のページを 2 回目に表示する必要がある場合に問題があります。

その理由は、手動で削除したにもかかわらず、最初のページが既に読み込まれていると jQuery モバイルが認識しているように見えるためだと思います。そのため、再度アクセスしたときに最初のページが完全にリロードされません。私は次の一連のナビゲーションについて話している: ホーム -> リンゴ -> ホームに戻る -> オレンジ -> ホームに戻る -> リンゴ (ここでは欠陥のあるページが表示されます)。

4

2 に答える 2

1

次のオプションを使用してshow.phpページをロードできます。$.mobile.changePage()reloadPage

//bind to all links that have an HREF attribute that starts with "show.html"
$('a[href^="show.html"]').bind('click', function () {

    //set a default query-string for the page-load
    var query = '';

    //if this link's HREF attribute has a query-string, use it
    if (this.href.indexOf('?') > -1) {
        query = this.href.split('?')[1];
    }

    //forward the user to the page, telling jQuery Mobile to reload the page
    //which will use the new query-string sent
    $.mobile.changePage('show.html', { reloadPage : true, data : query });

    //prevent the default behavior of the click
    return false;
});

reloadPage (ブール値、デフォルト: false)

ページ コンテナーの DOM に既にある場合でも、ページの再読み込みを強制します。changePage() の「to」引数が URL の場合にのみ使用されます。のドキュメントは次の$.mobile.changePage()とおりです。

ソース: http://jquerymobile.com/demos/1.1.0/docs/api/methods.html

data-urljQuery Mobile が同じページを 2 回読み込むのは、HREF 属性の URLが疑似ページ要素の属性と一致しないためです。この問題をデバッグするには、ページが DOM に挿入されるときにページdata-urlに追加される属性を確認してください。show.html一致しない場合は、次data-urlのように要素に属性を設定できます。

<div data-url="/show.html" data-role="page" id="show-page">
    ...
</div>

次に、常に URL を使用してページにリンクします。/show.html

于 2012-04-19T18:07:37.497 に答える
1

1) ID をクラスに変更できます。

2) show.html を囲むラッパーを使用できます。2 回目にロードしようとすると、前にロードしたものを見つけて削除します。

あなたの show.html:

<div class='previous-load'>
  ... enclosed show.html HTML ...
</div>

JavaScript:

$('div[id="show"]').live("pagebeforeshow", function(e, data) {
     var p = getUrlParameter("p");
       show(p);
});

var show = function(p) {

    $(".previous-load").remove();

    $.ajax({
        url:'http://show.com/?p='+p,
        success: function(data) {
                    // Refresh 'show' page with new data
                    // First time: It's fine.
                    // Second time: 'show' page is duplicated in the DOM so it's messy.
                 } 
    });
}
于 2012-04-19T17:52:43.903 に答える