如何将文档准备功能放置在ajax函数中

Question

I have used the datepicker function on 3 other pages and all works great, but now I am trying to add it to a page that is produced based on an ajax function call showbookings. There are currently 8 on click functions that are being reattached after it loads the dynamic content, but I can not get the datepicker to work, show, nothing. So how do you take a $(document).ready(function and place it into the ajax call? I have my input class = "datepicker1"

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();
        }
    });
});

Answer 1

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

You don't. It would be meaningless in that context. It probably wouldn't even do anything, if the ready event doesn't fire again for the document after the AJAX call. Since all that code does is attach an event handler to that event, it doesn't actually execute the code within the handler until the event fires.

It sounds like what you actually want to do is initialize the date picker plugin on elements added to the DOM after an AJAX call. You can do this by just calling the plugin initializer again:

$(".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();
    }
});

Note that this will match all '.datepicker' elements in the DOM. Including the ones that were previously initialized. If this causes undesirable behavior on previously initialized elements, then just restrict the selector for the plugin to include only the new elements. From the looks of your code, that might be something like:

$("#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();
    }
});

Basically you'd just need to adjust the selector to specify only the elements which were added, which presumably have some common parent element.

Answer 2

Since you are using jQuery, it is better to use it for handling the AJAX too:

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