0

現在、次のような関数があります。


$(function(){
 $('.chained_to_vehicle_make_selector').remoteChainedTo('.chained_parent_vehicle_make_selector', '/models.json');
 $('.chained_to_vehicle_model_selector').remoteChainedTo('.chained_parent_vehicle_model_selector', '/trims.json');
 $('.chained_to_vehicle_trim_selector').remoteChainedTo('.chained_parent_vehicle_trim_selector', '/model_years.json');
});

おそらくおわかりのように、各 remoteChainedTo 関数は AJAX 呼び出しを行っており、正常に動作していますが、少し時間がかかります。

次に、2 番目のコード ブロックがあります。


$(function() {
    $(".chzn-select").chosen();
    $(".chained_parent_vehicle_make_selector").chosen().change( function() {$(".chained_to_vehicle_make_selector").trigger("liszt:updated"); });
    $(".chained_parent_vehicle_model_selector").chosen().change( function() {$(".chained_to_vehicle_model_selector").trigger("liszt:updated"); });
    $(".chained_parent_vehicle_trim_selector").chosen().change( function() {$(".chained_to_vehicle_trim_selector").trigger("liszt:updated"); });
    $(".chained_child").chosen();
});

コードのこのセクションは、最初のセクションが完了したに起動する限り、正常に機能します。ただし、AJAX 呼び出しのため、現在は前のセクションの前に起動しています。

最初のブロックが完全に完了した後に 2 番目のコード ブロックが常に起動するように構造を実装するにはどうすればよいですか? remoteChainedTo 関数にはコールバックが定義されていません (私が見ることができます)。いずれにせよ、3 つの呼び出しのどれが最後に終了するかを知ることは不可能です。コードのセクションは、最後の AJAX 呼び出しが完了した後にのみ起動します。

編集: もう少しリファクタリングした後、私のコードは次のようになります。


function makeChains(){
 $('.chained_to_vehicle_make_selector').remoteChainedTo('.chained_parent_vehicle_make_selector', '/models.json');
 $('.chained_to_vehicle_model_selector').remoteChainedTo('.chained_parent_vehicle_model_selector', '/trims.json');
 $('.chained_to_vehicle_trim_selector').remoteChainedTo('.chained_parent_vehicle_trim_selector', '/model_years.json');
}

var chainCall = $(function() {
    makeChains();
});

chainCall.done(function() { 
        $(".chzn-select").chosen();
        $(".chained_parent_vehicle_make_selector").chosen().change( function() {$(".chained_to_vehicle_make_selector").trigger("liszt:updated"); });
        $(".chained_parent_vehicle_model_selector").chosen().change( function() {$(".chained_to_vehicle_model_selector").trigger("liszt:updated"); });
        $(".chained_parent_vehicle_trim_selector").chosen().change( function() {$(".chained_to_vehicle_trim_selector").trigger("liszt:updated"); });
        $(".chained_child").chosen();
    });

しかし、私はまだエラーが発生していますObject [object Object] has no method 'done'。ヒントをいただければ幸いです。

4

0 に答える 0