2011-07-16 12 views
0

私は複数の(3)ajaxリクエストを実行しています。どのようにそれらのすべてが正常に返されたかどうかをチェックし、その後は出力で何かを行うことができます。私は要求を連鎖することを考えましたが、そのような要求は同時に実行されませんでした。複数のajaxリクエストの完了を確認する方法は?

最終的に私は3つのテーブルを読み込もうとしていますが、読み込んだ後、その位置をアニメートします。アニメーションは、すべてのテーブルがロードされた後にのみ実行されます。

さらに、複数のajax呼び出しを処理するための良い方法はありますか?現時点では、構文が単純に前のものを繰り返しているときには、構文が「きれい」に見えません。

ありがとうございます!

// THIS TABLE 
$.ajax({ 
    type: 'POST', 
    url: 'includes/content/bookingsystem/b_dayview.php', 
    data: $(this).attr('name') + '=true', 
    success: function(output) { 

    $('#bookingTableThis').animate({ 
     left: direction + '=820' 
    }, 500, function() { 
     $('#bookingTableThis').html(output); 
    }); 

    } 

}); 


// PREV TABLE 
$.ajax({ 
    type: 'POST', 
    url: 'includes/content/bookingsystem/b_dayview.php', 
    data: $(this).attr('name') + '=true&dateShift=prev', 
    success: function(output) { 

    $('#bookingTablePrev').animate({ 
     left: direction + '=820' 
    }, 500, function() { 
     $('#bookingTablePrev').html(output); 
    }); 

    } 
}); 


// NEXT TABLE 
$.ajax({ 
    type: 'POST', 
    url: 'includes/content/bookingsystem/b_dayview.php', 
    data: $(this).attr('name') + '=true&dateShift=next', 
    success: function(output) { 

    $('#bookingTableNext').animate({ 
     left: direction + '=820' 
    }, 500, function() { 
     $('#bookingTableNext').html(output); 
    }); 

    } 

}); 

ジェネシス答えは現場でだったが、残念ながら、それは別の問題が発生した:

は、ここに私のコードです。多くの場合、私はJavascriptで変数を渡すのに問題がありました - この場合も同様です。

var outputThis; 
var outputPrev; 
var outputNext; 

$.when(function(){ 

    // THIS TABLE 
    $.ajax({ 
    type: 'POST', 
    url: 'includes/content/bookingsystem/b_dayview.php', 
    data: $(this).attr('name') + '=true', 
    success: function(output) { outputThis = output; } 
    }); 

    // PREV TABLE 
    $.ajax({ 
    type: 'POST', 
    url: 'includes/content/bookingsystem/b_dayview.php', 
    data: $(this).attr('name') + '=true&dateShift=prev', 
    success: function(output) { outputPrev = output; } 
    }); 

    // NEXT TABLE 
    $.ajax({ 
    type: 'POST', 
    url: 'includes/content/bookingsystem/b_dayview.php', 
    data: $(this).attr('name') + '=true&dateShift=next', 
    success: function(output) { outputNext = output; } 
    }); 

}).then(function(){ 

    // THIS 
    $('#bookingTableThis').animate({ 
     left: direction + '=820' 
    }, 500, function() { 
     $('#bookingTableThis').html(outputThis); 
    }); 

    // PREV 
    $('#bookingTablePrev').animate({ 
    left: direction + '=820' 
    }, 500, function() { 
    $('#bookingTablePrev').html(outputPrev); 
    }); 

    // NEXT 
    $('#bookingTableNext').animate({ 
    left: direction + '=820' 
    }, 500, function() { 
    $('#bookingTableNext').html(outputNext); 
    }); 

}); 

答えて

3
$.when(function(){// THIS TABLE 
$.ajax({ 
    type: 'POST', 
    url: 'includes/content/bookingsystem/b_dayview.php', 
    data: $(this).attr('name') + '=true', 
    success: function(output) { 

    $('#bookingTableThis').animate({ 
     left: direction + '=820' 
    }, 500, function() { 
     $('#bookingTableThis').html(output); 
    }); 

    } 

}); 


// PREV TABLE 
$.ajax({ 
    type: 'POST', 
    url: 'includes/content/bookingsystem/b_dayview.php', 
    data: $(this).attr('name') + '=true&dateShift=prev', 
    success: function(output) { 

    $('#bookingTablePrev').animate({ 
     left: direction + '=820' 
    }, 500, function() { 
     $('#bookingTablePrev').html(output); 
    }); 

    } 
}); 


// NEXT TABLE 
$.ajax({ 
    type: 'POST', 
    url: 'includes/content/bookingsystem/b_dayview.php', 
    data: $(this).attr('name') + '=true&dateShift=next', 
    success: function(output) { 

    $('#bookingTableNext').animate({ 
     left: direction + '=820' 
    }, 500, function() { 
     $('#bookingTableNext').html(output); 
    }); 

    } 

}); 
}).then(function(){ 
    alert('all of them were done'); 

}); 
+0

うわー、のようなものに変更されたことがわかりました、超便利。いいヒント! –

+0

これは確かに私が求めているものです。うわー、jQueryのシンプルさはまだ私を驚かせる。今私は別の問題に遭遇しました。どのように出力変数を "when"関数に渡すのですか?私は、when-thenセクションの外で最初に変数を設定し、各Ajax関数の中でそれらを定義し、最後に "when"関数の中でそれらを読み込むことを試みました - しかし、明らかにスコープに問題があります。とにかく、ありがとう! – Dusty

0

事前初期化3要素グローバル配列は、アレイに結果を保存する:各AJAX呼び出しの出力は「次に」関数内に表示するために好きではありません。アレイが完全に配置されたら、ページを更新します。 2012年にここに来た人のためにbenifit

2

、私は上記の回答の構文はjQueryので「とき」関数のことを聞いたことがない

以下
$.when(
     $.ajax({ 
      type: 'GET', 
      url: '/api/data/jobtypes', 
      dataType: "json", 
      success: loadJobTypes 
     }), 

     $.ajax({ 
      type: 'GET', 
      url: '/api/data/servicetypes', 
      dataType: "json", 
      success: loadServiceTypes 
     }), 

     $.ajax({ 
      type: 'GET', 
      url: '/api/data/approvaltypes', 
      dataType: "json", 
      success: loadApprovalTypes 
     }), 

     $.ajax({ 
      type: 'GET', 
      url: '/api/data/customertypes', 
      dataType: "json", 
      success: loadCustomerTypes 
     }) 

    ).done(function(){ 

     alert("all done"); 
    }); 
関連する問題