7

状況は次のとおりです。htmlを含み、jQuerylibrayとタブを使用するページjQueryUIプラグインは、タブがクリックされると別のページをロードします。問題は、page / htmlがロード/レンダリングされるときに（これを単純化して、$（ "＃myDiv"）。load（url）;のようなことをしているとしましょう）、もちろん「 window」はすでにロードされており、loadイベントが発生しています。これは、ページのロード（部分ロード）で実行したいjQueryの処理が実行されないことを意味します。UI.tabsプラグインは、ページを他のタブにロードするように設計されており、他のページに独自のjQueryが含まれている可能性があると想定できます...したがって、これを回避する方法があるはずです。

問題を解決するための非常に恐ろしい方法を考えることができます。たとえば、ページの下部にスクリプトブロックがレンダリングされ（divに読み込まれ）、準備ができたときに実行するすべてのことを実行します（ブラウザーを想定できます）。スクリプトブロックがヒットした場合、すでにページをレンダリングしています）。しかし、これは非常に悪い習慣です。助言がありますか？

4

5 に答える 5

5

AJAX リクエストをサーバーにどのように送信していますか? ASP.NET AJAX を使用している場合、Brian Hasden の回答が探しているものです。jQuery を使用してリクエストを送信している場合は、load 関数を使用してコールバックを設定できます。

$(".ajaxLink").load(url, null, function() {
    // code here
});

load() ドキュメンテーション

または、ajax 呼び出しが完了するたびに発生するグローバルな ajaxComplete イベントを設定します。

$(document).ajaxComplete(function() {
    // code here
});

ajaxComplete() ドキュメント

于 2009-12-09T17:46:02.900 に答える
2

loadメソッドは、コンテンツがロードされた後に実行されるコールバックを提供します。

$("#myDiv").load(url, null, function() { 
   //do your stuff here 
});

jQuery.comの完全なドキュメントと例：http：//docs.jquery.com/Ajax/load

于 2009-12-09T17:42:09.520 に答える
2

わかりました..これで、この問題に対する簡単な答えが得られました。これは、最小限のコード変更を意味するはずです。$(document).ready に応答する js インクルード (基本的にクライアント側の動作モデル) を持つサブ ビュー (これらは、html、head、または body タグを持たない実際の aspx ビューです) ではなく、mkedobbsからの提案を使用できます。似たようなものを提供します。単に：

$("#MyDiv").load("page.htm", null, function(){ $(document).trigger("PartialLoaded"); });

次に、サブビューにjsを含めます

$(document).bind("PartialLoaded", function(){ .........});
于 2009-12-10T13:29:51.997 に答える
1

まあ-私はjQueryでASP.NET MVCを使用しています。私はアプリケーションのこの部分に部分ビュー (ascx) を使用していません。代わりに、完全なビューを歌っていますが、それらを div にロードしています。したがって、この「タイプ」のビューのクライアント側のロジックであるjsファイルへの参照を含むヘッドを持つメインビューがあります。このビューのいくつかのタブをクリックすると、jquery タブを使用して別のビューをいくつかの div に「ロード」します。このプラグインを使用してタブをロードする方法は、単純に URL を指定することです (指摘されたように、ready に依存するのではなく、コールバック関数を追加できるロードを使用するのではなく)。

でも。ビューは別のビューを URL でロードできるはずなので、すべてのクライアント ロジックを親ビューに配置したくありません (サブ ビューには、ロード時にフォーマット/フックアップするすべてのロジックを含む関連する js ファイルへのリンクが含まれます)。

今私が本当に混乱しているのは、ある状況では機能しているように見えて、他の状況では機能していないように見えるということです。たとえば、1) 親ビューが IE のフレームで開かれている場合、サブビューの準備がトリガーされることはありません 2) IE で同じ URL を直接開いている場合、サブビューの準備がトリガーされます 3) FFX2 で同じ URL を開くと、 ready every はトリガーされません 4) 最終的に.. しかし、FFX2 でこの親のサブビュー (サブビューを持つ) を開くと、子の Ready イベントがトリガーされます!.. 不可解です..

いくつかのテストを実行して返信しますが、この動作が異なる理由についての提案は大歓迎です

更新: Ah ha!.. 上記のハードルがクリアされていても、ブラウザーの違いがあるように見えます (明らかに上記を読んだことから).. 以下の簡単なテストは IE7 では正常に動作しますが、FFX2 では失敗します。Test2.htm を Test1.htm にロードすると、準備完了イベントが IE でトリガーされますが、FFX ではトリガーされません。経験上、これは IE には「癖」があり、FFX は W3C に基づいて期待どおりに動作することを意味します。したがって、誰かが何か提案がない限り、このアプローチはノーノーのように見えますか?:

Test1.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org        /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <script type="text/javascript" language="javascript" src="Scripts/jquery-1.3.2.js">    </script>
    <script type="text/javascript" language="javascript">
    <!--
        $(document).ready(function() {
            alert("Test1.htm");
            $("#Test1").load("Test2.htm");
        });
    //-->
    </script>
</head>
<body>
    <h3>SOME TEST</h3>
    <div id="Test1">EMPTY</div>
</body>
</html>

Test2.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org        /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <script type="text/javascript" language="javascript" src="Scripts/jquery-1.3.2.js">    </script>
    <script type="text/javascript" language="javascript">
    <!--
        $(document).ready(function() {
            alert("Test2.htm");
            //$("#Test1").load("Test3.htm"); // load more
        });
    //-->
    </script>
</head>
<body>
    <h3>SOME TEST</h3>
    <div id="Test2">EMPTY</div>
</body>
</html>
于 2009-12-10T09:49:04.200 に答える
-1

私はあなたがこのようなことをすることができると信じています（ASP.NETから派生）：

<script type=”text/javascript”&gt;
     <!--
     Sys.WebForms.PageRequestManager.getInstance().add_EndRequest(Request_End);
     function Request_End(sender, args)
     {
          // Insert code you want to occur after partial page load here
     }
     // -->
</script>

これは、部分的なページ更新を含む終了要求イベントにフックする必要があります。上記の例を更新して、必要な適切なJS関数を呼び出すことは明らかです。

于 2009-12-09T17:39:19.183 に答える