0

私は JQuery Mobile を初めて使用し、ユーザーの選択に応じて JqPlot グラフィックを含むページを表示しようとしています。

今朝、リンクをクリックして表示/ロードされたページの JavaScript コードが実行されないように設計されていることを読んで実験しました。

ロードするページの JS スクリプトを考慮するにdata-ajaxは、リンクの data 属性を false に設定する必要があります。ただし、この場合、ブラウザーはすべてのページをリロードし、ユーザーにとってスムーズな移行はありません。

<p><a href="myUrl.php" data-ajax= "false" data-transition="slideup" data-role="button" data-theme="c">

私はそれを理解する方法を見つけましたが、コードの専門家によるレビューが必要です。アイデアは、JQuery関数を介してグラフ作成ページをロードするためpageshowに、グラフ コンテナー ページでイベントを宣言することです。#page-detail.load()

このようにして、次のことができます。

  • マイページへのスムーズな移行
  • グラフがロードされるロード div を用意する
  • データの読み込みと JqPlot グラフの準備ができたらグラフをレンダリングする

私のコード:

  $(document).on('pageshow','#page-detail',function(){       
        //Apply a loading layer to the graph container
        $('#graph-container').html("<div id='graph-loading-layer' class='loading loading-col2a'>"+g_graphLoadingText+"</div>");                    

        //Load my graphic page creation. In this page, there are JS code to create the JQplot graphic
        $('#graph-container').load(g_baseUrl+"index/graph/format/html",{chartHeight : newHeight+'px'},function(response, status, xhr) {
            console.log('loaded')
        });                 
    });

上記の私の解決策は面倒ですが、グラフを簡単にロードできると確信しています より良い解決策を持っている人はいますか? より良いコードの実装?

4

1 に答える 1

0

JQuery.load()は、Javascript を実行し、標準のページ ロードに従って CSS を適用するなど、ページをロードするための適切なオプションです。この手法を MVC 単一ページ Web サイトの部分ページで使用したところ、非常に効果的であることがわかりました。

リンクに関するあなたの懸念については完全に明確ではありませんでしたが、リンクの「クリック」ハンドラー内で JQuery .load() を使用することも確かに機能します。

あなたのコードは健全に見え、非同期読み込みが発生している間に読み込みレイヤーを適用していることがわかります。そのレイヤーがどのように機能するかは100％わかりませんが、レイヤー.load()が完了したらおそらく非表示/削除する必要があると思うので、ロード後のハンドラーに追加のコードを追加する必要があるかもしれませんそれで？

于 2012-12-07T11:12:49.677 に答える