Discussion :

[Ministar]

Bonjour!

Me revoici avec le javascript et un problème qui ne doit pas être trop compliqué.

J'ai une page chat.php qui contient la frame contenu_chat.php.

Sur la page chat.php j'ai un formulaire qui me permet d'envoyer un message dans la base de donnée en ajax, pour ça pas de problème.

J'aimerais que lorsque l'utilisateur envoi un message la frame reçoive de nouveau la page contenu_chat.php, comment faire cela en javascript?

Merci de votre aide!

[E.Bzz]

Bonjour,

J'aimerais que lorsque l'utilisateur envoi un message la frame reçoive de nouveau la page contenu_chat.php, comment faire cela en javascript?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.frames['name_de_la_frame'].location.reload();

A+

[Ministar]

J'ai vu plein de code comme celui ci qui devraient fonctionner mais ce n'est pas le cas ();

Il y a 4 fichiers :
script.js qui contient mon script d'envois du message :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function envoyermessage()
{
  //Création de l'objet xhr-----------------------------------------------------
  var xhr= null;
  if(window.XMLHttpRequest) // Firefox
  {  xhr= new XMLHttpRequest(); }
  else if(window.ActiveXObject) // Internet Explorer
  {  xhr = new ActiveXObject("Microsoft.XMLHTTP"); }
  else
  { // XMLHttpRequest non supporté par le navigateur
   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
   return;
  }
  //----------------------------------------------------------------------------

  //Ouvre la connexion au serveur en précisant le type de données :
  xhr.open('POST','./script/envoyermessagechat.php',true);
  //On associe à une varible un contenue, ici pour le contenu de la page :
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

  // On regarde les changement d'état de l'objet xhr
  xhr.onreadystatechange = function attente(){  // l'état est à 4, requête reçu !
                                                if(xhr.readyState == 4)
                                               {  }
                                             }
  // Envoi la requete xhr au serveur :
  xhr.send(donnees_formatees());

  //remise à 0 de l'état du formulaire
  document.getElementById("idmsg").value='';
  document.getElementById("idmsg").focus();
  document.frames['frame_chat'].location.reload();
  return;
}

Ensuite mon fichier chat.php qui contient la frame et le bouton d'envoi pour le message et l'acualisation théorique :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
...
script type="text/javascript" src="./script/script.js"></script>
<!-- Mise en place de la frame -->
<iframe src="./contenu_chat.php" name="frame_chat" height="400" width="670" align="center" frameborder="0"></iframe>
...
<form method='POST' action='javascript:envoyermessage();' name='formulaireenvoi'>
<input name='namemsg' id='idmsg' type='text' size=75>
<input name='namepseudo' id='idpseudo' type='hidden' readonly>
<input type='button' value='envoyer' onclick='javascript:envoyermessage();'>
</form>
...

et donc mon fichier envoyermessagechat.php qui me permet d'envoyer un message et qui ne contient que du php et contenu_chat.php qui contient la liste des messages.

Le problème viendrais du fichier js qui est indépendant des autres?

Edit : si dans mon fichier chat.php pour le formulaire d'envoi je fais onclick='javascript:envoyermessage();document.frames['frame_chat'].location.reload();' plus rien ne se passe...

[E.Bzz]

Le problème viendrais du fichier js qui est indépendant des autres?

