jquery datepicker ms ajax updatepanel không hoạt động sau khi đăng bài trở lại

Vì vậy, tôi đã đọc một số câu hỏi liên quan và có một số nội dung thú vị nhưng không tìm thấy câu trả lời của tôi, ít nhất là không hiểu câu trả lời.jquery datepicker ms ajax updatepanel không hoạt động sau khi đăng bài trở lại

Tôi rất mới với AJAX, javascript và viết kịch bản bên cạnh nói chung.

Tôi đã sử dụng C# asp.net một chút và gần đây đã thêm một số updatepanels vào bên cạnh của tôi để mịn nên các điều khiển người dùng và bit được cập nhật để trang không được tải lại mỗi lần. Tất cả các công trình rực rỡ và tôi đã rất hài lòng với nó cho đến khi tôi quyết định thử và sử dụng một số JQuery.

Tôi đã chọn trình ghi ngày tháng từ ui.jquery.js rất thú vị và hoạt động tốt trên trang bình thường. Vấn đề của tôi đến khi tôi làm một postback từ bên trong một updatepanel. Các datepicker chỉ dừng lại làm việc.

từ nội dung tôi đã đọc Tôi cần phải sao chép thủ công bản sao lưu sau khi đăng lại.

1) Tôi không hiểu tại sao. trên trang cái của tôi, tôi có:

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

chọn hộp nhập của tôi với lớp phân lớp mydatepicker được chỉ định. và tất cả các công trình. Tại sao điều này sẽ ngừng hoạt động trên postback.

2) Làm thế nào để khắc phục sự cố này .... làm thế nào để tôi nối nó lên để sau khi một postback trong một updatepanel nó vẫn hoạt động.

Tôi hiểu rằng ID có thể thay đổi khi đăng lại, tôi nghĩ nhưng khi tôi đang sử dụng các lớp, tôi không biết điều gì đang xảy ra.

chỉnh sửa

Tôi đã đoạn mã sau trong usercontrol của tôi, nơi cập nhật đang diễn ra:

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

Liệu kịch bản bên trong updatepanel không ReWire nó?

Cảm ơn

Jon Hawkins

Nguồn

2009-02-06 Jon

bảng cập nhật đang diễn ra để tải lại các nội dung của html. Bạn sẽ phải lắng nghe UpdatePanel để hoàn thành và tạo lại datepicker.

Đây là mẫu rất cơ bản. Điều này không tính đến nhiều bảng cập nhật trên trang của bạn hoặc rò rỉ bộ nhớ tiềm ẩn không được tiêu diệt đúng cách công cụ datepicker của bạn.

Một điều cần lưu ý khi trộn ASP.NET Ajax và jQuery hãy cẩn thận vì cả hai sử dụng $ trong những bối cảnh khác nhau

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

Nguồn

2009-02-06 15:20:25 bendewey

thế nào tôi sẽ đi về điều này? – Jon

đã thêm mẫu. Nó nối vào ngươi. – bendewey

Nó đã làm việc với đề xuất của bạn. Cảm ơn bạn .. Không thực sự hiểu nó, sẽ phải nghiên cứu những gì bạn đã đưa ra nhưng cảm ơn bạn :) – Jon

Tôi biết bài này là cũ - nhưng chỉ cần đặt datepicker jquery của bạn bên ngoài bảng cập nhật - nên hoạt động 100% ...

Nguồn

2012-02-28 10:19:15 Mike

Đúng vậy! nhưng OP có một yêu cầu. – Zerotoinfinity

Tôi biết điều này cũ nhưng ...cố gắng thay thế:

$(document).ready(function() {

với:

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

Nguồn

2012-04-24 15:17:33

Cảm ơn bạn rất nhiều. Bạn đã tiết kiệm thời gian của tôi –

Thay vì làm điều này có là một lựa chọn đơn giản.

Trong postback của phần tử trong bảng cập nhật thêm mã này

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

Và điều này trong javascript

function getjquerydate() { 

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

}

Sau khi postback một phần trong bảng cập nhật nó một lần nữa gọi datepicker chức năng

Nguồn

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

Bạn có thể làm như thế này. trong trường hợp này, nó sẽ luôn hoạt động;))

Nguồn

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

Nguồn

2014-06-17 17:10:19

Tôi biết đây là một bài đăng cũ, nhưng tôi chỉ gặp phải vấn đề này và tìm thấy câu trả lời trong chuỗi này. Hy vọng nó có thể giúp đỡ bất kỳ ai gặp phải điều này.

Tôi không đặt bất kỳ tập lệnh phía máy khách nào trong mã phía sau. Tôi chỉ đặt mã này:

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

Đoạn mã trên cần nằm trong phần thân máy chứ không phải phần đầu. Tôi đã thử đặt nó trước và sau khi người quản lý kịch bản, hoặc bên trong và bên ngoài của UpdatePanel và thấy không có vấn đề với tất cả các tùy chọn. Vì vậy, miễn là mã này là trong phần cơ thể, nó làm việc cho tôi.

Chỉ cần đảm bảo bạn thay đổi lớp datetimepicker đã xác định của mình. Đối với tôi là "bộ chọn ngày mặc định" trong tệp js.

Nguồn

2015-07-31 03:07:19

"jQuery UI datepicker không hoạt động sau khi ajax postback một phần"

Nơi một người quản lý kịch bản và một bảng cập nhật trên trang.

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

Bây giờ, đặt một hộp văn bản và nút bên trong bảng điều khiển 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>

Bây giờ ràng buộc điều khiển datepicker với hộp văn bản.

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

Bây giờ, hãy tạo một nhấp chuột phía máy chủ cho nút sẽ gây ra postback một phần ajax.

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

On chạy trang, u sẽ thấy một cái gì đó như thế này

Bấm vào datepicker. Các datepicker được mở ra và chọn ngày trở thành giá trị của hộp văn bản. Bây giờ bấm vào nút. Nhấp vào nút phía máy chủ được gọi và bây giờ bạn sẽ thấy một cái gì đó như thế này.

nút

Các datepicker là gone.So những gì chúng ta làm gì bây giờ để làm cho nó làm việc trong ajax. Xem mã dưới đây.

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

chức năng pageLoad() có sẵn trong JavaScript nếu bạn đang sử dụng ASP.NET ajax. AJAX framework tự động dây lên bất kỳ chức năng client-side tên PageLoad() như một handler Application.Load

Nguồn liên kết Tín

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

Nguồn

2016-12-30 19:00:33 Krishna

cảm ơn! điều này đã giúp tôi .. –

jquery datepicker ms ajax updatepanel không hoạt động sau khi đăng bài trở lại

Trả lời

Các vấn đề liên quan