奇怪的重定向錯誤

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與刪除它（默認值）相同，並將日期設置爲今天。所以只有在查詢字符串中有匹配時，默認日期纔會從今天開始改變。