панель обновления microsoft и jqery datepicker

Question

У меня есть текстовое поле jquery ui datepicker в панели обновления. По какой-то причине я больше не могу нажимать на нее, чтобы загрузить datepicker. Это то, что у меня есть.

// Datepicker settings 
$('body').on('load', '#dpWorkWeek', function() { 
    $(this).datepicker({ 
     changeMonth: true, 
     changeYear: true, 
    }); 
}); 


<asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
<ContentTemplate> 
     <asp:TextBox ID="dpWorkWeek" runat="server" ClientIDMode="Static" CssClass="dpWorkWeek"></asp:TextBox> 

</ContentTemplate> 
<Triggers> 
<asp:AsyncPostBackTrigger ControlID="btnLoadTimesheet" /> 
</Triggers> 

Answer 1

Я думаю, что вы испытываете является то, что ваш выбор даты больше не работает после асинхронной обратной передачи. Если это так вот один из способов ее решения -

window.onload = function() { 
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler); 
} 

function endRequestHandler(sender, args) { 
    init(); 
} 

function init() { 
    $("#<%=dpWorkWeek.ClientID %>").datepicker({ 
     changeMonth: true, 
     changeYear: true 
    }); 
} 

$(function() { // DOM ready 
    init(); 
}); 


<asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
<ContentTemplate> 
     <asp:TextBox ID="dpWorkWeek" runat="server" CssClass="dpWorkWeek"></asp:TextBox> 
</ContentTemplate> 
<Triggers> 
<asp:AsyncPostBackTrigger ControlID="btnLoadTimesheet" /> 
</Triggers> 

Этот подход использует Sys.WebForms.PageRequestManager JavaScript class и возможно потому, что у вас есть Script Manager на странице .aspx. В основном после каждого асинхронного обратного вызова вызывается функция init().

Обратите внимание, что функция init() также вызывается в DOM ready. Это позволяет вам делать все, чтобы DOM вам нужно было сделать еще раз после того, как контент изменился во время асинхронной обратной передачи.

Я также удалил ваш атрибут ClientIdMode, я думаю, что это вызовет проблемы в противном случае.

/редактировать

После просмотра ответ ниже вы можете, конечно, сделать это тоже, мне нравится это для краткости -

function pageLoad(sender, args) { 
    $("#<%=dpWorkWeek.ClientID %>").datepicker({ 
     changeMonth: true, 
     changeYear: true 
    }); 
} 

И если это не работает, это должно всегда -

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function(sender, args) { 
// ... 
}); 

Answer 2

Да, датпикер JQuery плохо работает на панели обновления.

Проблема заключается в том, что поля теряют привязки, потому что ваша функция bodyonLoad не вызывается, когда триггеры UpdatePanel. Таким образом, у вас есть несколько вариантов:

• Переместить все поле за пределами панели обновления
• Если вы не можете просто переместить его за пределами панели обновления, вы можете использовать альтернативное поле, и JQuery будет обновлять оба поля когда значение даты изменяется
  • Проблема с этим подходом, игнорируя тот факт, что вам нужны два поля, заключается в том, что всплывающее устройство даты фактически будет прикреплено к/около нормального поля, что может быть далеко от обновления панель.
• пересвяжите DatePicker на каждом постбэка
  • Проблема с этим подходом является то, что если обновление панели запускается в то время как DatePicker открыта, DatePicker закрывается. Если это может произойти, вам придется написать некоторую логику, чтобы обнаружить, когда она откроется/закрывается, и снова открыть ее после привязки (при необходимости).

Если UpdatePanel не срабатывает по таймеру или что-либо проблема с последним подходом, возможно, не имеет значения для вас.Для того, чтобы использовать метод «всегда Пересвяжите», переместите инициализацию в яваскрипте функции pageLoad():

function pageLoad(sender, args) 
{ 
    // Fix the datepicker here 
} 

EDIT: Да, функция pageLoad вызывается на все постбэк, хотя имя, кажется, подразумевает обратным.

Answer 3

Это работает в моем коде, пожалуйста, следуйте этому коду.

(Company : Infotrack Telematics private limited) 
<script type="text/javascript"> 
     $(document).ready(function() { 

       Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler); 



     }); 

     function endRequestHandler(sender, args) { 
      init(); 
     } 

     function init() { 
      var txtTripStartTime = '#<%=txtNotavlFrom.ClientID %>'; 
       $('#<%=txtNotavlFrom.ClientID %>').datepicker({ 
        dateFormat: 'dd/mm/yy', 
        minDate: 0, 
        beforeShow: function() { 
         $(".ui-datepicker").css('font-size', 10) 
        }, 
        onSelect: function (selected) { 
         $('#<%=txtnotavlTo.ClientID %>').datepicker("option", "minDate", selected) 

     } 

    }); 
     var txtTripEndTime = '#<%=txtnotavlTo.ClientID %>'; 
       $('#<%=txtnotavlTo.ClientID %>').datepicker({ 

        dateFormat: 'dd/mm/yy', 
        minDate: 0, 
        beforeShow: function() { 
         $(".ui-datepicker").css('font-size', 10) 
        } 

       }); 
      }