Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/solr/3.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 使用控制器中的结构初始化TempusDominus datetimepicker_Javascript_Java_Jquery_Ajax_Tempus Dominus Datetimepicker - Fatal编程技术网

Javascript 使用控制器中的结构初始化TempusDominus datetimepicker

Javascript 使用控制器中的结构初始化TempusDominus datetimepicker,javascript,java,jquery,ajax,tempus-dominus-datetimepicker,Javascript,Java,Jquery,Ajax,Tempus Dominus Datetimepicker,我有一个tempusdominus datetimepicker和一个链接的select。我从控制器中得到一个结构,由一个Map>组成,其中的键是datetimepicker中应该启用的日期,每个日期都有一个小时列表,当用户选择日期时,我必须在链接选择中显示该列表 我的jsp中有以下内容: <div class="row"> <div class="col-sm-6 labels"> <div class="form-group">

我有一个tempusdominus datetimepicker和一个链接的select。我从控制器中得到一个结构,由一个Map>组成,其中的键是datetimepicker中应该启用的日期,每个日期都有一个小时列表,当用户选择日期时,我必须在链接选择中显示该列表

我的jsp中有以下内容:

<div class="row"> 
    <div class="col-sm-6 labels">
        <div class="form-group">
            <label>Date</label>
            <div class="input-group date" id="fechaCita" data-target-input="nearest">
            <input type="text" class="form-control datetimepicker-input" data-target="#fechaCita"/>
            <div class="input-group-append" data-target="#fechaCita" data-toggle="datetimepicker">
                 <div class="input-group-text"><i class="fa fa-calendar"></i></div>
            </div>
        </div>
    </div>
</div>
<div class="col-sm-4 labels">
    <div class="form-group">
        <label>Time</label>
        <div class="input-group date" id="horaInicio">
            <form:select path="horario.horaInicio" id="selectHoraCita" class="form-control">
                <form:option value="">--</form:option>
            </form:select>
            <input type="hidden" id="horaInicioSelected" />
        </div>
    </div>
</div>
然后在我的javascript文件中,我有以下内容:

$(function() {

    $.ajax({
        url: rutaBase + '/huecos.json',
        success: { function(huecos) {
            console.log('Huecos' + huecos);
            var enabledDates = [];
            for (var key in huecos) {
                  if (huecos.hasOwnProperty(key)) {
                    enabledDates.push(key);
                  }
                }

            $('#fechaCita').datetimepicker({
                format : 'DD/MM/YYYY', // Solo se mostrará la fecha
                enabledDates : enabledDates,
                icons : {
                    date : "fa fa-calendar",
                    up : "fa fa-caret-up",
                    down : "fa fa-caret-down",
                    previous : "fa fa-caret-left",
                    next : "fa fa-caret-right",
                    today : "fa fa-today",
                    clear : "fa fa-clear",
                    close : "fa fa-close"
                }

            });


            $("#fechaCita").on("change.datetimepicker", function (e) {
                console.log('Onchange! ' + e.date);
                $('#selectHoraCita').empty();
                var horas = huecos[e.date];
                horas.each(function(index, listItem) {
                    console.log('List item ' +listItem);
                    if (p.hasOwnProperty(e.date)) {
                        $('#horaCita').append($("<option></option>")).attr("value", listItem).text(listItem);
                    }
                });
            });
        }
        }

    });


});
这个Ajax调用的结果是{2019-09-12=[12:00-13:00,14:30-15:00],2019-09-13=[10:00-11:00]}

但这不起作用,我有一个带有日期和时间的datetimepicker,但我在控制台上什么都没有。。。如果我执行ajax调用并只放置enabledDates:[2019-09-1212019-09-13]它会工作,但如果我尝试从ajax调用中获取它们,则不会工作


我对ajax/jquery/javascript很没用,所以我肯定我做错了什么…

所以我猜,我有各种语法错误:

$(function() {

    $.ajax({
        url : rutaBase + '/huecos.json',
        success : function(huecos) {
            var enabledDates = [];
            for ( var key in huecos) {
                if (huecos.hasOwnProperty(key)) {
                    enabledDates.push(key);
                }
            }

            $('#fechaCita').datetimepicker({
                format : 'DD/MM/YYYY', // Solo se mostrará la fecha
                enabledDates : enabledDates,
                icons : {
                    date : "fa fa-calendar",
                    up : "fa fa-caret-up",
                    down : "fa fa-caret-down",
                    previous : "fa fa-caret-left",
                    next : "fa fa-caret-right",
                    today : "fa fa-today",
                    clear : "fa fa-clear",
                    close : "fa fa-close"
                }

            });

            $("#fechaCita").on(
                    "change.datetimepicker",
                    function(e) {
                        $('#selectHoraCita').empty();
                        $('#selectHoraCita').append($("<option></option>").attr("value","").text("--"));
                        var horas = [];
                        var fecha = moment(e.date).format('YYYY-MM-DD');
                        horas.push(huecos[fecha]);
                        horas
                                .forEach(function(listItem) {

                                    listItem.forEach(function(opcion) {
                                        $('#selectHoraCita').append(
                                                $("<option></option>").attr(
                                                "value", opcion).text(
                                                opcion));
                                    });
                                });
                    });

        },
        error : function() {
            console.log('Error');
        }

    });

});