jQuery 1つのhtmlページを別のものにロードする約束

Question

jQuery約束を使用して別のhtmlページ内に1つのhtmlページをロードしたいと思います。しかし、ロードできませんでした。以下のコード..

(function ($) { 
$(document).ready(function() { 

var loadPageLoaded = function(){ return $('div.loadContainer').load('load.html').promise();} 
var loadAwardsPage = function(){ return $('div#maincontainer').load('assets/templates/awards.html').promise();} 


loadPageLoaded().then(loadAwardsPage()); 


}); 
})(jQuery) 

Answer 1

あなたは約束のオブジェクトを格納し、それらの約束が満たされているかどうかを調べるために$.when()を使用することができますです。それは関数呼び出しの引数として配列を受け入れるため.apply()を使用して、この例ここで

function createPromise(baseInfoTemplate) { 
    var baseData = { /* foobar */ }; 

    return $.Deferred(function(promise) { 
     setTimeout(function() { 
      $('#foo').append('<li>' + baseInfoTemplate + ' --> success</li>'); 
      promise.resolve(); 
     }, ~~(Math.random() * 8000)); 
    }).promise(); 
} 

var myPromises = [ ]; 

myPromises.push(createPromise('some data')); 
myPromises.push(createPromise('even moar data')); 
myPromises.push(createPromise('foo bar heay')); 
myPromises.push(createPromise('hey yooo')); 
myPromises.push(createPromise('who wants some?')); 

$.when.apply(null, myPromises).done(function() { 
    $('#foo').append('<li class="last">all done!</li>'); 
}); 

のような。この場合、すべての約束オブジェクトを.when()に渡しています。コードの下

ここでは例JsFiddle Example

Answer 2

が私のために働いた、コードは大丈夫だったが、それは最初のページをロードするのにかかる時間の問題でした。 2ページ目は2〜3秒後にしかロードできませんでした。

(function ($) { 
    $(document).ready(function() { 

    var loadPageLoaded = function(){ return $('div.loadContainer').load('load.html').promise();} 
    var loadAwardsPage = function(){ 
     var maincontainer = $('div#maincontainer'); 
     return $.Deferred(function(promise) { 
      maincontainer.load('assets/templates/awards.html'); 
      promise.resolve(); 
     }).promise(); 
    } 
    loadPageLoaded().done(function() { 
     setTimeout(function() { 
     loadAwardsPage(); 
     }, 2000) 
    }); 
    }); 
})(jQuery) 

Answer 3

thenは

あなたのコードが実行される

とloadPageLoaded()とloadAwardsPage()はすぐに...結果（約束を）.thenに渡される引数としての機能（onResolvedに1つ、onRejectedための第二）を取りそれは、引数だ...しかし.then関数ではないものを無視して - それ故にエラー

簡単な解決策は.thenへの引数として機能loadAwardsPageを渡すことはありません - すなわち()

を削除します

(function($) { 
    $(document).ready(function() { 
     var loadPageLoaded = function() { 
      return $('div.loadContainer').load('load.html').promise(); 
     } 
     var loadAwardsPage = function() { 
      return $('div#maincontainer').load('assets/templates/awards.html').promise(); 
     } 
     loadPageLoaded().then(loadAwardsPage); 
    }); 
})(jQuery)