Cách thực hiện cuộc gọi lại javascript sau khi đăng lại bảng cập nhật?

Question

Tôi đang sử dụng plugin mẹo jQuery để hiển thị mẹo trợ giúp khi người dùng di chuyển các phần tử nhất định của trang.

Tôi cần đăng ký sự kiện plugin sau khi trang được tải bằng bộ chọn css.

Vấn đề là tôi đang sử dụng Bảng cập nhật ASP.NET và sau lần đăng đầu tiên, các mẹo ngừng hoạt động vì bảng cập nhật thay thế nội dung trang nhưng không rebind các sự kiện javascript.

Tôi cần một cách để thực thi cuộc gọi lại javascript sau khi Bảng điều khiển cập nhật làm mới nội dung của nó, vì vậy tôi có thể rebind các sự kiện javascript để các mẹo hoạt động trở lại.

Có cách nào để thực hiện việc này không?

Answer 1

Thay vì đặt mã jQuery của bạn bên trong $(document).ready(), đặt nó bên trong

function pageLoad(sender, args) { 
    ... 
} 

pageLoad được thực hiện sau mỗi lần postback, đồng bộ hoặc không đồng bộ. pageLoad là tên hàm dành riêng trong ASP.NET AJAX dành cho mục đích này. Mặt khác, $(document).ready() chỉ được thực hiện một lần, khi DOM đã sẵn sàng/nạp ban đầu.

Xem này Overview of ASP.NET AJAX client lifecycle events

Answer 2

Đây có lẽ là xa là giải pháp thanh lịch nhất, nhưng nó là một giải pháp tuy nhiên:

public class UpdatePanel : System.Web.UI.UpdatePanel 
{ 
    /// <summary> 
    /// Javascript to be run when the updatepanel has completed updating 
    /// </summary> 
    [Description("Javascript to be run when the updatepanel has completed updating"), 
     Category("Values"), 
     DefaultValue(null), 
     Browsable(true)] 
    public string OnUpdateCompleteClientScript 
    { 
     get 
     { 
      return (string)ViewState["OnUpdateCompleteClientScript"]; 
     } 
     set 
     { 
      ViewState["OnUpdateCompleteClientScript"] = value; 
     } 
    } 

    protected override void OnPreRender(System.EventArgs e) 
    { 
     base.OnPreRender(e); 
     if(!string.IsNullOrEmpty(this.OnUpdateCompleteClientScript)) 
      Page.ClientScript.RegisterStartupScript(this.GetType(), this.ClientID, string.Concat("Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(sender, args){for(var panelId in sender._updatePanelClientIDs){if(sender._updatePanelClientIDs[panelId] == '", this.ClientID, "'){", this.OnUpdateCompleteClientScript, "}}});"), true); 
    } 
} 

Sử dụng nó như thế này:

<uc:UpdatePanel OnUpdateCompleteClientScript="alert('update complete');"> 
    <!-- stuff in here --> 
</uc:UpdatePanel> 

Tất nhiên bạn sẽ cần phải đăng ký điều khiển tùy chỉnh trong webre youconfig hoặc trang để sử dụng nó như thế này.

Edit: cũng có, có bạn nhìn jquery.live?

Answer 3

Tải trang không hoạt động. Tôi sử dụng này để thay thế:

var prm = Sys.WebForms.PageRequestManager.getInstance(); 
prm.add_pageLoaded(pageLoaded); 

function pageLoaded() { 
} 

Answer 4

Nếu bạn muốn làm các hoạt động cụ thể trước và sau khi UpdatePanel đã được nạp, bạn có thể ghi đè lên BeginPostbackRequest và EndPostbackRequest như vậy:

var postbackControl = null; 
var updatePanels = null; 
var prm = Sys.WebForms.PageRequestManager.getInstance(); 
prm.add_beginRequest(BeginPostbackRequest); 
prm.add_endRequest(EndPostbackRequest); 

function BeginPostbackRequest(sender, args) { 
    prm._scrollPosition = null; 
    postbackControl = args.get_postBackElement(); 
    postbackControl.disabled = true; 
    updatePanels = args._updatePanelsToUpdate; 
    // do your stuff 
} 

function EndPostbackRequest(sender, args) { 
    // do your stuff 
    postbackControl.disabled = false; 
    postbackControl = null; 
    updatePanels = null; 
} 

này rất thuận tiện nếu bạn muốn để xử lý chỉ HTML được phân phối bởi bảng điều khiển cập nhật. Một số thao tác đòi hỏi nhiều tài nguyên hơn và nó sẽ là quá mức cần thiết để xử lý toàn bộ cây DOM trên pageLoad.

Answer 5

Sử dụng pageLoaded sự kiện và kiểm tra xem callback hoặc postback:

var prm = Sys.WebForms.PageRequestManager.getInstance(); 
prm.add_pageLoaded(function (sender, args) { 
    if (args._panelsUpdated && args._panelsUpdated.length > 0) { 
     //callback; 
    } 
    else { 
     //postback; 
    } 
});