1

データベースから取得した特定の日付を無効にするコードを作成しました。

getDates スクリプト内では、データベースから日付を取得し、それらを返し、配列availabledatesに割り当てます。

<script>
var unavailableDates;

function unavailable(date) {
    dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
    if ($.inArray(dmy, unavailableDates) == -1) {
        return [true, ""];
    } else {
        return [false, "", "Unavailable"];
    }
}

$(document).ready(function()
{
    $("#datepicker").datepicker({
        dateFormat: 'yy-mm-dd',  
        beforeShowDay: unavailable, 
        minDate: 0,
        firstDay: 1, // rows starts on Monday
        changeMonth: true,
        changeYear: true,
        showOtherMonths: true,
        selectOtherMonths: true,
        altField: '#date_due',
        altFormat: 'yy-mm-dd'
        });

    $('#datepicker').focus(function(){
        //alert($('#name').html());
         $.ajax({                                      
        url: 'getDates.php',                  
        data: "artist_id="+$('#name').html(),                       
        dataType: 'json',                     
        success: function(data)          
        {
                   unavailableDates = data;
        } 
        });
    })

});
</script>

正常に動作しますが、datepicker を 2 回クリックした場合のみです。最初にクリックすると、すべての日付が表示されます (利用可能かどうかに関係なく)。もう一度クリックすると、利用できない日付が表示されます。

誰かが理由を知っていますか？ありがとう

4

3 に答える 3

1

日付ピッカーが表示されたときに、利用できない日付を取得するためのリクエストを開始するためです。これは事前に行う必要があります。バックエンド リクエストのコールバックで、datepicker を表示できます。

于 2013-08-09T21:11:03.363 に答える
1

async: false を ajax 呼び出しに追加して、アプリが続行する前に応答を待機するようにします。

$('#datepicker').focus(function(){
    //alert($('#name').html());
     $.ajax({                                      
    url: 'getDates.php',                  
    data: "artist_id="+$('#name').html(),                       
    dataType: 'json', 
    async: false,            
    success: function(data)          
    {
               unavailableDates = data;
    } 
    });

別の考えとして、onFocus と beforeShowDay の 2 つを最初に実行するのではなく、この ajax 呼び出しを使用できない関数に直接追加することもできます (ただし、beforeShowDay 関数にはあまり詳しくありません)。

ただし、これにより、サービスを待つ必要があるため、日付ピッカーの開始が遅くなる可能性があります。これは、サービスの速度とパフォーマンス要件によって異なります。これが遅くなる可能性がある場合の他のオプションは、「日付の取得」メッセージをポップアップするか、ページが表示されている間 X 秒ごとにサーバーをプルすることです (ただし、多くの余分なサービス呼び出しが追加される可能性があります...)

編集：このコメントの後...

"basically when user selects an option (here they want to book artists so \
when user selects an artist), the unavailable dates of datepicker are 
updated   automatically."

ページが開いている間の変更を気にしない限り、アーティストが選択されたときにリストをロードする方が理にかなっているようです。その場合、私は次のようなことをします...

On Artist Changed
    -Disable date picker, possibly add a small note next to it / under it / 
       over it that it is loading
    -Start ajax call with async true
    -In ajax success function, re-enable the picker and remove the message.

これにより、UI がアクティブなままになり、日付の読み込み中にユーザーが他の情報を入力できるようになります。また、サービスが十分に高速であれば、無効になっていることを 1 秒たりとも認識しません。あなたのデートは他の方法のように「ライブ」ではありませんが、ライブである必要があるようには思えません. いずれにせよ、フォームが送信される日付を再確認する必要があります。

于 2013-08-09T21:22:07.327 に答える