11548 sujets

JavaScript, DOM et API Web HTML5

IE8 Onclick et href, href n'est pas executé si le lien est une image!

Bonjour,

Contexte: génération d'un rapport d'une trentaine de page avec moults graphiques, cette génération étant assez longue, je voudrais désactiver le lien et afficher à la place un gif animé d'attente.

pour ce faire j'utilise le javascript suivant:

<script type="text/javascript">                                                                                                   
   function disable(id) {
   var toChange = document.getElementById(id);
   var content;
   content = "" ;
   myImage = new Image();
   myImage.src = "img/wait.gif";
   content = '<img src="img/wait.gif" title="Patientez svp" alt="Patientez" />';
   toChange.innerHTML = content;
   toChange = document.getElementById("message");
   content = '<p class="info"><?php echo _("Votre dossier est en cours de génération merci de patienter, cette opération est assez longue, c\'est peut-être le moment de boire un café...");?></p>';
toChange.innerHTML = content;
   return true;
</script>


ce script est appelé par le lien suivant:

<a href=\"?action=rapport&id={$id}&clientid={$this->v['clientid']}\" onclick=\"disable({$id})\">
  <img src=\"img/logout.png\" title=\""._("Terminer le questionnaire pour éditer un rapport")."\"/>
  <img style=\"display:none;\"src=\"img/wait.gif\" />                                                                   
</a>";


et le probleme suivant sur IE8:

le javascript s'execute correctement, mais le script rapport n'est jamais appelé
pourtant la litérature trouvée sur le net à ce sujet affirme que le javascript doit etre executé avant l'action par défaut.
et que a moins que la fonction javascript ne retourne faux, l'action par défaut est systématiquement éxécutée.
Modifié par yobuntu (20 Jan 2010 - 11:02)
le souci est qu'avec le href tu quotte la page en la rechargeant

quel est l'ergonomie, la chronologie souhaitée ?
Modifié par SpaceFrog (19 Jan 2010 - 18:57)
merci pour la réponse, mais je suis désolé je ne comprend pas ce que tu veux dire par quotter la page en la rechargeant.

qd à la chronologie souhaité: la meme que sous FF ou safari:

l'utilisateur click sur le lien,
le javascript se met en branle et le lien est remplacer par un gif animé, (un rond qui tourne) et un message apparait a l'écran avertissant l'utilisateur que le rapport est en cours de génération et que l'opération est un peu longue.

une fois le rapport généré, une nouvelle page apparait avec un lien permettant de télécharger le rapport.
le href te faisant quitter la page puisque tu la recharges ton gif ne reste pas affiché ...
pour cela il faudrait que tu restes sur la page et donc au lieu de lancer un rechargeemnt de page dans ton href il faudrait lancer une requete ajax ...
oui mais c'est exatement ce que je veux que le gif ne soit plus afficher une fois que j'atteins la nouvelle page, le probleme est que c'est le href qui n'est pas éxécuté avec IE8: avec ie8, le gif, s'affiche, le message d'attente s'affiche, mais la page suivante n'arrive jamais.
avec firefox, le gif s'affiche ainsi que le message, et une minute après la page suivante apparait et remplace tout ça.

Je suis désolé, j'arrive pas a être plus clair
pour commencer j'aurais mis l'image dans le le code en dur mais avec un style display:none au lieu de la rajouter avec un innerHTML...
sur le onclick du href tu modifies juste son display à block et tu rajoutes un return true:

<a href=\"?action=rapport&id={$id}&clientid={$this->v['clientid']}\" onclick=\"disable({$id});return true;\">
Smiley eek Smiley eek Smiley eek Smiley eek

Bon alors apres plein de test j'ai compris d'ou vient le problème!!!

et pour le coup, c'est un peu choquant et dingue:

entre <a href="blavla" onclick="bla()"> et </a>
si la partie a cliquer est un mot ou une suite de mots: ie a le comportement souhaité: éxécution du javascript puis chargement de la page.

par contre si le lien est du type

<a href="blavla" onclick="vla()"> <img src="test.png" /></a>

alors le javascipt est éxécuté mais le lien n'est pas éxécuté!!!


Smiley biggol
tu testes sous quel navigateur ???
je n'ai pas ce comportement curieux que tu nous décrit là, le js est exectué, puis le href
en effet!!

On dirait que c'est uniquement CE script qui ne passe pas sous IE8 dans le cas ou le lien est une image
Le probleme est résolu, en utilisant la propriété style au lieu de innerHTML comme tu m'as expliqué précédement:

je ne peux plus montrer le HTML original généré.

mais je pense que faire disparaitre le lien sur lequel on vient de cliquer doit poser des probleme a IE dans le cas ou c'est une image qui est affichée dans le lien.

voilà un exemple minimal



<script type="text/javascript">
  function disable(id) {
    var toChange = document.getElementById('test'+id);
    var content = '';
    toChange.innerHTML = content;
  }
</script>
<span id="test1">
<a href="http://www.google.fr" onclick="disable(1)">
  <img src="img/logout.png" />
</a>
</span>
<span id="test2">
<a href="http://www.google.fr" onclick="disable(2)">
  test
</a>
</span>


sur ie 8 cliquer sur le premier lien fait disparaitre l'image, mais on arrive jamais chez google.
cliquer sur le 2ème lien fait disparaitre le lien et va chez google
Sujet clos
Aller à