[JS][Frame] Actualisation d'une frame sur un onclick()

Version imprimable

19/03/2008, 14h38
Ministar

[JS][Frame] Actualisation d'une frame sur un onclick()

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!
19/03/2008, 14h40
E.Bzz

Bonjour,

Citation:

Envoyé par Ministar

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:

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

:?

A+

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

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

Code:

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:

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...

19/03/2008, 15h09
E.Bzz

Citation:

Envoyé par Ministar

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+
19/03/2008, 15h21
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
20/03/2008, 11h06
Ministar

Le problème viendrais de ma frame qui est en fait une iframe?
20/03/2008, 11h17
E.Bzz

Citation:

Envoyé par Ministar

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

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

:koi:

Code:

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

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

A+
20/03/2008, 11h30
Ministar

Aucune réaction et ca empèche l'expecution de test_js_ok dans mon champs de formulaire :roll:
20/03/2008, 11h39
E.Bzz

Citation:

Envoyé par Ministar

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

Bien ce qui me semblait ...

Code:

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

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

:oops:

A+
20/03/2008, 11h45
Ministar

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

PS: merci beaucoup de ton aide :p
20/03/2008, 11h53
E.Bzz

Et l'alert() du href te sort la bonne url maintenant ?
20/03/2008, 11h56
Ministar

Oui, je viens de tester :)
20/03/2008, 12h06
E.Bzz

Bon ben

Code:

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

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

Code:

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

:?

A+
20/03/2008, 12h12
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 ... :roll:

:oops: Oups, je croit que j'ai oublié de dire quelque chose d'important :oops:
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?

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

1 2 3 4 5 function reload() { parent.frames["frame_chat"].location.reload(); return ; }
Mon lien est scripté de la manière suivante :

Code:

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

Comme ca tout fonctionne. :P

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

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!!!! :arf: 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!!

20/03/2008, 14h08
E.Bzz
Citation:

Envoyé par Ministar

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:
  
  <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+
20/03/2008, 16h14
Ministar

Le bouton de validation de formulaire ne sert à rien? Comment envoyer le message dans ce cas la? Ca se fait tout seul?:koi: 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;
20/03/2008, 16h35
E.Bzz

Citation:

Envoyé par Ministar

Le bouton de validation de formulaire ne sert à rien? Comment envoyer le message dans ce cas la? Ca se fait tout seul?:koi: 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à :D

Citation:

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+

Et la lumière fut...

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:

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>   <div id="messages_chat">...Chargement du chat...</div>  <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:

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).

25/03/2008, 09h47
E.Bzz
Citation:

Envoyé par Ministar

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:

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+