如何将数据从Ajax加载到zabuto日历插件? [英] How to load data from ajax to zabuto calendar plugin?

问题描述

作为标题，我尝试将数据从ajax加载到zabuto日历，但是zabuto日历http://zabuto.com/dev/calendar/examples/show_data.html的引用似乎不起作用.我想使用此功能加载数据时单击导航前一个月或下个月. (使用两个动作action和action_nav).这是片段代码

As title, I tried load data from ajax to zabuto calendar, but seem it's not working, ref of zabuto calendar http://zabuto.com/dev/calendar/examples/show_data.html. And i want to use this function load data when click nav prev month or next month. (use two action action and action_nav). This is snipped code

<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 } 非常感谢.

When i test this, data not show, the data from ajax as { "date": "2016-06-01", "title": 2, "badge": true },{ "date": "2016-06-04", "title": 1, "badge": true },{ "date": "2016-06-10", "title": 1, "badge": true } Thank you so much.

推荐答案

尝试以下操作:由于ajax是异步的，因此您需要将日历函数放置在ajax调用的成功函数中

Try the following: you need to place the calendar function in the success function of the ajax call because ajax is asynchronous

$(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();
});

这篇关于如何将数据从Ajax加载到zabuto日历插件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！