1

私は gldatepicker を使用しています。曜日、特別な日付などの gldatepicker の ajax によってデータベースからいくつかの設定をロードしたいのですが、これには次の js コードがあります。

$(document).ready(function () {
    loadAllSettings();
});
var loadAllSettings = function () {
    startDate = '';
    endDate = '';
    selectDay = '';
    offdays = '';

    $.ajax({
        url: "bs_client_function.php",
        type: "post",
        dataType: "json",
        data: {
            action: 'getDateRange'
        },
        success: function (html) {
            // alert(html.start);
            startDate = Date.parse(html.start);
            endDate = Date.parse(html.end);
        }

    });
    $.ajax({
        url: "bs_client_function.php",
        type: "post",
        dataType: "json",
        data: {
            action: 'getOffdays'
        },
        success: function (html) {
            i = 0;
            offdays = '[';
            while (i < html.length) {
                offdays = offdays + {
                    date: new Date(html[i]),
                    repeatYear: false,
                    cssClass: 'noday'
                };
                i = i + 1;
            }
            offdays = offdays + ']';
        }

    });
    $.ajax({
        url: "bs_client_function.php",
        type: "post",
        data: {
            action: 'getDays'
        },
        success: function (html) {
            var data = $.parseJSON(html);
            // alert("[" + data + "]");
            selectDay = '[' + data + ']';
            // alert(selectDay);
           showCalender(startDate, endDate, selectDay, offdays);
        }

    });
    alert(selectDay);
    console.log('selectDay' + selectDay);

};

gldatepicker が推奨するように、すべてのデータが正しくフォーマットされていることを確認しました。

var showCalender = function (startDate, endDate, selectDay, offdays) {
    var dd = $('#mydate').glDatePicker({
        showAlways: true,
        allowMonthSelect: true,
        allowYearSelect: false,
        prevArrow: '\u25c4',
        nextArrow: '\u25ba',
        cssName: 'darkneon',
        selectableDOW: selectDay,
        dowOffset: 0,
        selectedDate: new Date(),
        selectableDateRange: [{
            from: new Date(startDate),
            to: new Date(endDate)
        }, ],
        specialDates: offdays
    });
};

現在、stardate と enddate のみが正しく機能しています。selectDay、offdays は機能していません。私はコンソールに selectDay を印刷します: [1,2,3] しかし、それは動作していません。 前もって感謝します...

4

1 に答える 1

0

問題は、glDatePicker を埋めるためのデータを取得する方法です。3 つの ajax 呼び出しがあり、これらの呼び出しはデフォルトで非同期です。最後の成功関数で showCalender 関数を実行しますが、前の呼び出しが完了したかどうかはわかりません。

asyncパラメータを設定しfalseて jQuery docsを参照することで、ajax 呼び出しを同期させることができます。

async (デフォルト: true) タイプ: ブール値 デフォルトでは、すべてのリクエストは非同期で送信されます (つまり、デフォルトで true に設定されています)。同期リクエストが必要な場合は、このオプションを false に設定します。クロスドメイン リクエストと dataType: "jsonp" リクエストは、同期操作をサポートしていません。同期リクエストはブラウザを一時的にロックし、リクエストがアクティブな間はすべてのアクションを無効にする場合があることに注意してください。jQuery 1.8 以降、jqXHR ($.Deferred) で async: false を使用することは推奨されなくなりました。jqXHR.done() や非推奨の jqXHR.success() などの jqXHR オブジェクトの対応するメソッドの代わりに、成功/エラー/完了のコールバック オプションを使用する必要があります。

または、すべての成功コールバックでチェーンすることもできますが、コードの管理が難しくなるか、このプラグインを使用して複数の ajax 呼び出しを管理できますhttp://docs.jquery.com/AjaxQueue

ローカルデータでうまく機能します。http://jsfiddle.net/IrvinDominin/V59E7/を参照してください。

specialDatesオプションが必要とするオブジェクトだけに注意してください:

   specialDates: [{
       date: new Date(0, 8, 5),
       data: {
           message: 'Happy Birthday!'
       },
       repeatYear: true,
       cssClass: 'special-bday'
   }, {
       date: new Date(2013, 0, 8),
       data: {
           message: 'Meeting every day 8 of the month'
       },
       repeatMonth: true
   }]
于 2013-05-05T09:19:22.607 に答える