奇怪的重定向错误

Question

我有一个jQuery datepicker。我写了一个函数，当用户点击一个日期时会添加一个URL参数（日期）。如果日期已设置，我想使用datepicker的setDate方法将日期设置为URL参数。如果没有设置，则会使用今天的日期。我已经完成了从URL获取日期，但datepicker的日期没有设置。而奇怪的是，如果我只是手动将?date=xxxxx添加到网址，它完美的工作。因此，当我尝试通过onSelect

页面可以被查看here时发生。

This page可以看到手动添加参数。

Answer 1

它与重定向无关。它与您网页上的事件顺序有关。在不起作用的页面上，您的内部的.datepicker初始化，这意味着它将在DOM准备就绪时运行（在Javascript的其余部分之后）。这只是一个事件的约束。然后，在绑定事件后立即尝试拨打.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() {})，所以日期选择器会立即initalized，然后您将针对查询字符串的日期。上面的代码有效地做了同样的事情，除了技术上它可以放在页面上的任何地方。操作DOM的内嵌Javascript需要在渲染后运行。这就是为什么这个工作示例有效，这也是$(function() {})所保证的。

我敢肯定，有一个更好的方法来初始化日期选择器上的日期，通过它的初始化选项，但我提供的应该做同样的事情，只是有点不必要。

UPDATE：

我认为的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（查询字符串中没有匹配），那么设置t他defaultDate值为null与删除它（默认值）相同，并将日期设置为今天。所以只有在查询字符串中有匹配时，默认日期才会从今天开始改变。