Jquery DateTimePicker not working Updatepanel with masterpag

Question

I put the bootstrap tab menu after that i place datetimepicker code but not working datetime picker properly . above i used the updatepanel

 

datetimepicker code use before the bootstrap function tab menu not work properly

 

please how to solve this problem?

 

<meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>




         <script type="text/javascript">
       function pageLoad() {
           maintainSelectedTab();

       }
       function maintainSelectedTab() {

           var selectedTab = $("#<%=hfTab.ClientID%>");
           var tabId = selectedTab.val() != "" ? selectedTab.val() : "tab1";
           $('#dvTab a[href="#' + tabId + '"]').tab('show');
           $("#dvTab a").click(function () {
               selectedTab.val($(this).attr("href").substring(1));
                   //replace("#", ""));
               //substring(1));
           });
       }
          </script>


     <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="Calender/jquery.datetimepicker.css" />
    <script type="text/javascript" src="Calender/jquery.js"></script>
    <script type="text/javascript" src="Calender/jquery.datetimepicker.js"></script>

     <script type="text/javascript">



         $(function () {

               $("input[id$='txtCheckOut']").datetimepicker({
                 format: 'd/m/Y',
                 timepicker: false,

             });


         });

    </script>

 

Answer 1

Hi,

 

Use Triggers..

 

Example :

 

http://www.aspdotnet-suresh.com/2012/05/ajax-updapanel-control-with-triggers.html 

Answer 2

          already i used   updatemode ="Always" that,s also not working properly 

 

only two button click only accepts  

Answer 3

Hi,

 

Change as updatemode ="Always"

 

 

The answer is helpful.Then Please accept it..!! 

Answer 4

thank you .

 

 above reference worked fine .

 

that's working but all 6 tabs inside buttons  and other controls not worked . first 2 click only worked after that does not work.

 

i have added updatemode ="conditional" for updatepanel

 

Answer 5

Hi,

 

Check the following reference :

 

http://www.aspforums.net/Threads/272636/Bootstrap-Tabs-Maintain-Selected-Active-Tab-on-Partial-PostBack-inside-AJAX-UpdatePanel-in-ASPNet/

 

http://stackoverflow.com/questions/24250457/recover-selected-tab-after-postback-with-bootstrap 

Answer 6

thank you 

 

this method already worked  tab menu not work properly. 

 

whenever use above method tab menu does't work proper . change  every time active tab1 only  not stayed current tab .

 

 i am user  6 bootstrap tabs

 

Answer 7

Hi,

 

Try this code :

 <script type="text/javascript">

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function ()
{
 $("input[id$='txtCheckOut']").datetimepicker({format: 'd/m/Y',timepicker: false,
}
});});</script>

Reference :

 

http://stackoverflow.com/questions/520645/jquery-datepicker-ms-ajax-updatepanel-doesnt-work-after-post-back

 

http://stackoverflow.com/questions/24503556/jquery-date-picker-not-working-in-master-page

 

The answer is helpful.Then please accept it..!!