jquery.ui.datepicker is not loaded with ajax

Question

i have an html page(mypage.html), which uses jquery.ui.datepicker

<table>
<tr>
<td valign="middle"><input type="text" name="from_date"  id="from_date" ></td>
<td width="6"><script type="text/javascript">
            $(function() {
                        $("#from_date").datepicker(
                        {dateFormat: 'mm-dd-yy', showOn: 'both', buttonImageOnly: true, changeMonth: true, changeYear: true ,buttonImage: '../images/calender_icons.gif' });
             });
            </script></td>
</tr></table>

when load this page from another page using ajax, the datepicker is not loaded. my ajax code is givn below

$(document).ready(function(){
    $("#MainDiv").click(function(event){
        $.ajax({
            url: 'mypage.html',
            cache: false,
            success: function(html){
                $("#MainDiv").html(html);
                alert('succ');
            },
            complete: function(){
                alert('comp');  
            },
            error : function(){
                alert('err');
            },
            dataType: "html"

        });
    });
 });

any help would be appreciated.

Answer 1

i did it with .load method

$(document).ready(function(){ 
    $("#MainDiv").click(function(){ 
        $("#secondDiv").load("test.html");
    });
});