Jquery datepicker ms ajax updatepanel не работает после сообщения назад

Итак, я немного почитал связанные вопросы и имел некоторые интересные вещи, но не нашел ответа, по крайней мере, не понял ответа.

Я очень новичок в сценариях AJAX, javascript и sclient в целом.

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

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

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

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

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

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

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

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

изменить

У меня есть следующий код в моем usercontrol, где происходит обновление:

<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>

Не поддерживает ли script внутри панели обновления?

Спасибо

Джон Хокинс

Ответы

Ответ 1

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

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

Еще одно замечание при смешивании 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>

Ответ 2

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

$(document).ready(function() {

с:

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

Ответ 3

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

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

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

Ответ 4

$(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' });
        }
    });

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

Ответ 5

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

Поместите диспетчер script и панель обновления на странице.

<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);
}

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

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

Кнопка datepicker ушла. Итак, что мы делаем теперь, чтобы заставить ее работать в 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

Источник Link Credits

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

Ответ 6

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

Ответ 7

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();
    });
}

Ответ 8

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

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

       <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>

Вышеприведенный код должен находиться внутри секции корпуса, а не раздела головы. Я попытался положить его до и после менеджера script, или внутри и за пределами UpdatePanel, и не обнаружил никаких проблем со всеми параметрами. До тех пор, пока этот код находится в разделе тела, он работает для меня.

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