javascript - 奇怪的重定向错误

Question

我有一个 jQuery 日期选择器。我写了一个函数，当用户点击一个日期时，它会添加一个 URL 参数(日期)。如果设置了日期，我想使用日期选择器的 setDate 方法将日期设置为 URL 参数。如果未设置，将使用今天的日期。我已经完成了从 URL 获取日期，但日期选择器的日期没有设置。奇怪的是，如果我只是手动将 ?date=xxxxx 添加到 url，它会完美运行。因此，当我尝试使用 onSelect

引起重定向时，就会发生这种情况

页面可以查看here .

This page可以查看手动添加参数是否有效。

Answer 1

与重定向无关。它与您页面上的事件顺序有关。在不起作用的页面上，您在 $(function () {}) 中进行了 .datepicker 初始化，这意味着它将在 DOM 准备就绪时运行(在您的其余 Javascript 之后)。那只是绑定(bind)一个事件。然后，在绑定(bind)事件后，您立即尝试调用 .datepicker("setDate",qs_date)。但是你不能那样做，因为你的日期选择器还没有被初始化，因为 $(function() {}) 中的函数还没有被执行。您应该使用此代码:

$(function() {
    $("#datepicker").datepicker({
        onSelect: function(date, picker){ 
            var url = "http://wwwdev.cco.purdue.edu/asp/Calendar/matt_test.asp?date=" + date;
            window.location = url;
        }
    });

    var qs_date = location.href.match(/[?&]date=([^&#]+)/); 

    if (qs_date){
        qs_date = qs_date[1];
        alert(qs_date);
        $("#datepicker").datepicker("setDate",qs_date);
    }
});

在工作示例中，您没有使用 $(function () {})，因此日期选择器会立即初始化，然后您根据查询字符串设置日期。上面的代码有效地做了同样的事情，只是它在技术上可以放在页面的任何地方。操纵 DOM 的内联 Javascript 需要在渲染后运行。这就是工作示例起作用的原因，这也是 $(function () {}) 保证的。

我确信有一个更好的方法可以通过它的初始化选项在日期选择器上初始设置日期，但我提供的应该做同样的事情，只是有点不必要。

更新:

我认为 defaultDate 选项允许您在初始化时设置初始日期 - http://api.jqueryui.com/datepicker/#option-defaultDate

所以你可以使用:

$(function() {
    var qs_date = location.href.match(/[?&]date=([^&#]+)/);
    if (qs_date) {
        qs_date = qs_date[1];
        //alert(qs_date);
    }

    $("#datepicker").datepicker({
        defaultDate: qs_date,
        onSelect: function(date, picker){ 
            var url = "http://wwwdev.cco.purdue.edu/asp/Calendar/matt_test.asp?date=" + date;
            window.location = url;
        }
    });
});

它应该可以完美运行，因为如果 qs_date 为 null(查询字符串中没有匹配项)，则将 defaultDate 值设置为 null 等同于省略它(它的默认值)并将日期设置为今天。因此，只有当查询字符串中存在匹配项时，默认日期才会从今天开始更改。