Question

I have the main HTML file and after the button click, it shall come from AJAX test.html

Test.html:

<div type="text" id="datepicker">
    H
</div> 

my.js:

<script>
    jQuery(document).ready(function ($) {
        jQuery.ajax({
            type: 'POST',
            url: 'test.html',
            success: function (data2) {

            } //end of success                                
        }); //end of ajax      

        $("#datepicker").datepicker();
    });
</script>

Main.html Ajax calls the test.html,
It needs to show the datepicker in the input field , how could I accomplish the above task?

Thank you

Answer 1

If you are saying, …

I’ve loaded some stuff using AJAX and I want to bind stuff to it…

Then all you need to do is move your $(document).ready… stuff into a function that you can also call when an AJAX request loads. You can pass the relevant DOM tree into that function too, which will help.

Example:

var pageLoaded = function(htmlDocument) {
    $(".datepicker", htmlDocument).datepicker();
    $(".something").click(function() { alert("Hi"); });
};
// Page Load
$(document).ready(function() {
    pageLoaded(this);
});

Then when you call AJAX, you do the same…

$("#MyDiv").load("http://somepage/", function() { pageLoaded(this) });

And it applies all the page load stuff to your newly loaded AJAX bits.