jQuery Dialog and Datepicker plugins don't work together

Question

i have tow pages one is mange.aspx and other is pop-up.aspx in mange.aspx i load the other page with ajax and display it in jquery ui Dialog

my problem is when i load page the jquery ui Datepicker inside that page not working

this is my code

$(function () {
     $("#datepicker").datepicker({
         showOn: "button",
         buttonImage: "../images/calendar-icon.png",
         buttonImageOnly: true
     });

     $('#Add').click(function () {
         var $dialog = $('<div id="MyDialog"></div').appendTo('body')
      .load("../Pop-up.aspx #pop-up")
      .dialog({
         position: 'center',
         width: 550 
           // code .....
      });
   });
});

Answer 1

You need to create the datepicker after you load the popup. Creating the datepicker before will do nothing.

function createDatePicker() {
    $("#datepicker").datepicker({
        showOn: "button",
        buttonImage: "../images/calendar-icon.png",
        buttonImageOnly: true
    });
}

$(function () {
    $('#Add').click(function () {
        var $dialog = $('<div id="MyDialog"></div').appendTo('body')
          .load("../Pop-up.aspx #pop-up", createDatePicker)
          .dialog({
             position: 'center',
             width: 550 
          });
        // code .....
    });
});

Your datepicker creation code is now inside its own function, and is set as the callback when the popup page is loaded. This way, the datepicker will be created as soon as the page is loaded.