jquery datepicker ms ajax updatepanel не работает после обратной записи - PullRequest
Новая
       15

jquery datepicker ms ajax updatepanel не работает после обратной записи

14 голосов
/ 06 февраля 2009

Так что я немного прочитал соответствующие вопросы и получил кое-что интересное, но не нашел своего ответа, по крайней мере, не понял ответа.

Я новичок в AJAX, JavaScript и скриптах на стороне в целом.

Я немного использовал C # asp.net и недавно добавил несколько панелей обновления на свою сторону, чтобы сгладить так, чтобы пользовательские элементы управления и биты обновлялись, чтобы страница не перезагружалась каждый раз. Все работает блестяще, и я был очень доволен, пока не решил попробовать и использовать JQuery.

Я выбрал DatePicker из ui.jquery.js, который классный и отлично работает на обычной странице. Моя проблема возникает, когда я делаю обратную передачу из панели обновления. DatePicker просто перестает работать.

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

1) Я не очень понимаю, почему. на моей главной странице у меня есть: 

<script type="text/javascript">
    $(function() {
        $(".mydatepickerclass").datepicker({dateFormat: 'dd-mm-yy'});
    });
</script>

, который забирает мои поля ввода с назначенным классом mydatepickerclass. и все работает. Почему это перестало работать на обратной передаче.

2) Как это исправить .... как мне подключить его, чтобы после обратной передачи в панели обновлений он все еще работал.

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

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

В моем пользовательском контроле, где происходит обновление, есть следующий код: 

<asp:UpdatePanel ID="HistoryUpdatePanel" runat="server">
<ContentTemplate>
    <%-- Start of Company History section --%>
    <fieldset>
        <legend>Activity History</legend>

           <script type="text/javascript">
              $(function() {
              $(".mydatepickerclass").datepicker({dateFormat: 'dd-mm-yy'});
              });
           </script>            

        <div>
            <asp:ListBox ID="listBoxHistoryTypes" runat="server" SelectionMode="Multiple" AutoPostBack="true" OnSelectedIndexChanged="listBoxHistoryTypes_IndexChanged" />
            <label>Date From:</label><asp:TextBox class="mydatepickerclass" ID="txtdatefrom" runat="server" />
            <label>Date To:</label><input class="mydatepickerclass" type="text" />
            <asp:TextBox class="mydatepickerclass" ID="txtdateto" runat="server" />
            <asp:Button ID="btnFilterSearch" runat="server" Text="Filter Results" OnClick="btnFilterSearch_Click" />
        </div>


    </fieldset>
</ContentTemplate>

Не переписывает ли скрипт внутри панели обновления?

Спасибо

Джон Хокинс

Ответы [ 9 ]

43 голосов
/ 06 февраля 2009

панель обновления собирается перезагрузить содержимое HTML. Вам нужно будет прослушать UpdatePanel для завершения и заново создать средство выбора даты.

Вот очень простой пример. При этом не учитываются многочисленные панели обновлений на вашей странице или потенциальные утечки памяти из-за неправильного уничтожения вашего средства выбора даты.

Еще одна вещь, которую следует отметить при смешивании ASP.NET Ajax и jQuery, будьте осторожны, поскольку оба используют $ в разных контекстах 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js">
    </script>
    <script type="text/javascript">
        $(document).ready(function() {
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

            function EndRequestHandler(sender, args) {
                $('.mydatepickerclass').datepicker({ dateFormat: 'dd-mm-yy' });
            }

        });
    </script>   
</head>
<body>
    <form id="form1" runat="server">
    <div>

    </div>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:TextBox ID="TextBox1" runat="server" CssClass="mydatepickerclass"></asp:TextBox>
            <br />
            <asp:Button ID="Button1" runat="server" Text="UpdateMe" 
                onclick="Button1_Click" />
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>
</html>
9 голосов
/ 24 апреля 2012

Я знаю, что это старый, но ... попробуйте заменить:

