1

jquery bbq私はajax リクエストがdiv発生し、レスポンスが受信されたときにボディのどこかが置き換えられるWeb サイト (を使用する) を持っています。次のようなもの：

var mainContent = $('#main_content');
if ( cache[ url ] ) {
        mainContent.fadeOut(duration, function() {
            mainContent.html(cache[ url ]);
            mainContent.fadeIn(duration, function() {
                $(document).trigger("ajax_loaded");
            });
        });

    } else {

        mainContent.fadeOut(duration, function() {

            var postAjaxCallback = function() {
                cache[ url ] = mainContent.html();
                $(document).trigger("ajax_loaded");
            };

            $('#loading').fadeIn(duration, do_ajax(url, duration, postAjaxCallback));
        } );

    }

function do_ajax(linkVal, duration, callback) {

$.ajax({ 
    type: "GET",
    url: linkVal,
    dataType: "html",
    success: function(page){
        var mainContent = $('#main_content');
        mainContent.stop(true, true);

        if(parseInt(page)!=0)  
        {
            mainContent.html(page);
            $('#loading').fadeOut(duration, function() {
                mainContent.fadeIn(duration, callback);                 
            } );
        }
    }
    });
}

全体として、これはうまく機能します。メインページは次のようなものです。

<html>
    <head>
       ...
    </head>
    <body>
        <div id="main_content");
           <p>Hello world!</p>
        </div>
    /body>
</html>

ajaxの戻り値#page2は次のようなものです

<p>Hello to a different world!</p>

その#page3上で、もう少し複雑になります。返される ajax は次のとおりです。

<script type="text/javascript">
function initialize() {
  var mapOptions = {
    zoom: 11,
    streetViewControlOptions: true,
    center: new google.maps.LatLng(26.737792, 49.878273),
    mapTypeId: google.maps.MapTypeId.SATELLITE
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}

function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize";
  document.body.appendChild(script);
}

loadScript();

$(document).bind("ajax_loaded", function() {
        console.log("map resize called");
        google.maps.event.trigger(map, 'resize');
});
</script>

これで初めて#page3ロードされ、すべて正常に動作し、コンソール ログが起動し、マップのサイズが変更されます (灰色の領域の問題のため、サイズを変更する必要があります)。ここで私が望んでいるのは、他のすべてのページが引き続き正常にロードされ (ajax 呼び出しまたはキャッシュから)、#page3再度ナビゲートされたときに (つまり、#("main_content")キャッシュから設定され、サイズ変更イベントが再び発生することです)。最も簡単に言えば、各 ajax ページがロードされた後にトリガーするイベントを作成しようとしており、$(document).bind("ajax_loaded", function() {});必要な後処理を行うことができる各 ajax 取得ページでカスタムを持つことができます。ロードするまで発生します#page3（そして、私が述べたように、マップのサイズが変更され、すべてがグレービーになります）。その後、ページが読み込まれるたびにバインドされた関数がトリガーされ、コンソールに出力されます (バインドされているので合理的だと思いますが$(document)、各ページに固有のものにするために何か良いことはありますか?)。リロードしようとする#page3と、マップが読み込まれますが、サイズが変更されません (コンソールはまだ印刷されます)。そのため、マップに灰色の領域が表示されます。ワークフローを正しくするために、JavaScript の経験が限られているので、誰か助けてくれませんか。繰り返します：

  • 各 ajax ロード (またはキャッシュからのロード) は、いくつかのイベントをトリガーします
  • 各 ajax ページ ( など) 内には#page1、#page2各 ajax ページに固有のセットアップを行うことができる上記の手順からトリガーされる関数があります。

助けてくれてありがとう！

編集 私は以下を使用してみました：

mainContent.find("script").each(function(i) {
    eval($(this).text());
});

イベントをトリガーする代わりに、ajax_loaded役に立ちません。他に試せることはありますか？

4

1 に答える 1

0

Google Maps API が 2 回目に追加されると、すべてが台無しになると思います ( のリロード#page3。何らかのエラーが発生し、スクリプトの残りの部分が機能しなくなる可能性があります。Google Maps API の読み込みを condition にラップしてみてくださいif (typeof google === 'undefined') { ...。

しかし、正直に言うと、コンセプト全体にリファクタリングが必要かもしれません:)。

于 2013-02-10T17:22:26.233 に答える