web-dev-qa-db-fra.com

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

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

Je dois enregistrer les événements du plug-in une fois la page chargée à l'aide des sélecteurs CSS.

Le problème est que j'utilise un panneau de mise à jour ASP.NET et qu'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 lie 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 ait actualisé son contenu, afin de pouvoir relier les événements javascript afin que les astuces fonctionnent à nouveau.

Y a-t-il un moyen de faire ça?

javascriptasp.net-ajaxupdatepanelcallback
70
tsbnunes

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

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

pageLoad est exécuté après chaque publication, synchrone ou asynchrone. pageLoad est un nom de fonction réservé dans ASP.NET AJAX utilisé à cette fin. $(document).ready(), d'autre part, n'est exécuté qu'une seule fois, lorsque le DOM est initialement prêt/chargé.

Voir ceci Vue d'ensemble des événements du cycle de vie du client ASP.NET AJAX

163
Russ Cam

Le chargement de page n'a pas fonctionné. J'ai utilisé ceci à la place:

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

function pageLoaded() {
}
19
rball

C’est probablement loin de la solution la plus élégante, mais c’est quand même une solution:

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

Utilisez-le comme ceci:

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

Bien sûr, vous devez enregistrer le contrôle personnalisé dans votre page ou configuration Web pour l'utiliser comme ceci.

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

12
Andrew Bullock

Utilisez l'événement pageLoaded et vérifiez si rappel ou publication:

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

Si vous souhaitez effectuer des opérations spécifiques avant et après le chargement de UpdatePanel, vous pouvez remplacer BeginPostbackRequest et EndPostbackRequest comme suit: 

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 souhaitez traiter uniquement le code HTML fourni par le panneau de mise à jour. Certaines opérations nécessitent plus de ressources et il serait excessif de traiter l’arborescence DOM dans son intégralité sur pageLoad.

0
modiX