Problème de Popup-TooltipRésolu

Question

Bonjour à tous,

Voilà, j'ai un petit problème avec un simili poup-tooltip. Sur une page, l'utilisateur clique sur une image, ceci appel alors une fonction à base d'ajax qui va récupérer des infos via une page php dans une base de donnée. Lorsque le tooltip/popup s'affiche, des liens sont présents dedans. Jusque là c'est OK.

Le problème c'est que quand l'utilisateur clique sur un lien, on appel de nouveau une fonction ajax qui va rechercher de nouveau des infos et les affiches dans le même tooltip/popup.
Les infos s'affichent bien (fonction talk2), mais tout de suite la fenêtre se ferme.

Voici les codes sources incriminés :

Page principale :


blabla ....

Blabla ...

Blabla ...



Page javascript :

function talk2(type) {


if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest();// FIREFOX
else if(window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP");// IE


document.getElementById("texte").style.display = "none"; //je ferme la boite avant de la réafficher
xhr_object.open("GET", "armes.php?id=" + type, false); //false => on attend le retour 
xhr_object.send(null);  
document.getElementById("texte").style.display = "block";
document.getElementById("texte").innerHTML=xhr_object.responseText;
}

function talk(type) {


if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest();// FIREFOX
else if(window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP");// IE


   xhr_object.open("GET", "talk.php?id=" + type, false); //false => on attend le retour 
   xhr_object.send(null);  

document.getElementById("texte").style.display = "block";  
document.getElementById("texte").innerHTML=xhr_object.responseText;
}


La fonction talk renvoit un tableau avec des liens (pas de soucis), dont les liens sont de la forme :

En fait tout fonctionne SAUF que la deuxième fois, la fenêtre se ferme 
Merci pour votre aide.

cs_whiteange · Accepted Answer

Ca y est j'ai trouvé le pourquoi du comment de tout cà ! Mais je ne comprends pas pourquoi celà n'a pas plu au code ajax.

Donc, voici la réponse, lorsque je clique sur la fonction talk, j'ai le droit à un dialogue. Sur ce même dialogue certaines lignes pour renvoyer au dialogue talk2 sont codés comme suit :
[ Blabla]

Et bien pour que le texte de talk2 reste, il a fallu mettre href="#".

Je veux bien, mais j'ai pas compris pourquoi :(

Si quelqu'un a une explication ...

nickadele · Answer

Bonjour,

As-tu essayé en supprimant cette ligne :
document.getElementById("texte").style.display = "none"; 

Nickadele

cs_whiteange · Answer

Effectivement, j'ai essayé, celà ne m'a rien donné, idem en enlevant dans talk2 :

document.getElementById("texte").style.display = "block";

puisqu'il été toujours à 'block'

nickadele · Answer

Peut-être y-t-il un problème dans ce que la page php renvoi !?
Une balise mal fermée ou tout autre !?

cs_whiteange · Answer

La page PHP renvoit un tableau dont voici le détail (récupérer par alert) :


,
Achats,
,

----

,
<table border="0" cellspacing="2" cellpadding="2">, Texte 1,  etc .... , Texte,

etc ....

cs_whiteange · Answer

Peut être celà peut il aider, mais IE affiche en bas de browser le symbole d'exclamation en disant :

'Ligne 309, car 16, caractère incorrect, Code: 0, URL:

nickadele · Answer

Il serait pas là le fautif :
onClick="document.getElementById('texte').style.display='none' "

???

nickadele · Answer

Si tu ne dis pas tout.... ;)
As tu regardé avec la console debug Javascript (mozilla) pour situer l'erreur ?

cs_whiteange · Answer

Et non j'y avais pensé  J'ai testé en le supprimant mais celà n'a rien changé.

cs_whiteange · Answer

Arf, cà il va falloir attendre ce soir chez moi, je te tiens au courant

nickadele · Answer

Ok, la seule chose qui m'étonne un peu c'est t'as façon de codé ton appel Ajax.
Normalement lors de l'envoie des valeurs au serveur, on définit quelle fonction va recevoir le résultat et on y traite les différentes réponses qu'Ajax renvoie ainsi que le résultat finale. 
C'est peut-être tout simplement de là que provient ton erreur.

Nickadele

cs_whiteange · Answer

Et voilà, j'ai testé avec la console, il n'y a aucune erreur.

Concernant l'appel Ajax, tu aurais plus vu un truc du genre :

function talk2(type) { 		if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest();// FIREFOX
else if(window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP");// IE

 		document.getElementById("texte").style.display = "none"; //je ferme la boite avant de la réafficher
xhr_object.open("GET", "armes.php?id=" + type, false); //false => on attend le retour 
xhr_object.send(null);  

    xhr_object.onreadystatechange = function() { talk3(xhr_object); };    
  }
  
function talk3(xhr_object)
  {
  if (xhr_object.readyState==4) 
    {
document.getElementById("texte").style.display = "block";

document.getElementById("texte").innerHTML=xhr_object.responseText;
    }
  }

cs_whiteange · Answer

Bien, je crois que tu as entièrement raison :

function talk2(type) { 		if(window.XMLHttpRequest) xhr_object =  new XMLHttpRequest();// FIREFOX
else if(window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP");// IE

 		document.getElementById("texte").style.display = "none"; //je ferme la boite avant de la réafficher
xhr_object.open("GET", "armes.php?id=" + type,  true ); 
xhr_object.send(null);  

    xhr_object.onreadystatechange  = function() { talk3(xhr_object); };    
  }
  
function talk3(xhr_object)
  {
  if (xhr_object.readyState==4) 
    {
document.getElementById("texte").style.display = "block";
 document.getElementById("texte").innerHTML=xhr_object.responseText;
    }
  }

Voilà c'est le nouveau code. Sur le principe, celà est bon, là où l'on ne conservait pas la deuxième fenêtre, on la conserve.

Mais le problème c'est que le résultat de l'objet xhr est vide En rouge, c'est l'appel que j'ai changé.

Bul3 · Answer

bonjour,

>>xhr_object.open("GET", "armes.php?id= " + type,  true ); 
donc... en asynchrone.

il faut donc attendre le retour d'ajax :

xhr_object.onreadystatechange  = function()
     {    if ( xhr_object.readyState == 4 )
          {   on peut traiter xhr_object.responseText; }
     }
xhr_object.open("GET", "armes.php?id=" + type, true); 

sans préjuger du reste....

Cordialement[mon Site][M'écrire]Bul

cs_whiteange · Answer

Je suis désolé Bul3, mais je ne comprends pas tout. Qu'elle est la différence par rapport à mon dernier post avec ce que tu écris ?
Tu me dis d'attendre la réponse d'Ajax, c'est ce que je fais, mais le problème c'est qu'il me retourne un contenu à  vide.

J'ai l'impression d'être un peu pommé là :(

Bul3 · Answer

j'avais mal lu !

dans armes.php fait un bête echo "ce que tu veux";
sans rien d'autres... 

et dis nous ce qu'un alert(xhr_object.responseText) affiche
( bien entendu lorsque la réponse est revenenue )

cs_whiteange · Answer

alors voici ce que sort armes.php :

Achats d'armes

Arme	Impact	Attaque	Parade	Rupture	Prix
	1D6 + 0	0	-5	5	5	Acheter
	1D6 + 1	0	-4	3	20	Acheter

Et l'objet XHR Response Test ne sort rien.

Bul3 · Answer

>objet XHR Response Test ne sort rien.

euh.... xhr_object.responseText j'espère ?

mais, ce doit être une erreur de frappe ?
pas de raisons à priori
comment peux-tu dire ce que sort armes.php
si responseText est vide ?

Bul3 · Answer

ah !!! tile="Poignard"">1D6 + 10-4 ça ne doit pas plaire ! c'est pour ça que je te disais de faire un simple echo

Bul3 · Answer

et pas tout contrôlé... il en reste peut-être !?!

cs_whiteange · Answer

Alors j'ai corrigé le double guillemet, mais rien n'a changé. Comment puis je dire que rien n'est retourne ? Parce que lorsque j'utilise la première méthode (premier post), le retour s'affiche bien, mais se ferme quasi de suite. Quand je dis que n'est rien n'est retourné, c'est parce que l'alerte est vide : alert('=>' + xhr_object.responseText + '<='); me retourne =><=, donc il y a un même pas un espace.

Bul3 · Answer

et bien... c'est donc coté armes.php qu'il faut regarder ! 
parfois, ça doit ne rien renvoyer

cs_whiteange · Answer

Hum,
je ne suis pas un grand spécialiste d'ajax, mais si ce que tu disais était la raison, alors quand dans le fichier php, je met uniquement print "toto";
il devrait le retourner, or rien du tout.
Pour moi je pense que le problème est lié à mon appel ajax, mais je ne suis pas assez bon sur ce domaine pour trouver le problème.

cs_whiteange · Answer

Tu vois le problème est au niveau de méthode d'appel sur le fichier php.

Si je modifie le code, en mettant false au lieu de true, que j'enlève alors le test du code état (inutile puisque je suis synchrone), dans ce cas, le tableau s'affiche, mais disparaît instantanément.

Bul3 · Answer

>>je met uniquement print "toto"; il devrait le retourner, or rien du tout. c'est ce que je te proposais il faut donc regarder de plus près coté html/javascript dès que possible, je jette un oeil, et nick va repasser lui aussi... mais, rien du tout ou effacé ? je t'avoue que j'ai des doutes tu affiches "=><=", donc à priori l'appel semble correct ? et pourtant tu nous dit qu'avec echo 'exemple'; seul, dans armes.php, tu n'affiches pas =>exemple<= ? >>le tableau s'affiche, mais disparaît instantanément. faut donc regarder ce qui se passe suite à l'affichage... l'appel semble correct, l'affichage aussi, puis on l'efface ( ou on recharge la page ) @+

cs_whiteange · Answer

Merci de ton aide,parce que là je sèche complètement.

Bul3 · Answer

bon déjà pour asynchrone : ça baigne je n'ai modifié que peu de choses, pas testé tel que tu nous as mis, et pas sûr d'ailleurs que cela ait une importance ? et pour l'affichage qui disparaît.... faut voir ce qui se passe derrière cet affichage.

Bul3 · Answer

et armes.php :
<?php
echo '****'.$_GET['id'].'****';
?>

cs_whiteange · Answer

J'ai fais le test indiqué (copier dans une page test.html), et tout se passe bien, le tableau sort correctement.

Bul3 · Answer

tout baigne alors ?
tu as testé modif par modif ?
tu sais laquelle fait que ça marche ?

cs_whiteange · Answer

Non pas vraiment, je sais juste que dorénavant, le problème n'est pas mes requêtes ajax, ni le retour du php, mais plutôt un problème lié je pense à ma première requête ajax (talk1). Il doit y avoir un truc qui se fais pas bien. Il faudra que je teste cà ce soir (là je pars me balader avec mes enfants).

cs_whiteange · Answer

Bn, j'ai testé en mettant tes indications dans le script. La valeur retournée par la fonction est "NaN".

Bul3 · Answer

ben oui..... je te disais page rechargée !

Blabla
ou return false
sinon, la page est rechargée.
@+

Problème de Popup-Tooltip

33 réponses

Votre réponse

Discussions similaires