时间戳

首页 > 解决方案 > 文档更改时未调用 Ajax 函数

javascript - 文档更改时未调用 Ajax 函数

问题描述

我正在使用日期范围选择器。您可以看看这个https://jsfiddle.net/soongsta/r369crfv/。我也提供了这个 daterangepicker 的代码。

DateRangePicker 的 HTML 代码

<!-- Date and time range -->
<div class="form-group">
  <label>Date range button:</label>

  <div class="input-group-btn">
    <button type="button" class="btn btn-default" id="daterange-btn" style='width:230px'>

        <i class="fa fa-calendar"></i>&nbsp; <span>defaut date</span>

      <i class="fa fa-caret-down"></i>
    </button>
    <button id='btnDec' type="button" class="btn btn-danger btn-flat" title='Decrement month'><i class="fa fa-calendar-minus-o" aria-hidden="true"></i></button>
    <button id='btnInc' type="button" class="btn btn-info btn-flat" title='Increment month'><i class="fa fa-calendar-plus-o" aria-hidden="true"></i></button>

  </div>
</div>
<!-- /.form group -->

Javascript + Jquery()

var start = moment().startOf('month');
var end = moment().endOf('month');
var label = '';

    $('#daterange-btn').daterangepicker({
            locale: {
            format: 'DD MMM YYYY'
        },
        startDate: moment(start),
        endDate: moment(end),
        ranges: {
           'Today': [moment(), moment()],
           'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
           'Last 7 Days': [moment().subtract(6, 'days'), moment()],
           'Last 30 Days': [moment().subtract(29, 'days'), moment()],
           'This Month': [moment().startOf('month'), moment().endOf('month')],
           'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
        }
    }, 
    function(start, end, label) {
      if(isDate(start)){
        $('#daterange-btn span').html(start.format('DD MMM YYYY') + ' - ' + end.format('DD MMM YYYY'));
      }
    });

    $('#btnInc').click ( function(e) {
        IncDecMonth('Inc')
    })

    $('#btnDec').click ( function(e) {
        IncDecMonth('Dec')
    })

function isDate(val) {
    //var d = new Date(val);
    //return !isNaN(d.valueOf());
    var d = Date.parse(val);
    console.log(d);
    return Date.parse(val);
}

    function IncDecMonth(Action) {
      if(!isDate(start)){
        start = moment().startOf('month');
      }
        if(Action == 'Inc'){
        start = moment(start).add(1, 'month').startOf('month');
        end =  moment(start).endOf('month')
      }
      else
      {
        start = moment(start).subtract(1, 'month').startOf('month');
        end =  moment(start).endOf('month')
      }
      if(isDate(start)){
        $('#daterange-btn span').html(start.format('DD MMM YYYY') + ' - ' + end.format('DD MMM YYYY'));
      }
            console.log('start='+start)
      console.log('end='+end)
    }

    IncDecMonth();

我希望当一个人选择日期范围时，请求应该以日期范围作为数据访问我的服务器。

为此，我编写了以下代码：-

<script type="text/javascript">

     $(document).on("change","#daterange-btn span",function()
      {
        alert('hi'); //I am using this to check whether this function is actually being called or not.

        $.ajax(  
        {
          url:"post/datepicker/",
          type:"POST",
          data:{date:$("#daterange-btn span").html()},
          dataType:"json"
        });

      });
   </script>

但是我在我的服务器上看不到任何 POST 请求。此外，也没有显示“hi”的弹出窗口，这最终意味着没有调用 document.on('change')。

你能告诉我我在哪里做错了吗？

标签： javascriptjquery

解决方案

确保将所有 ajax 调用包含在

$(function(){

})

在使用 jquery 之前确保 dom 已加载

更新

抱歉，我没有阅读整个问题，只看到了最后一个脚本标签。阅读问题后，我打开了 daterangepicker 的文档并解决了问题。这是工作脚本

<script type="text/javascript">


    window.onload = function () {

        //var start = ''; //moment().startOf('month');
        //var end = ''; //moment().endOf('month');
        //var label = '';

        var start = moment().startOf('month');
        var end = moment().endOf('month');
        var label = '';

        $('#daterange-btn').daterangepicker({
            locale: {
                format: 'DD MMM YYYY'
            },
            startDate: moment(start),
            endDate: moment(end),
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
            }
        },
            function (start, end, label) {
                if (isDate(start)) {
                    $('#daterange-btn span').html(start.format('DD MMM YYYY') + ' - ' + end.format('DD MMM YYYY'));
                }
            });

        $('#btnInc').click(function (e) {
            IncDecMonth('Inc')
        })

        $('#btnDec').click(function (e) {
            IncDecMonth('Dec')
        })

        function isDate(val) {
            //var d = new Date(val);
            //return !isNaN(d.valueOf());
            var d = Date.parse(val);
            //console.log(d);
            return Date.parse(val);
        }

        function IncDecMonth(Action) {
            if (!isDate(start)) {
                start = moment().startOf('month');
            }
            if (Action == 'Inc') {
                start = moment(start).add(1, 'month').startOf('month');
                end = moment(start).endOf('month')
            }
            else {
                start = moment(start).subtract(1, 'month').startOf('month');
                end = moment(start).endOf('month')
            }
            if (isDate(start)) {
                $('#daterange-btn span').html(start.format('DD MMM YYYY') + ' - ' + end.format('DD MMM YYYY'));
            }
            //console.log('start=' + start)
            //console.log('end=' + end)
            //
            $('#daterange-btn').trigger('apply.daterangepicker');
        }

        IncDecMonth();
    }

</script>

<script type="text/javascript">

    $(function () {
        $('#daterange-btn').on('apply.daterangepicker', function (ev, picker) {

            $.ajax(
                {
                    url: "post/datepicker/",
                    type: "POST",
                    data: { date: $("#daterange-btn span").html() },
                    dataType: "json"
                });
        });
    });
</script>

您在更新值后缺少调用apply事件并且还听应用事件而不是跨度change事件

推荐阅读