如何放置文檔準備功能的AJAX功能

我已經使用的其他3頁的日期選擇器功能，所有的偉大工程中，但現在我想將它添加到一個基於Ajax的函數調用showbookings製作了網頁。目前有8個點擊功能在加載動態內容後正在重新附加，但我無法讓datepicker工作，顯示，沒有任何內容。那麼，你如何採取$（文件）。就緒（函數，並將其放入Ajax調用？我有我的輸入級=「DATEPICKER1」如何放置文檔準備功能的AJAX功能

function showbookings(str, pass) { 
    if (str === "") { 
     document.getElementById("txtBookings").innerHTML = ""; 
     return; 
    } 
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp = new XMLHttpRequest(); 
    } else { // code for IE6, IE5 
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      document.getElementById("txtBookings").innerHTML = xmlhttp.responseText; 

     ********* 

     } 
    }; 

    xmlhttp.open("GET", "page1.php?q=" + str, true); 
    xmlhttp.send(); 
} 





$(document).ready(function() { 
    $(".datepicker1").datepicker({ 
     showOn: 'both', 
     buttonImage: 'images/calendar.gif', 
     buttonText: 'Pick Date', 
     buttonImageOnly: true, 
     changeMonth: true, 
     changeYear: true, 
     showAnim: 'slideDown', 
     duration: 'fast', 
     onClose: function (text, inst) { 
      $(this).focus(); 
     } 
    }); 
});

來源

2013-10-30 stapuff

您已經標記了這個'jQuery'，所以**使用jQuery **。停止手動滾動您的AJAX請求，並使用['$ .get']（http://api.jquery.com/jQuery.get/）。您絕不會像jQuery的AJAX方法那樣生成穩健，無缺陷和跨平臺的東西，所以只需使用jQuery爲您提供的東西。你的整個'showbookings'方法應該用'$ .get（「page1.php？q =」+ str）'替換。 – meagar

此外，[請停止在您的帖子和評論中使用簽名]（http://stackoverflow.com/faq#signatures）。我指的是「謝謝，庫爾特」。您的帖子已經使用您的用戶名登錄。 – meagar

So how do you take a $(document).ready(function and place it into the ajax call?

你不知道。這將是毫無意義如果在AJAX調用之後ready事件不會再次爲document觸發，那麼它可能甚至不會執行任何操作，因爲所有代碼都會將事件處理程序附加到該事件上，所以它不會實際執行在處理程序內的代碼，直到事件發生。

這聽起來像你實際上想要d o在AJAX調用之後，初始化添加到DOM的元素上的日期選取器插件。您可以通過只是再次調用插件初始化做到這一點：

$(".datepicker1").datepicker({ 
    showOn: 'both', 
    buttonImage: 'images/calendar.gif', 
    buttonText: 'Pick Date', 
    buttonImageOnly: true, 
    changeMonth: true, 
    changeYear: true, 
    showAnim: 'slideDown', 
    duration: 'fast', 
    onClose: function (text, inst) { 
     $(this).focus(); 
    } 
});

注意，這將匹配DOM中的所有'.datepicker'元素。包括之前已初始化的那些。如果這會在先前初始化的元素上導致不良行爲，那麼只需限制插件的選擇器以僅包含新元素。從你的代碼的外觀上來看，這可能是這樣的：

$("#txtBookings .datepicker1").datepicker({ 
    showOn: 'both', 
    buttonImage: 'images/calendar.gif', 
    buttonText: 'Pick Date', 
    buttonImageOnly: true, 
    changeMonth: true, 
    changeYear: true, 
    showAnim: 'slideDown', 
    duration: 'fast', 
    onClose: function (text, inst) { 
     $(this).focus(); 
    } 
});

基本上你只需要調整選擇只指定加入其中的元素，這大概有一些共同的父元素。

來源

2013-10-30 18:51:34 David

我很欣賞迴應......我會將你的建議放在功能展示冊內嗎？ – stapuff

@stapuff：你會在AJAX調用的響應處理程序中執行此操作。您的代碼中的哪個似乎是分配給'xmlhttp.onreadystatechange'的匿名函數。 – David

這就是我正在爲錯誤：未捕獲類型錯誤：對象[對象的對象]無方法「日期選擇器」 booking.js：66 xmlhttp.onreadystatechange – stapuff

由於您使用jQuery的，最好是用它來處理Ajax太：

function showbookings(str, pass) { 
    if (str === "") { 
     $("#txtBookings").html(""); 
     return; 
    } 
    $.get(page1.php?q=" + str); 
}

來源

2013-10-30 18:51:37

如何放置文檔準備功能的AJAX功能

回答

相關問題