【问题标题】:Moment.js undefined object reference on ajax requestMoment.js 对 ajax 请求的未定义对象引用
【发布时间】:2016-07-05 09:37:00
【问题描述】:

我正在尝试使用 Eonasdan 的 bootstrap-datetimepicker 制作一个简单的预订日历,该日历基于 moment.js 库构建,我包含了本地化文件。我设置了一个基本的链接选择器输入字段和一个按钮,以使用简单的 ajax 请求发送一封带有日期的电子邮件。但是,在提交表单时,我收到以下错误:

// locale-hr.js(第 89 行,第 1 列)

TypeError: this is undefined switch (this.day()) {

文件摘录(第 88-102 行):

nextWeek : function () {
    switch (this.day()) {
        case 0:
            return '[u] [nedjelju] [u] LT';
        case 3:
            return '[u] [srijedu] [u] LT';
        case 6:
            return '[u] [subotu] [u] LT';
        case 1:
        case 2:
        case 4:
        case 5:
            return '[u] dddd [u] LT';
    }
},

不发送电子邮件,但从日历中获取日期。

这是我的 ajax 文件:

$(function() {
    $("#reservationForm").on("submit", function(e) {
        e.preventDefault();

        var url = "../bin/reservation.php";

        // stores dates from each calendar
        var date1 = $("#datetimepicker1").data("DateTimePicker").date();
        var date2 = $("#datetimepicker2").data("DateTimePicker").date();

        $.ajax({             
            type: "POST",
            url: url,
            data: { date1: date1, date2: date2 },
        }).done(function(response) {
            alert("Msg sent");
        });                     
    });
});

还有 PHP 文件:

<?php
    if ( empty($_POST['date1']) || empty($_POST['date2']) ) {
        echo ERROR_NO_ARGS;
        return false;
    }

    $date1 = $_POST['date1'];
    $date2 = $_POST['date2'];

    $to = 'my@email.com';
    $email_subject = "Title";
    $email_body = "Selected dates:" . "From $date1 to $date2";
    $headers = "From: Contact form\n";      
    $headers .= "Content-Type: text/plain; charset=utf-8" . "\r\n";

    mail($to, $email_subject, $email_body, $headers);

    return true;            
?>

如您所见,这是非常基本的东西。我想知道我在这里遗漏了什么,以便 locale-hr.js 没有可引用的对象,或者我做错了什么,或者这是需要修复的已知问题(谷歌没有提供给我任何东西)。这是jsfiddle,但没有ajax调用,因为我以前从未使用过小提琴,现在不知道如何设置它。我可能稍后会回来弄清楚并添加它。

如果我应该扩展问题,请通知我。谢谢。

【问题讨论】:

  • 它是否适用于其他语言环境(例如英语)?
  • 嗯,尝试使用 en-gb 并似乎通过了上述错误,但出现了另一个错误:TypeError: this is undefined ...ts).parseZone()}function _b(a,b,c){var d=this._calendar[a];return"function"==typ... - (moment.min.js line 6 col 20621)

标签: javascript ajax momentjs bootstrap-datetimepicker


【解决方案1】:

Eonasdan 的 bootstrap-datetimepicker date 方法返回一个 moment object,因此您正在尝试向您的服务器发送一个 jQuery 无法序列化的对象(请参阅 jQuery.ajax data 部分)。您必须更改发送到服务器的类型,您可以:

  • 使用矩format 传递一个字符串(如果需要,您可以指定格式)。您的代码将是:data: { date1: date1.format(), date2: date2.format() }
  • 使用时刻 valueOf() 传递毫秒。代码:data: { date1: date1.valueOf(), date2: date2.valueOf() }
  • 使用时刻 unix() 传递秒数。代码:data: { date1: date1.unix(), date2: date2.unix() }

【讨论】:

  • 非常有用的信息。我认为从日历中获取日期的函数已经将它作为时刻对象返回,所以我并没有真正考虑再次格式化它。我会将其标记为已接受的答案。谢谢 VincenzoC。
【解决方案2】:

可能有一些错误:

更新小提琴:

`https://jsfiddle.net/dssoft32/d4zuxy4e/2/`

// Template JS

var fnMain = function(){

    // Calendar localization
    var hr = moment.locale('hr', {
        days: ["Ponedjeljak", "Utorak", "Srijeda", "Četvrtak", "Petak", "Subota","Nedjelja"],
        weekdaysShort: ["Pon", "Uto", "Sri", "Čet", "Pet", "Sub","Ned"],
        weekdaysMin: ["Po", "Ut", "Sr", "Če", "Pe", "Su", "Ne"],
        months: ["Siječanj", "Veljača", "Ožujak", "Travanj", "Svibanj", "Lipanj", "Srpanj", "Kolovoz", "Rujan", "Listopad", "Studeni", "Prosinac"],
        monthsShort: ["Sij", "Velj", "Ožu", "Tra", "Svi", "Lip", "Srp", "Kol", "Ruj", "Lis", "Stu", "Pro"],
        today: "Danas",
        }
    );


    var enumerateDaysBetweenDates = function( startDate, endDate ) {
        var dates = [];
      
        while (startDate<= endDate) {
            dates.push(startDate.format('D/M/YYYY'));
            startDate.add(1,  'days');
        }

        return dates;
    };


    var formatDisabledDates = function( dateSet ) {
        var newSet = [];

        for( var i=0; i < dateSet.length; i++ ) {

            newSet.push( moment( dateSet[i], "D/M/YYYY") );

        }

        return newSet;

    }


        var fromDate = moment("10/07/2016", "D/M/YYYY"); 
        var toDate = moment("21/07/2016", "D/M/YYYY"); 

              var results = enumerateDaysBetweenDates(fromDate, toDate);

    //});

    var disabledSet = formatDisabledDates( results );
    console.log( disabledSet );

    var chckDate;

    $('#datetimepicker1').datetimepicker({
    	useCurrent: false, 
    	allowInputToggle: true,
    	viewMode: 'days',
        //minDate: moment(),
		locale: hr,
		format: 'DD/MM/YYYY',
        disabledDates: disabledSet
    }).on("dp.change", function (e) {
        chckDate = $(this).data("DateTimePicker").date();
        chckDate = chckDate.format('DD. MM. YYYY');
        
    }).on("dp.show", function (e){
        $("[data-day*='"+ chckDate + "']").addClass("startFrom");

    });

    $('#datetimepicker2').datetimepicker({
        useCurrent: false,
        allowInputToggle: true,
        viewMode: 'days',
		locale: hr,
		format: 'DD/MM/YYYY',
        disabledDates: disabledSet
    }).on("dp.change", function (e) {
    //
    }).on("dp.show", function (e){
        $("[data-day*='"+ chckDate + "']").addClass("startFrom");
    });

        










} // fnMain endDate



$( document ).ready( fnMain );
body {
    background-color: #eee;
}

.input-group {
    margin-top: 20px;
}


.bootstrap-datetimepicker-widget table td.disabled, .bootstrap-datetimepicker-widget table td.disabled:hover {
    background: rgba(255, 0, 0, 0.1) none repeat scroll 0 0;
    border-radius: 0;
    color: #777;
    cursor: not-allowed;
}

.bootstrap-datetimepicker-widget table td.startFrom, .bootstrap-datetimepicker-widget table td.startFrom:hover {
    background-color: orange;
    border-radius: 0;
    color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://github.com/moment/moment/blob/develop/locale/hr.js"></script>


<div class="container">

    <form id="reservationForm">
      <div class='col-md-6'>
      
      <!-- FROM -->
        <div class="form-group">
            <div class='input-group date' id='datetimepicker1'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
      </div>

      <!-- TO -->
      <div class='col-md-6'>
          <div class="form-group">
              <div class='input-group date' id='datetimepicker2'>
                  <input type='text' class="form-control" />
                  <span class="input-group-addon">
                      <span class="glyphicon glyphicon-calendar"></span>
                  </span>
              </div>
          </div>
      </div>

      <div class="col-md-12">
        <button class="logdates" type="submit">Send</button>
      </div>

    </form>
  </div>

【讨论】:

  • 既然你提到了,我在 hr.js 被标记为源的小提琴中看到了与 相关的错误。 SyntaxError: expected expression, got '&lt;'我尝试实现你对 JS 文件所做的更改,但都是一样的。
猜你喜欢
  • 2013-07-05
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-10-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多