Non (pas du fait qu'il soit indépendant), mais si tu as une erreur dans un des fichiers, le reste du JS ne fonctionne plus ...
Pas de message d'erreur ?
Sont ils activés ?

A+

[Ministar]

J'ai testé ca dans ma fonction envoyer message :

document.frames['frame_chat'].location.reload();
document.getElementById("idmsg").value='test js ok';
document.getElementById("idmsg").focus();

Et mon formulaire ne contient pas le message test js ok, c'est donc que
document.frames['frame_chat'].location.reload(); lui pose problème ...

Edit :
Dans le sens inverse cad :

document.getElementById("idmsg").value='test js ok';
document.getElementById("idmsg").focus();
document.frames['frame_chat'].location.reload();

Mon champs de formulaire prend bien la valeur test js ok

[Ministar]

Le problème viendrais de ma frame qui est en fait une iframe?

[E.Bzz]

Le problème viendrais de ma frame qui est en fait une iframe?

Non car JS les gère avec les même syntaxes.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

alert( document.frames['frame_chat'].location.href);

à la place du reload() t'affiche bien l'url de la frame ?

A+

[Ministar]

Aucune réaction et ca empèche l'expecution de test_js_ok dans mon champs de formulaire

[E.Bzz]

Aucune réaction et ca empèche l'expecution de test_js_ok dans mon champs de formulaire

Bien ce qui me semblait ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 parent.frames['frame_chat'].location.reload();

devrait fonctionner mieux (la collection frames dépend de la fenêtre et non du document)



A+

[Ministar]

Le javascript s'effectue sans erreur cependant la frame ne s'actualise pas!

PS: merci beaucoup de ton aide :p

[E.Bzz]

Et l'alert() du href te sort la bonne url maintenant ?

[Ministar]

Oui, je viens de tester

[E.Bzz]

Bon ben

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 parent.frames['frame_chat'].location.href = "./contenu_chat.php";

ou pire (mais au moins elle n'est pas "en dur") :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

parent.frames['frame_chat'].location.href = parent.frames['frame_chat'].location.href;

A+

[Ministar]

Le premier bout de code bloque mon javascript, le deuxième ne fait aucune actualisation...
Je vais essayer de lancer le code à parir d'un lien à la place du clique sur le bouton, on v a bien voir ...

Oups, je croit que j'ai oublié de dire quelque chose d'important
J'ai fait le test sur le lien, ca fonctionne nickel avec parent.frames["frame_chat"].location.reload();

Le truc que j'ai oublié de dire qui est peut être important c'est que mon fichier script.js est dans un dossier script
Le fichier envoyermessage_chat est également dans ce dossier
Ca change quelque chose?

[Ministar]

Alors ce que j'ai fait pour le test du lien : j'ai fait une fonction reload() dans script.js:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function reload()
{
  parent.frames["frame_chat"].location.reload();
  return ;
}

Mon lien est scripté de la manière suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a onclick=javascript:reload();><img src='../images/smiley/commun/sourire01.gif' border='0'></a>

Comme ca tout fonctionne.

J'ai donc essayer d'utiliser la fonction sur mon bouton de validation de formulaire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<form method='POST' action='javascript:envoyermessage();reload();' name='formulaireenvoi'>
<input vname='namemsg' id='idmsg' type='text' size=75>
<input name='namepseudo' id='idpseudo' type='hidden' readonly>
</td><td>
<input type='button' value='envoyer' onclick='javascript:envoyermessage();reload();'></form>

Et la rien ne se passe!!!! Je ne vois pas pourquoi!!
Est-ce qu'il y a un moyen de détourner le problème? La je ne sais plus quoi faire!!

[E.Bzz]

Est-ce qu'il y a un moyen de détourner le problème? La je ne sais plus quoi faire!!

1. Enlève le formulaire : il ne sert à rien !

2. Code :

   Sélectionner tout - Visualiser dans une fenêtre à part

   <input type='button' value='envoyer' onclick='if (reload()) envoyermessage();'>

   (pas de "javascript:" dans le code des évènements)

ta fonction reload() (qu'il vaudrait mieux nommer autrement, sinon confusion possible) doit faire un "return true ;" ...

A+

[Ministar]

Le bouton de validation de formulaire ne sert à rien? Comment envoyer le message dans ce cas la? Ca se fait tout seul? Le champs de formulaire sert à avoir un message à envoyer!

Avec ton code le message s'envoi mais rien ne change, l'actualisation ne se fait pas.

Edit : La c'est moi qui me suis trompé, j'avais oublié de renomer reload() en actualisation_chat() (pour ne pas qu'il y ai de problème de nom), du coup j'ai un "true" afficher sur ma page.

Au fait, il fait que la fonction envoyermessage() se fasse avant l'actualisation pour que le message apparaissent dans la page actualisé.

Question subsidière : Il faut que toutes les fonctions retourne quelque chose? Parce que j'en ai beaucoup qui retourne rien : return;

[E.Bzz]

Le bouton de validation de formulaire ne sert à rien? Comment envoyer le message dans ce cas la? Ca se fait tout seul? Le champs de formulaire sert à avoir un message à envoyer!

Ce n'est pas un bouton de validation de formulaire, justement (sinon, il serait de type="submit").
Et ce n'est pas le bouton qui ne sert à rien (il appelle tes fonctions sur onclick), mais le tag <form> lui même. Les input sont bien sûr à conserver, mais tu n'as visiblement pas besoin d'un fonctionnement de type formulaire, puisque tu ne fais jamais de submit() (Ajax n'utilise pas les <form>).
Seule contrainte : tu ne peux utiliser que les ID pour accéder aux éléments.
Mais d'une part c'est préférable, et d'autre part .... c'est ce que tu fais déjà

du coup j'ai un "true" afficher sur ma page.
...
Question subsidière : Il faut que toutes les fonctions retourne quelque chose? Parce que j'en ai beaucoup qui retourne rien : return;

C'est certainement le "true" de envoyermessage()
Le return n'est pas obligatoire.
Ici, il l'est pour actualisation_chat() (puisqu'un booléen est attendu dans le if), mais pas pour envoyermessage() duquel aucun retour n'est attendu ...

A+

[Ministar]

J'ai quelques peu modifier mon chat depuis le dernier post.

En fait le déclic que j'ai eu c'est quand tu m'a dis qu'un n'y avait pas de type submit à mon bouton.
Je me suis alors demandé comment faisait les données pour transiter à ma page php?! J'ai donc revu mon code ajax et c'est la que j'ai vraiment compris le fonctionnement d'ajax.
Du coup je me suis dis que je n'avais plus besoin du formulaire, et tu as tout à fait raison! Si j'ai bien compris c'est AJAX qui s'occupe de fait le transit des données, on a donc plus besoin de les envoyés.

Pour le problème d'actualisation de la frame, j'ai décidé de carrément l'enlever, les messages du chat sont directement transmises dans un div. Du coup je n'ai plus le problème de la barre de défilement quand les messages sont plus long que la frame.

Au niveau de l'actualisation de ma frame je mettais un raffraichissement automatique toutes les 4 secondes en html. La le procédé est un peu différent, je vais l'actualisation via du javascript, voici la partie interessante de mes pages :

Mon fichier chat.php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript" src="./script/script.js"></script>
 
<!--Ancienne méthode : Mise en place de la frame
<iframe src="./contenu_chat.php" name="frame_chat" id="frame_chat" height="480" width="670" align="center" frameborder="0"></iframe>-->
 
<!--Nouvelle méthode avec un div : -->
<div id="messages_chat">...Chargement du chat...</div>
 
<!-- Insertion des messages dans le div et initialisation de l'actualisation-->
<script type="text/javascript">
demarrerchrono_chat_div();
</script>
 
<form method='POST' action='javascript:envoyermessage();demarrerchrono_chat_div();' name='formulaireenvoi'>
 
<input name='namemsg' id='idmsg' type='text' size='70'>
<br><input name='namepseudo' id='idpseudo' type='hidden' readonly value='$pseudohtml'>
 
 
<input type='button' value='envoyer' onClick='javascript:envoyermessage();demarrerchrono_chat_div();'>
</form>

Mon fichier script.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function info_chat_div()
{
  //Création de l'objet xhr-----------------------------------------------------
  var xhr_liste= null;
  if(window.XMLHttpRequest) // Firefox
  {  xhr_liste= new XMLHttpRequest(); }
  else if(window.ActiveXObject) // Internet Explorer
  {  xhr_liste = new ActiveXObject("Microsoft.XMLHTTP"); }
  else
  { // XMLHttpRequest non supporté par le navigateur
   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
   return;
  }
  //----------------------------------------------------------------------------
  xhr_liste.open('POST','./script/contenu_chat.php',true);
  xhr_liste.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  //document.getElementById('listeactif'+num).setRequestHeader("Cache-Control","no-cache");
  xhr_liste.onreadystatechange = function attente(){
                                                if(xhr_liste.readyState == 4)
                                                {
                                                  document.getElementById('messages_chat').innerHTML=xhr_liste.responseText;
                                                }
                                             }
  xhr_liste.send(null);
}

//Actualise les messages du chat toutes les 4 secondes
function demarrerchrono_chat_div()
{
  info_chat_div();
  setTimeout("demarrerchrono_chat_div()",4000);
}

Je vais finir avec une question :
Dans le code que j'ai montré ici j'ai laisser les balises <form> parce que l'envoi se fait uniquement sur le clic du bouton, pas lorsque l'on appui sur entrer.

Comment faire pour que lorsque l'utilisateur appuie sur entrer cela revoi le message et actualise le div?

ps : j'ai trouvé onkeypress

et testé cela :

onKeyPress='javascript:if(event.keyCode==13) { alert('ahah');envoyermessage();demarrerchrono_chat_div(); dans mon bouton et cela n'a aucun effet...

Je te dis déjà par avance un grand merci! (et au passage à toute la communauté de developper.com sans qui de nombreux problème ne seraient pas résolu).

[E.Bzz]

onKeyPress='javascript:if(event.keyCode==13) { alert('ahah');envoyermessage();demarrerchrono_chat_div(); dans mon bouton et cela n'a aucun effet...

Pour avoir ce fonctionnement, tu peux garder les balises <form> (elles ne serviront qu'à gérer le fonctionnement que tu décris) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<form action='' onsubmit="envoyermessage();demarrerchrono_chat_div();return false;">
<input type="submit" value="Go">
<input type="reset" value="RAZ">
</form>

Ne pas oublier le "return false;" pour bloquer l'envoi du form ...

A+