¿Cómo tener una devolución de llamada javascript ejecutada después de una devolución de datos del panel de actualización?

Question

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

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

El problema es que estoy usando un Panel de actualización de ASP.NET y después de la primera devolución de datos, las sugerencias 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 actualiza su contenido, por lo que puedo volver a enlazar los eventos de javascript para que las sugerencias vuelvan a funcionar.

¿Hay alguna manera de hacer esto?

Answer 1

En lugar de poner el código de jQuery interior de $(document).ready(), lo puso dentro de

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

pageLoad se ejecuta después de cada devolución de datos, sincrónica o asincrónica. pageLoad es un nombre de función reservada 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 Overview of ASP.NET AJAX client lifecycle events

Answer 2

Esta es, probablemente, lejos de ser 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); 
    } 
} 

utilizar de esta manera:

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

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

Editar: También, ¿ha mirado jquery.live?

Answer 3

El pageLoad no funcionó. He utilizado este lugar:

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

function pageLoaded() { 
} 

Answer 4

Si usted quiere hacer operaciones específicas antes y después del UpdatePanel ha cargado, puede anular BeginPostbackRequest y EndPostbackRequest así:

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 para procesar solo HTML entregado por el panel de actualización. Algunas operaciones requieren más recursos y sería excesivo procesar todo el árbol DOM en pageLoad.

caso

Answer 5

Uso pageLoaded y comprobar si de devolución de llamada o devolución de datos:

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