Problèmes d'extension d'animation

Question

Je viens de commencer à travailler avec le AnimationExtender. Je l'utilise pour montrer une nouvelle div avec une liste rassemblée d'une base de données quand un bouton est pressé. Le problème est que le bouton doit faire une publication pour obtenir cette liste car je ne veux pas faire l'appel à la base de données à moins que ce soit nécessaire. La publication stoppe cependant l'animation à mi-flux et la réinitialise. Le bouton est dans un panneau de mise à jour.

Idéalement, je voudrais que l'animation commence une fois que la publication est terminée et que la liste a été rassemblée. J'ai examiné en utilisant le ScriptManager pour détecter quand la publication est terminée et ont fait quelques progrès. J'ai ajouté deux méthodes javascript à la page.

function linkPostback() { 

     var prm = Sys.WebForms.PageRequestManager.getInstance(); 
     prm.add_endRequest(playAnimation) 
    } 

    function playAnimation() { 
     var onclkBehavior = $find("ctl00_btnOpenList").get_OnClickBehavior().get_animation(); 
     onclkBehavior.play(); 
    } 

Et j'ai changé le btnOpenList.OnClientClick=”linkPostback();”

Cela résout presque le problème. Je reçois encore du bégaiement d'animation. L'animation commence à être lue avant la publication, puis est lue correctement après la publication. L'utilisation du onclkBehavior.pause() n'a aucun effet. Je peux contourner cela en définissant le AnimationExtender.Enabled = false et le définissant à true dans l'événement de publication de boutons. Cela ne fonctionne cependant qu'une seule fois car maintenant le AnimationExtender est à nouveau activé. J'ai également essayé de désactiver le AnimationExtender via javascript mais cela n'a aucun effet.

Existe-t-il un moyen de lire les animations uniquement via des appels javascript? J'ai besoin de découpler le lien automatique à l'événement de clic des boutons afin que je puisse contrôler quand l'animation est déclenchée.

Espérons que cela a du sens.

Merci

DG

Answer 1

Le flux que vous voyez est quelque chose comme ceci:

1. Cliquez sur le bouton
2. AnimationExtender attrape action et appeler clickOn rappel
3. linkPostback commence requête asynchrone pour la page, puis renvoie le flux vers AnimationExtender
4. animation commence
5. retourne pageSolliciter et appelle PlayAnimation, qui commence à nouveau l'animation

Je pense qu'il ya au moins deux façons de contourner ce problème. Il semble que vous ayez presque tout le javascript dont vous avez besoin, il vous suffit de travailler autour de AnimationExtender en démarrant l'animation en un clic. Option 1: Cacher le bouton AnimationExtender et ajouter un nouveau bouton qui joue l'animation. Cela devrait être aussi simple que de régler le style du bouton AE sur "display: none"; et ayant votre propre bouton appelez linkPostback().

Option 2: réactivez l'extension d'animation une fois l'animation terminée. Cela devrait fonctionner, aussi longtemps que l'appel PlayAnimation bloque, ce qui est probablement:

function linkPostback() { 

    var prm = Sys.WebForms.PageRequestManager.getInstance(); 
    prm.add_endRequest(playAnimation) 
} 

function playAnimation() { 

    AnimationExtender.Enabled = true; 
    var onclkBehavior = $find("ctl00_btnOpenList").get_OnClickBehavior().get_animation(); 
    onclkBehavior.play(); 
    AnimationExtender.Enabled = false; 
} 

En aparté, il semble que votre approche générale peut faire face à des problèmes s'il y a un retard dans la réception du pageSolliciter. Il peut être un peu étrange de cliquer sur un bouton et plusieurs secondes plus tard, l'animation se produit.Il peut être préférable de soit pré-charger les données, ou de pré-remplir le div avec quelque chose "Chargement ...", le faire à propos de la bonne taille, puis remplir le contenu réel quand il arrive.

Answer 2

Avec l'aide de la réponse donnée à la solution finale est la suivante:

Ajouter un autre bouton et le cacher. Pointez AnimationExtender sur le bouton caché afin que le déclenchement de l'événement de clic indésirable ne se produise jamais.

<cc1:AnimationExtender ID="aniExt" runat="server" TargetControlID="btnHdn"> 

Connectez le javascript au bouton dont vous souhaitez déclencher l'animation une fois la publication terminée.

<asp:ImageButton ID="btnShowList" runat="server" OnClick="btnShowList_Click" OnClientClick="linkPostback();" /> 

Ajouter le java requis à la page.

function linkPostback() { 
     var prm = Sys.WebForms.PageRequestManager.getInstance(); 
     prm.add_endRequest(playOpenAnimation) 
} 

function playOpenAnimation() { 
    var onclkBehavior = ind("ctl00_aniExt").get_OnClickBehavior().get_animation(); 
    onclkBehavior.play();   

    var prm = Sys.WebForms.PageRequestManager.getInstance(); 
    prm.remove_endRequest(playOpenAnimation) 
}