web-dev-qa-db-ja.com

Jquery Mobile-$ .mobile.changepageが外部.JSファイルをロードしない

そのため、$.mobile.changePageが正しく機能するのに苦労しています。私はそれを次のように呼びます：

$.mobile.changePage( "DataformsM-AddRecord.html", { transition: "slide"} );

しかし、何らかの理由で、HTMLページが読み込まれたときに、外部.js（実際に何かを実行するために書き込んだファイル）が含まれていません。私はの重要な読み込み規則に従っています

-Jquery
-(CUSTOM JS)
-Jquery Mobile

これが正しく読み込まれていない理由を誰かが知っていますか？また、奇妙なことに、pageshow関数も実行されません。次のようになります。

$("div[data-role*='page']").live('pageshow', function(event, ui) { 

    loadFormFields();

});

これでページはレンダリングされましたが、機能的なことは何も起こりません。私がそれをハックして次のようなことをすると：

document.location.href="DataformsM-AddRecord.html";

正しく機能します。

javascriptjqueryhtmljquery-mobile
20
gabaum10

jQuery Mobileはページ全体をdomに引き込むのではなく、firstdata-role="page"要素とその子孫を取得して、現在のdomに引き込みます。

したがって、ドキュメントの<head>に含まれるスクリプトは含まれません。

私は通常、自分のサイトのすべての機能的なJavaScriptをインデックスページに配置し、外部ページがdomに読み込まれると、既に読み込まれているスクリプトを利用できます。

また、data-role="page"要素内にJavaScriptコードを配置することができ、jQuery MobileがページのAJAXロードを実行するときに含まれます。

[〜＃〜]更新[〜＃〜]

これに適したシステムは、すべてのJSをインクルードファイルに入れ、サイトの各ページにインクルードすることです。 AJAXによってページがDOMに取り込まれた場合は無視されますが、誰かがサイトのどこかを更新すると、JSが使用可能になります。

43
Jasper

ジャスパーが上で賢明に指摘したことを元に、私は実用的な解決策を思いつきました。

基本的に、JSおよびCSSファイルをすべてインデックスページにロードして開始します。ロードすると、このメソッドはpageshowに対してトリガーされます

_$("div[id*='page1']").live('pageshow', function(event, ui) { 
    setTimeout(function() { window.scrollTo(0, 1) }, 100);
    doStuffWhenPageintializes();
});
_

$.mobile.changePage( "someOtherPage.html", { transition: "slide"} );を呼び出すと、page1オブジェクトに対してpagehideメソッドが呼び出されます。ここで、メソッドをトリガーして、遷移先のページを初期化できます。

_$("div[id*='page1']").live('pagehide', function(event, ui) { 
    setTimeout(function() { window.scrollTo(0, 1) }, 100);
    loadStuffForNewPage();
});
_

これで、_document.location.href="external.html"_行を削除して、ネイティブJQM呼び出しを使用できます。これが一部の人々に役立つことを願っています。

3
gabaum10

変更ページはページの再読み込みを引き起こし、ヘッドセクションを再作成するため、各htmlページのすべてのスクリプトでヘッドセクションを繰り返してください...

次のような単純な変更ページが機能します。

$.mobile.changePage('abc.html', {
    transition: 'slide'
});
1
Sheetal

JQMが外部htmlファイルをロードするための「正しい」方法が提供されていないようです。解決策を提供してくれたJasperに感謝します。

次のように外部ページに切り替えたい場合、JQMはAJAX=リロードを提案します。

<a href="foo.html" rel="external">

または

<a href="foo.html" data-ajax="false">

両方試してみましたが、うまくいきませんでした。ネイティブアプリ用にプログラミングしているので、ウェブアプリでもうまくいくかもしれません。

0
Mike

最後に読み込まれたページのヘッドセクションにスクリプトを追加して解決しました。 JQMは最近ロードされたページのヘッドセクションをDOMに取得していないため、最近のページのJSコンテンツを取得していません。すべてのスクリプトを外部JSファイルに配置するか、最初のページのヘッドセクションに配置すると、うまくいく場合があります。

0
Hanzala Ali