Question

作为标题，我尝试将数据从ajax加载到zabuto日历，但似乎它不起作用，参考zabuto日历http://zabuto.com/dev/calendar/examples/show_data.html。我想在点击导航上个月或下个月时使用此功能加载数据。（使用两个操作action和action_nav）。这是剪切代码

<script>   
    $(document).ready(function () {
    function load_data() {
                    var list = '';
                    $.ajax({
                        type: "POST",
                        url: "../BUS/WebService.asmx/LOAD_DATA",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        cache: false,
                        success: function (data) {
                            list = $.parseJSON(data.d);
                            console.log(list);
                        }
                    });
                    return list;
                }
       function myNavFunction(id) {
                //code in here
            }

            function myDateFunction(id) {
                //code in here
            }
    $("#my_calendar").zabuto_calendar({
                    data: load_data(),
                    action: function () {
                           return myDateFunction(this.id);
                    },
                    action_nav: function () {
                           return myNavFunction(this.id);
                    }
                });

    });

    </script>

当我测试这个时，数据不显示，来自ajax的数据为 { "date": "2016-06-01", "title": 2, "badge": true },{ "date": "2016-06-04", "title": 1, "badge": true },{ "date": "2016-06-10", "title": 1, "badge": true } 非常感谢你。

Answer 1

尝试以下操作：您需要将日历函数放在ajax调用的success函数中，因为ajax是异步的

$(document).ready(function () {
function load_data() {
                $.ajax({
                    type: "POST",
                    url: "../BUS/WebService.asmx/LOAD_DATA",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    cache: false,
                    success: function (data) {
                        var list = $.parseJSON(data.d);
                        $("#my_calendar").zabuto_calendar({
                           data: list;
                        });
                    },
                    error: function (data) {
                        console.log(data.d);
                    }
                });
            }


load_data();
});

Answer 2

我通过以下代码解决了该问题。它在Window的浏览器中运行良好，但在移动浏览器中却无法运行。

function initZabuto(id, events, month){
    $('#zabuto_parent').empty().append("<div id='"+id+"'></div>");
    $("#"+id).zabuto_calendar({
        year:moment(month).format("YYYY"),
        month:moment(month).format("MM"),
        language:"cn",
        data: events,
        action: function () {
            zabutoDayClick(this.id);
        },
        action_nav: function () {
            zabutoMonthChange(this.id);
        }
    });
}

Answer 3

这是我用于在模态后刷新Zabuto日历的代码。其他选项的问题在于，刷新后，Zabuto会创建一批附加到当前主体的模态。该解决方案清除了所有这些“旧”模式，并为新模式打开了空间。关键区域是模式更新ajax的成功部分。

$(document).ready(function () {
    $("#date-popover").popover({html: true, trigger: "manual"});
    $("#date-popover").hide();
    $("#date-popover").click(function (e) {
        $(this).hide();
    });
    load_calendar();
});

function load_calendar() {
    $("#my-calendar").zabuto_calendar({
        show_next: 1,
        action: function () {
            return myDateFunction(this.id, false);
        },
        ajax: {
            url: "calendar-info.php",
            modal: true
        },
    });
}
        
function myDateFunction(id, fromModal) {
    $("#date-popover").hide();
    if (fromModal) {
        $("#" + id + "_modal").modal("hide");
        var date = $("#" + id).data("date");
        var optradio = $("#" + id + "_modal").find("input[name='optradio']:checked").val();
        $.ajax("calendar-update.php?status="+optradio+"&date="+date, {
            success: function(data) {
                $(".modal").remove();
                $('body').removeClass('modal-open');
                $('.modal-backdrop').remove();
                $("#my-calendar").empty();
                load_calendar();
            },
            error: function() {
                  alert("Problem!");
            }
        });
    }
    var hasEvent = $("#" + id).data("hasEvent");
    if (hasEvent && !fromModal) {
        return false;
    }
    return true;
}

如何将数据从ajax加载到zabuto日历插件？

3 个答案: