¿Cómo ejecutar una devolución de llamada de javascript después de un postback del panel de actualización?

Estoy usando un complemento de consejos de jQuery para mostrar consejos de ayuda cuando el usuario pasa el cursor por ciertos elementos de la página.

Necesito registrar los eventos del plugin después de cargar la página usando selectores css.

El problema es que estoy usando un ASP.NET Panel de actualización y después del primer postback, los consejos dejan de funcionar porque el panel de actualización reemplaza el contenido de la página pero no vuelve a enlazar los eventos de javascript.

Necesito una forma de ejecutar una devolución de llamada de javascript después de que el Panel de Actualización se actualice su contenido, por lo que puedo volver a enlazar los eventos de javascript para tener los consejos funcionando de nuevo.

¿hay alguna manera de hacer esto?

Author: tsbnunes, 2009-07-20
Source

5 answers

En lugar de poner tu código jQuery dentro de $(document).ready(), ponlo dentro de 

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

pageLoad se ejecuta después de cada postback, síncrono o asíncrono. pageLoad es un nombre de función reservado en ASP.NET AJAX que es para este propósito. $(document).ready() por otro lado, se ejecuta solo una vez, cuando el DOM está inicialmente listo/cargado.

Ver este Resumen de ASP.NET Eventos del ciclo de vida del cliente AJAX

 162
Author: Russ Cam,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-11 20:29:20

La carga de la página no funcionó. Usé esto en su lugar:

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

function pageLoaded() {
}
 19
Author: rball,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-07-07 16:34:31

Esta es probablemente lejos de la solución más elegante, pero es una solución, no obstante:

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

Úsalo así: 

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

Por supuesto, tendrá que registrar el control personalizado en su webconfig o página para usarlo de esta manera.

Editar: también, ¿has mirado jquery.¿vivir?

 12
Author: Andrew Bullock,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-07-20 11:22:33

Si desea realizar operaciones específicas antes y después de que el UpdatePanel se haya cargado, puede anular BeginPostbackRequest y EndPostbackRequest de la siguiente manera: 

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

Esto es muy útil si desea procesar solo HTML que fue entregado por el panel de actualización. Algunas operaciones requieren más recursos y sería excesivo procesar todo el árbol DOM en pageLoad.

 0
Author: modiX,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-05 00:07:06

Utilice el evento pageLoaded y compruebe si la devolución de llamada o postback: 

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(function (sender, args) {
    if (args._panelsUpdated && args._panelsUpdated.length > 0) {
        //callback;
    }
    else {
        //postback;
    }
});
 0
Author: Rover,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-22 07:52:28