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

Итак, я немного почитал связанные вопросы и имел некоторые интересные вещи, но не нашел ответа, по крайней мере, не понял ответа.jquery datepicker ms ajax updatepanel не работает после сообщения назад

Я очень новичок в написании сценариев AJAX, javascript и sclient.

Я немного использовал C# 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>

ли сценарий внутри UpdatePanel не перемонтировать его?

Благодаря

Джон Хокинс

источник

2009-02-06 Jon

панель обновление будет перезагрузить содержимое 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>

источник

2009-02-06 15:20:25 bendewey

как бы я идти об этом? – Jon

добавлен образец. Это конкатенирует тебя. – bendewey

Он работал с вашим предложением. Спасибо. Не понимайте это, вам придется исследовать то, что вы дали, но спасибо :) – Jon

, я знаю этот пост старый - а просто разместить Jquery DatePicker снаружи из панель обновления - должна работать на 100% ...

источник

2012-02-28 10:19:15 Mike

Это правда! но у ОП есть требование. – Zerotoinfinity

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

$(document).ready(function() {

с:

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

источник

2012-04-24 15:17:33

Большое вам спасибо. Вы спасли свое время –

Вместо того, чтобы делать это есть простая альтернатива.

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

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 функции

источник

2013-05-21 07:00:09

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

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

источник

2013-07-02 21:55:22

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

источник

2014-06-17 17:10:19

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

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

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

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

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

источник

2015-07-31 03:07:19

«JQuery UI Datepicker не работает после АЯКС частичной обратной передачи»

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

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

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

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

кнопка

DatePicker является gone.So то, что мы делаем сейчас, чтобы сделать его работать в 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

источник

2016-12-30 19:00:33 Krishna

спасибо! это помогло мне. –

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

ответ

Смежные вопросы