Как выполнить обратный вызов javascript после обратной передачи панели обновления?

Question

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

Мне нужно зарегистрировать события плагина после загрузки страницы с помощью селекторов CSS.

Проблема в том, что я использую панель обновления ASP.NET, и после первой обратной передачи подсказки перестают работать, потому что панель обновления заменяет содержимое страницы, но не перепривязывает события javascript.

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

Есть какой-либо способ сделать это?

Answer 1

Вместо того, чтобы помещать свой код JQuery в $(document).ready()положи его внутрь

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

pageLoad выполняется после каждой обратной передачи, синхронной или асинхронной. pageLoad является зарезервированным именем функции в ASP.NET AJAX для этой цели. $(document).ready() с другой стороны, выполняется только один раз, когда DOM изначально готов / загружен.

См. Этот обзор событий жизненного цикла клиента ASP.NET AJAX.

Answer 2

Загрузка страницы не сработала. Я использовал это вместо:

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

function pageLoaded() {
}

Answer 3

Возможно, это далеко не самое элегантное решение, но, тем не менее, это решение:

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

Используйте это так:

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

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

Редактировать: также, вы смотрели на jquery.live?

Answer 4

Если вы хотите выполнить определенные операции до и после загрузки UpdatePanel, вы можете переопределить BeginPostbackRequest а также EndPostbackRequest вот так:

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

Это очень удобно, если вы хотите обрабатывать только HTML-код, предоставленный панелью обновлений. Некоторые операции требуют больше ресурсов, и было бы излишне обрабатывать все дерево DOM на pageLoad,

Answer 5

Используйте событие pageLoaded и проверьте, есть ли обратный или обратный вызов:

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