Strange IE8 problème avec un select qui fonctionne AJAX

Question

J'ai une erreur étrange avec IE8 et les recherches de codes postaux. Ce ne sont peut-être pas les recherches de code postal qui en sont la cause, mais simplement un appel AJAX qui modifie un select. J'ai mis en place une page de test here. Si vous cliquez sur Find Address, puis double-cliquez (assez rapidement) sur l'une des adresses situées dans la limite de la div bordée de rouge, vous voyez le bogue ci-dessous dans IE8.

Remarque: Je trouve incohérent de reproduire le bogue, mais si vous faites défiler la liste des adresses jusqu'en bas puis double-cliquez rapidement sur Holly Cottage, il devrait reproduire le bogue.

Si quelqu'un peut jeter la lumière sur ce comportement bizarre, il serait très apprécié. Est-ce un bug IE8?

Answer 1

J'ai trouvé le problème - les navigateurs n'aiment pas avoir javascript:void() pour l'attribut href. Si vous souhaitez avoir une ancre de travail dont l'action par défaut est annulée, utilisez # pour l'attribut href, puis demandez au gestionnaire d'événements de cette ancre return false d'annuler l'action par défaut du navigateur. Erm ... right ... désolé pour mon empressement à poster une réponse et pas double vérifier que le problème a été résolu correctement. Je trouve qu'il est difficile de trouver le problème. Je vais juste hasarder une supposition ici: les deux effets en cours d'exécution et se terminant en même temps confond IE8, provoquant le div à être mis à une hauteur de 1px. Cela suppose bien sûr un bug dans l'implémentation jQuery de la file d'effets, ce dont je ne peux certainement pas m'attribuer. C'est juste ma théorie pour le moment - mon manque de familiarité avec la barre d'outils du développeur IE m'empêche d'aller plus loin.

Answer 2

Je suppose que c'est un problème avec vos animations. Votre action asynchrone déclenche certaines animations glissantes.

Première: Essayez fins vous connecter de toutes les animations (mettre une fonction de rappel dans l'appel slide* et journal texte à la console.) Pour voir si elles fonctionnent dans le bon ordre - je suppose qu'ils ne le font pas et c'est le problème.

Deuxième: Essayez d'ajouter .stop() avant chaque animation déclenchée de manière asynchrone afin qu'elle casse les autres animations fonctionnant en même temps.

Troisième: Si ce qui précède n'a pas aidé essayer cela pour chaque animation:

if($(this).data('running')==0){ 
$(this).data('running',1).slideUp(function(){$(this).data('running',0)}); 
}else{ /*call with timeout or ignore...*/ } 

Il est un sémaphores de base sur un élément.

OU

Vous pouvez utiliser les files d'attente .animate et animation dans jQuery correctement, mais ce serait un peu exagéré pour un ce cas (je pense).

Answer 3

Ma première réaction est qu'il peut s'agir d'un problème CSS. Si je trouve la valeur par défaut et que je clique une fois sur le lien "Rechercher une adresse", je vois un problème de mise en page similaire (mais pas identique). La hauteur de chaque section semble réduite, comme si les sections flottantes ne détectaient pas la hauteur de contenu correcte.Si je spécifie de manière incrémentielle une hauteur sur chaque ContentRow ou que l'on passe de block-none-block sur pcodeLookupAddressEdit_risk_address, la mise en forme est corrigée.

Je ne connais pas la cause spécifique, mais vous souhaiterez peut-être vérifier le comportement CSS et afficher/masquer sur la diapositive.