Comment faire exécuter un rappel javascript après une publication dans le panneau de mise à jour?

Question

J'utilise un plugin tip jQuery pour afficher des conseils d'aide lorsque l'utilisateur survole certains éléments de la page.

Je dois enregistrer les événements du plugin après le chargement de la page en utilisant les sélecteurs css. Le problème est que j'utilise un panneau de mise à jour ASP.NET et après la première publication, les astuces ne fonctionnent plus car le panneau de mise à jour remplace le contenu de la page mais ne recompose pas les événements javascript.

J'ai besoin d'un moyen d'exécuter un rappel javascript après que le panneau de mise à jour actualise son contenu, afin que je puisse relier les événements javascript pour que les conseils fonctionnent à nouveau.

Y at-il un moyen de le faire?

Answer 1

Au lieu de mettre votre code jQuery intérieur de $(document).ready(), mettez-le dans

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

pageLoad est exécuté après chaque postback, synchrone ou asynchrone. pageLoad est un nom de fonction réservé dans ASP.NET AJAX qui est à cet effet. D'autre part, $(document).ready() est exécuté une seule fois, lorsque le DOM est initialement prêt/chargé.

Voir cette Overview of ASP.NET AJAX client lifecycle events

Answer 2

Ceci est probablement loin d'être la solution la plus élégante, mais sa solution néanmoins:

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

utiliser comme ceci:

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

Bien sûr, vous aurez besoin d'enregistrer le contrôle personnalisé dans youre webconfig ou page pour l'utiliser comme ça.

Edit: aussi, avez-vous regardé jquery.live?

Answer 3

Le pageLoad ne fonctionnait pas. J'ai utilisé ce lieu:

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

function pageLoaded() { 
} 

Answer 4

Si vous voulez faire des opérations spécifiques avant et après l'UpdatePanel chargé, vous pouvez remplacer BeginPostbackRequest et EndPostbackRequest comme ceci:

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

Ceci est très pratique si vous voulez pour traiter uniquement le code HTML fourni par le panneau de mise à jour. Certaines opérations nécessitent plus de ressources et il serait trop difficile de traiter l'intégralité de l'arborescence DOM sur pageLoad.

Answer 5

Utilisez événement pageLoaded et vérifier si le rappel ou postback:

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