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

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

70 голосов
/ 20 июля 2009

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

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

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

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

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

Ответы [ 5 ]

163 голосов
/ 20 июля 2009

Вместо того, чтобы помещать свой код jQuery в $(document).ready(), поместите его в 

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

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

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

19 голосов
/ 23 июля 2011

PageLoad не работает. Я использовал это вместо: 

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

function pageLoaded() {
}
12 голосов
/ 20 июля 2009

Это, вероятно, далеко не самое элегантное решение, но, тем не менее, это решение: 

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?

0 голосов
/ 22 ноября 2016

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

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(function (sender, args) {
    if (args._panelsUpdated && args._panelsUpdated.length > 0) {
        //callback;
    }
    else {
        //postback;
    }
});
0 голосов
/ 05 ноября 2016

Если вы хотите выполнить определенные операции до и после загрузки 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.

...