如何放置文档准备功能的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功能

回答

相关问题