javascript doesn't work after postback in ajax

[Zom]

Hi telerik team

i'm trying to select date from jquery calendar. i can select calendar on first time after that
i have action to postback page and i go to select calendar again it's not work.

how can i do ? help me pls 

This Code Under RadAjaxLoadingPanel ,RadAjaxManager ,RadScriptManager

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">   

    <link type="text/css" href="../Styles/ui-lightness/jquery-ui-1.8.10.custom.css" rel="stylesheet" />

    <style type="text/css">

        .demoHeaders { margin-top: 2em; }

        #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}

        #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}

        ul#icons {margin: 0; padding: 0;}

        ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}

        ul#icons span.ui-icon {float: left; margin: 0 4px;}

        ul.test {list-style:none; line-height:30px;}

    </style>

</asp:Content>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

 

   <telerik:RadCodeBlock id="RadCodeBlock1" runat="server">

      <script type="text/javascript">

          function openPopup(typeofv) {

              //alert(obj.name);

              var pageURL = "ItemMaster_Search.aspx?typeofv=" + typeofv;

              var w = 750;

              var h = 600;

              var left = (screen.width / 2) - (w / 2);

              var top = (screen.height / 2) - (h / 2);

              window.open(pageURL, '', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);

 

              //var value = obj.value;

              //window.open('ItemMaster_Search.aspx?txtName=' + value, null, 'height=600,width=750,status=yes,toolbar=no,menubar=no,location=no');

              return false;

          }

       </script>

     

        <script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script>

        <script type="text/javascript" src="../js/jquery-ui-1.8.10.offset.datepicker.min.js"></script>

        <script type="text/javascript">

           

            $(function () {

                var d = new Date();

                var toDay = d.getDate() + '/' + (d.getMonth() + 1) + '/' + (d.getFullYear() + 543);

                // กรณีต้องการใส่ปฏิทินลงไปมากกว่า 1 อันต่อหน้า ก็ให้มาเพิ่ม Code ที่บรรทัดด้านล่างด้วยครับ (1 ชุด = 1 ปฏิทิน)

                $("#MainContent_from_DT").datepicker({ changeMonth: true, changeYear: true, dateFormat: 'dd/mm/yy', isBuddhist: true, defaultDate: toDay, dayNames: ['อาทิตย์', 'จันทร์', 'อังคาร', 'พุธ', 'พฤหัสบดี', 'ศุกร์', 'เสาร์'],

                    dayNamesMin: ['อา.', 'จ.', 'อ.', 'พ.', 'พฤ.', 'ศ.', 'ส.'],

                    monthNames: ['มกราคม', 'กุมภาพันธ์', 'มีนาคม', 'เมษายน', 'พฤษภาคม', 'มิถุนายน', 'กรกฎาคม', 'สิงหาคม', 'กันยายน', 'ตุลาคม', 'พฤศจิกายน', 'ธันวาคม'],

                    monthNamesShort: ['ม.ค.', 'ก.พ.', 'มี.ค.', 'เม.ย.', 'พ.ค.', 'มิ.ย.', 'ก.ค.', 'ส.ค.', 'ก.ย.', 'ต.ค.', 'พ.ย.', 'ธ.ค.']

                });

 

                $("#MainContent_To_DT").datepicker({ changeMonth: true, changeYear: true, dateFormat: 'dd/mm/yy', isBuddhist: true, defaultDate: toDay, dayNames: ['อาทิตย์', 'จันทร์', 'อังคาร', 'พุธ', 'พฤหัสบดี', 'ศุกร์', 'เสาร์'],

                    dayNamesMin: ['อา.', 'จ.', 'อ.', 'พ.', 'พฤ.', 'ศ.', 'ส.'],

                    monthNames: ['มกราคม', 'กุมภาพันธ์', 'มีนาคม', 'เมษายน', 'พฤษภาคม', 'มิถุนายน', 'กรกฎาคม', 'สิงหาคม', 'กันยายน', 'ตุลาคม', 'พฤศจิกายน', 'ธันวาคม'],

                    monthNamesShort: ['ม.ค.', 'ก.พ.', 'มี.ค.', 'เม.ย.', 'พ.ค.', 'มิ.ย.', 'ก.ค.', 'ส.ค.', 'ก.ย.', 'ต.ค.', 'พ.ย.', 'ธ.ค.']

                });        

 

            });

        </script>

    </telerik:RadCodeBlock>           

  

      <div>

          <table cellpadding="0" cellspacing="0"  class="tablemain" border="0">

              <tr>

                  <td class="td4Colhead">

                เริ่มวันที่ <span class="spanvalidate">*</span> </td>

                  <td class="td4Colinput">

                 <asp:TextBox ID="from_DT" runat="server" CssClass="textboxclass50"  MaxLength="10" ReadOnly="true"></asp:TextBox>

                      

                <asp:RequiredFieldValidator

                    ID="RequiredFieldValidator1" runat="server" ControlToValidate="from_DT"

                    CssClass="validater" ErrorMessage="เริ่มวันที่">*</asp:RequiredFieldValidator>

                 

                 

                  </td>

                  <td class="td4Colhead">

                ถึงวันที่   </td>

                  <td class="td4Colinput">

                     <asp:TextBox ID="To_DT" runat="server" CssClass="textboxclass50"  MaxLength="10" ReadOnly="true"></asp:TextBox>                    

                  </td>

              </tr>

                 

          </table>

 

      </div>

      <br /> 

</asp:Content>

[Vasil]

Hello Zom,

You need to run your jQuery script again after the AjaxCallback, in order to apply the settings for the new created HTML Dom elements in the page. After Ajax each element that is update, is actually replaced with fresh new element, and it does not have its events attached.
See these blogs for further reading:
http://web.enavu.com/daily-tip/daily-tip-difference-between-document-ready-and-window-load-in-jquery/
http://encosia.com/document-ready-and-pageload-are-not-the-same/

Kind regards,
Vasil
the Telerik team