$(document).ready(function() {

с:

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function () {

5 голосов
/ 21 мая 2013

Вместо этого есть простая альтернатива.

В постбэке элемента на панели обновления добавьте этот код 

ScriptManager.RegisterStartupScript(Me, Me.GetType(), "asddas", "getjquerydate();",   True)

И это в JavaScript 

function getjquerydate() {

$(".datepicker").datepicker({
    numberOfMonths: 2,
    showButtonPanel: true,
    minDate: 1,
    dateFormat: 'dd/mm/yy',
    showOn: "button",
    buttonImage: "images/calendar.gif",
    buttonImageOnly: true
});

}

После частичной обратной передачи в обновленной панели снова вызывается функция datepicker

3 голосов
/ 03 июля 2013 
$(document).ready(function () {
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
        Sys.WebForms.PageRequestManager.getInstance().beginAsyncPostBack();
        function EndRequestHandler(sender, args) {
            $('.mydatepickerclass').datepicker({ dateFormat: 'dd-mm-yy' });
        }
    });

Вы можете сделать это так. в этом случае он будет работать всегда;))

1 голос
/ 30 декабря 2016

"jQuery UI Datepicker не работает после частичной обратной передачи ajax"

Поместите менеджер скриптов и панель обновления на страницу. 

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="upd1" runat="server">
 <ContentTemplate>
 </ContentTemplate>
</asp:UpdatePanel>

Теперь поместите текстовое поле и кнопку внутри панели обновления. 

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="upd1" runat="server">
 <ContentTemplate>
     <div style="font-family: Arial; font-size: small;">
        Select Date :
        <asp:TextBox ID="txtDate" runat="server"Font- Names="Arial">           
        </asp:TextBox>
     </div>
     <asp:Button ID="btnAjax" runat="server" Text="Ajax PostBack"  
       OnClick="btnAjax_Click" />
  </ContentTemplate>
</asp:UpdatePanel>

Теперь свяжите элемент управления datepicker с текстовым полем. 

<script type="text/javascript" language="javascript">
$(document).ready(function(){     
    $("#<%=txtDate.ClientID %>").datepicker(
    {   changeMonth:true,
        changeYear:true,
        showOn: 'button',
        buttonText:'Show Date',
        showAnim: 'fadeIn',
        showButtonPanel: true,
        dateFormat: 'DD, MM d, yy',
        buttonImage: 'Images/imgCalendar.png',
        buttonImageOnly: true
     }
   );
   $(".ui-datepicker-trigger").mouseover(function() {
        $(this).css('cursor', 'pointer');
   });
}); 
<script>

Теперь создайте щелчок на стороне сервера для кнопки, которая вызовет частичную обратную передачу ajax. 

protected void btnAjax_Click(object sender, EventArgs e)
{
   System.Threading.Thread.Sleep(1000);
}

При запуске страницы вы увидите что-то вроде этого

Ajax PostBack

Нажмите на кнопку выбора даты. Datepicker открывается, и выбранная дата становится значением текстового поля. Теперь нажмите на кнопку. Будет вызван щелчок кнопки на стороне сервера, и теперь вы увидите что-то вроде этого.

AJAX Postback2

Кнопка выбора даты исчезла. Итак, что нам теперь делать, чтобы она работала в ajax. Смотрите ниже код. 

<script type="text/javascript" language="javascript">
function pageLoad(sender, args)
{
  $(document).ready(function(){     
    $("#<%=txtDate.ClientID %>").datepicker(
    {   changeMonth:true,
        changeYear:true,
        showOn: 'button',
        buttonText:'Show Date',
        showAnim: 'fadeIn',
        showButtonPanel: true,
        dateFormat: 'DD, MM d, yy',
        buttonImage: 'Images/imgCalendar.png',
        buttonImageOnly: true
     }
   );
   $(".ui-datepicker-trigger").mouseover(function() {
        $(this).css('cursor', 'pointer');
   });
  }); 
}
</script>

Функция pageLoad () доступна в JavaScript, если вы используете ASP.NET ajax. Платформа AJAX автоматически подключает любую клиентскую функцию с именем pageLoad () в качестве обработчика Application.Load

Источники ссылок на источники

http://www.jquerybyexample.net/2010/08/jquery-datepicker-does-not-work-after.html

0 голосов
/ 06 марта 2019

Другим простым способом является удаление текстового поля с датой из панели обновлений. Таким образом, сообщение, сделанное панелью обновления, не влияет на текстовое поле даты

0 голосов
/ 31 июля 2015

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

Я не поместил ни один клиентский скрипт в коде позади. Я только поставил этот код: 

       <script type="text/javascript">       
         Sys.WebForms.PageRequestManager.getInstance().add_pageL
              Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

              function EndRequestHandler() {
                  $('.default-date-picker').datepicker({
                      format: 'dd-mm-yyyy'
                  });
              }

             });
             </script>

Код выше должен находиться внутри секции body, а не в секции head. Я попытался поместить его до и после диспетчера сценариев или внутри и снаружи UpdatePanel и не нашел проблем со всеми опциями. Так что, пока этот код находится в разделе тела, он работает для меня.

Просто убедитесь, что вы изменили определенный класс datetimepicker. Для меня это "default-date-picker" в файле js.

0 голосов
/ 17 июня 2014 
Sys.Application.add_load(LoadHandler);

//This load handler solved update panel did not bind date picker after partial postback 
function LoadHandler() {
    $(document).ready(function () {
        $(".datepicker").datepicker({
            dateFormat: "M d, yy",
            changeMonth: true,
            changeYear: true,
            onSelect: function (dateText, ubst) { your code here... }
        }).val();
    });
}
0 голосов
/ 28 февраля 2012

Я знаю, что это сообщение старое - но просто разместите свой jquery datepicker за пределами панели обновления - должно работать на 100% ...

...