Un timepicker javascript cesse de fonctionner lorsque la page ne postback ASP.NET

Question

J'ai un panneau de mise à jour dans mon page.aspx, et à l'intérieur du panneau de mise à jour je zone de texte avec timepicker bootstrap, je montre un exemple:

 <asp:UpdatePanel runat="server" id="upd1"> 
       <ContentTemplate> 
<div class="form-group"> 
        <div class="row col-md-12 col-md-offset-0"> 
         <label class="control-label">Monday</label>        
        </div> 
       </div> 

       <div class="form-group col-md-3"> 
        <div class="input-group bootstrap-timepicker timepicker input-sm"> 
         <asp:TextBox runat="server" ID="txtFecIni_1" class="form-control input-small "></asp:TextBox> 
         <span class="input-group-addon "><i class="fa fa-clock-o"></i></span> 
        </div> 
       </div> 

       <div class="form-group col-md-3"> 
        <div class="input-group bootstrap-timepicker timepicker input-sm"> 
         <asp:TextBox runat="server" ID="txtFecFin_1" class="form-control input-small "></asp:TextBox> 
         <span class="input-group-addon "><i class="fa fa-clock-o"></i></span> 
        </div> 
       </div> 

       </ContentTemplate> 
       </asp:UpdatePanel> 

Sous la </ form> de ma page, j'ajouter ce code javascript:

 <script type="text/javascript"> 
     window.onload = function() { 
    $('#txtFecIni_1').timepicker({ 
       minuteStep: 30, 
       defaultTime: false, 
       showMeridian: false 
      }); 

      $('#txtFecFin_1').timepicker({ 
       minuteStep: 30, 
       defaultTime: false, 
       showMeridian: false 
      }); 
} 

    </script> 

    <script src="js/jquery-2.2.2.min.js"></script> 
     <script src="js/bootstrap.min.js"></script> 
     <script src="js/bootstrap-timepicker.js"></script> 

le timepicker fonctionne correctement jusqu'à ce qu'un objet est jeté autopostback. Comment puis-je resoudre ceci? Merci.

Answer 1

je résoudre mon problème de cette façon:

Je change window.onload = function() pour function pageLoad() comme ça:

Avant:

 <script type="text/javascript"> 
     window.onload = function() { 
    $('#txtFecIni_1').timepicker({ 
       minuteStep: 30, 
       defaultTime: false, 
       showMeridian: false 
      }); 

      $('#txtFecFin_1').timepicker({ 
       minuteStep: 30, 
       defaultTime: false, 
       showMeridian: false 
      }); 
} 

    </script> 

Après:

<script type="text/javascript"> 
      function pageLoad() { 
    $('#txtFecIni_1').timepicker({ 
       minuteStep: 30, 
       defaultTime: false, 
       showMeridian: false 
      }); 

      $('#txtFecFin_1').timepicker({ 
       minuteStep: 30, 
       defaultTime: false, 
       showMeridian: false 
      }); 
} 

    </script> 

J'ai lu que la Pageload est appelée à chaque publication. Espérons que cela sera utile à quelqu'un

Answer 2

cela est dû à postback de contrôle asp.net here is explaination

Utilisez Sys.WebForms.PageRequestManage

et votre code sera quelque chose comme ça ..

<script> 
       jQuery(document).ready(function() { 

         $('#txtFecIni_1').timepicker({ 
        minuteStep: 30, 
        defaultTime: false, 
        showMeridian: false 
       }); 

       $('#txtFecFin_1').timepicker({ 
        minuteStep: 30, 
        defaultTime: false, 
        showMeridian: false 
        }); 
       }); 
       var prm = Sys.WebForms.PageRequestManager.getInstance(); 

       prm.add_endRequest(function() { 


         $('#txtFecIni_1').timepicker({ 
        minuteStep: 30, 
        defaultTime: false, 
        showMeridian: false 
       }); 

       $('#txtFecFin_1').timepicker({ 
        minuteStep: 30, 
        defaultTime: false, 
        showMeridian: false 
        }); 
       }); 
      </script>