0

2つのHTMLページがあります。最初のフォームには、非同期HTTP（Ajax）リクエストを介して2番目のフォームに送信されるフォームが含まれています。このように、ユーザーがフォームを送信するとすぐに、2番目のページがリロードせずにフォームの下部に表示されます。

現在、私の最初のページは完全なHTMLドキュメント（リンクとスクリプト要素+本文を含むhead）であり、2番目のページにはphpコード（html、head、body構造は含まれていません）のみが含まれています。実際には、2番目のページを最初のページに「含まれている」かのように扱いました。

2ページ目のjQueryUIを使用してこのスライダーを表示したい場合に問題が発生します。

最初のページのヘッドセクションにjQueryUIを追加します。

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script>
    $(function() {
        $( "#slider-range-max" ).slider({
            range: "max",
            min: 1,
            max: 10,
            value: 2,
            slide: function( event, ui ) {
                $( "#amount" ).val( ui.value );
            }
        });
        $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
    });
    </script>

2ページ目にスライダーを表示しようとすると、正しく表示されません。本文セクションで使用するコードは次のとおりです。

  <p>
    <label for="amount">Minimum number of bedrooms:</label>
    <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
<div id="slider-range-max"></div>

ただし、最初のページの本文セクションで同じコードを試してみると、スライダーは完全に表示されます。

したがって、私の質問は...ページのヘッドセクションのリンク要素とスクリプト要素は、Ajaxを介して呼び出された2番目の要素にどのように継承されますか？

2番目のページも完全なHTMLドキュメントで、ヘッドセクションにスクリプトとリンクの要素を含める必要がありますか？

よろしくお願いします

4

2 に答える 2

0

私の理解では、最初のページの Javascript は、そのページの読み込みが完了した時点でのみ DOM コンテンツを認識します。

それ以降に読み込まれた新しいコンテンツは認識されません。

これに対処するには、すべてのヘッダーとスクリプトなどを含む完全な HTML ページとして 2 番目のページを読み込むことができます。

または、2 番目のページを現在の部分ページとしてロードしますが、部分ページの上部に余分な「スクリプト」セクションと「リンク」セクションを含めて、それらが新しくロードされたページのコンテキストに確実に適用されるようにします。 DOM コンテンツ。

于 2012-12-07T12:16:14.273 に答える
0

2 つのドキュメント間に「継承」はありません。あなたが説明した2つのシナリオで何が起こるかというと、JavaScriptが実行されます.JSを頭に持っていると、2番目のページの読み込みが完了する前に実行されます. たまたま本文の一部として埋め込むと、2 番目のページが読み込まれ、最初のページの dom に html が挿入されてから、スライダー固有のコードが実行されます。

ajax 呼び出しの成功ハンドラーに splider 固有のコードを含める必要があります。以下のコードに似たもの

$.ajax({
   url: urlOfSecondPage,
   success : function() {
        $( "#slider-range-max" ).slider({
            range: "max",
            min: 1,
            max: 10,
            value: 2,
            slide: function( event, ui ) {
                $( "#amount" ).val( ui.value );
            }
        });
        $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
    }
});

または、元の JS を 2 ページ目の一部として挿入します。

于 2012-12-07T12:24:51.567 に答える