Actualiser une div lorsqu'un formulaire en include est posté.

Question

Bonsoir tout le monde,

Je désire actualiser une div contenant une valeur récupérée à partir d'une base de donnée Mysql, dès lors qu'un formulaire contenu dans une autre page affiché en Iframe est validé.

Autrement dit, j'ai une page qui affiche un include avec ma div à actualiser ainsi qu'un include contenant un formulaire, je désire actualiser la div de l'include dès lors que le formulaire est validé.

Comment dois-je m'y prendre ?



Merci de votre lecture, bonne nuit à toutes et à tous !

PetoleTeam · Answer

Bonjour,
voir du coté de l'utilisation d'AJAX

;O)

monoski · Answer

Dis donc t'es partout toi ^^ !

Justement j'aimerai voir du code concret qui ressemble à ce que je veux en l'espèce. Après j'apprends,je reproduis, j'approfondis ça il n'y a pas de soucis :)

Si t'as quelque chose de concret à me montrer. Tous les tutoriaux que je trouve sont très vagues et au final je saisi pas trop l'intérêt :'(. D'un coté je suis juriste pas programmeur mais bon :p

jmeunier · Answer

un p'tit exemple :


if(window.XMLHttpRequest) // Firefox
   xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // Internet Explorer
   xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else { // XMLHttpRequest non supporté par le navigateur
    alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
     return;
     }
fic = "verif.php"   // fichier php appelé en tache de fond
xhr_object.open("POST", fic, true);   // POST ou GET

xhr_object.onreadystatechange = function()
  {
  if (xhr_object.readyState == 4)  // le traitement est fini côté PHP
     {
 v = xhr_object.responseText
        // chaine récupérée du PHP (echo du PHP)
 if (v.length > 0)
    {
            //traitement de la chaine comme tu veux
    // exemple v="bonjour"
            document.getElementById("ton_div").innerHTML = v
    }
     }
  }
xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
var data = "nom="+n+"&prenom="+p
// paramètres passés en post ou get à la page PHP
xhr_object.send(data);


Voila
exemple minima d'un script Ajax

jako

monoski · Answer

Merci pour cet exemple, j'ai quelques questions à te poser donc je prends le code et je pose mes questions ^^ :

if(window.XMLHttpRequest) // Firefox 
xhr_object = new XMLHttpRequest(); 
else if(window.ActiveXObject) // Internet Explorer 
xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); 
else { // XMLHttpRequest non supporté par le navigateur 
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
return; 


Bon là pas de soucis :p c'est des vérification de base :)

} 
fic = "verif.php" // fichier php appelé en tache de fond 
xhr_object.open("POST", fic, true); // POST ou GET 

bon ok la on établi la méthode de traitement de la page php. En ce qui concerne la page php je suppose que pour mon cas d'espèce, celle-ci se composerait d'une requête mysql et d'un echo inscrivant la valeur que je désire actualiser dans ma div.

xhr_object.onreadystatechange = function() 
{ 
if (xhr_object.readyState == 4) // Ca je comprends j'ai lu les documentations sur ajax en fonction du chiffre on désigne une étape du traitement de la requête.
{ 
v = xhr_object.responseText 
// Ok donc ça d'après toi c'est le résultat de l'echo de mon fichier php.
if (v.length > 0) //A partir de là ça se complique pour ma petite tête. 
{ 
//traitement de la chaine comme tu veux
// exemple v="bonjour" 
document.getElementById("ton_div").innerHTML = v 
} 
} // Bon ok je vois mais moi je div en question se trouve sur une autre page Php, comment dois-je faire ?
} 
xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //là on écrase l'éventuel header inité par le navigateur pour éviter certains bug avec certains navigateur je suppose.
var data = "nom="+n+"&prenom="+p 
// paramètres passés en post ou get à la page PHP. Mmmmh là je comprends plus trop, tu voudrais que j'envois des paramètres à ma page hum, pour activer le script éventuellement ? D'autre part si tu pouvais juste m'expliquer la syntaxe de "var data = "nom="+n+"&prenom="+p " ça serait cool. Je connais pas trop le javascript, enfin je me débrouille mais vraiment je me suis pas trop penché dessus.
xhr_object.send(data); //bon là on envoit.



Voila, merci beaucoup pour ton aide ça m'a permis d'éclaircir pas mal de point en me penchant sur la source qui est simple.

Cependant, je vois toujours pas comment je pourrais faire ce que je désire, c'est à dire actualiser une div sur une autre page que celle où est contenu le script. Parce que celui-ci s'exécute sur une page et je cherche à actualiser une valeur dans un autre include.

J'ai peut être un problème quand à la vision de la manière dont évolue AJAX si c'est le cas n'hésite pas à me le signifier.
Une fois encore merci beaucoup :)

monoski · Answer

OOOOppps j'ai oublié les balises codes je repost : 

Merci pour cet exemple, j'ai quelques questions à te poser donc je prends le code et je pose mes questions ^^ : 

if(window.XMLHttpRequest) // Firefox 
xhr_object = new XMLHttpRequest(); 
else if(window.ActiveXObject) // Internet Explorer 
xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); 
else { // XMLHttpRequest non supporté par le navigateur 
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
return; 


//Bon là pas de soucis :p c'est des vérification de base :) 

} 
fic = "verif.php" // fichier php appelé en tache de fond 
xhr_object.open("POST", fic, true); // POST ou GET 

bon ok la on établi la méthode de traitement de la page php. En ce qui concerne la page php je suppose que pour mon cas d'espèce, celle-ci se composerait d'une requête mysql et d'un echo inscrivant la valeur que je désire actualiser dans ma div. 

xhr_object.onreadystatechange = function() 
{ 
if (xhr_object.readyState == 4) // Ca je comprends j'ai lu les documentations sur ajax en fonction du chiffre on désigne une étape du traitement de la requête. 
{ 
v = xhr_object.responseText 
// Ok donc ça d'après toi c'est le résultat de l'echo de mon fichier php. 
if (v.length > 0) //A partir de là ça se complique pour ma petite tête. 
{ 
//traitement de la chaine comme tu veux 
// exemple v="bonjour" 
document.getElementById("ton_div").innerHTML = v 
} 
} // Bon ok je vois mais moi je div en question se trouve sur une autre page Php, comment dois-je faire ? 
} 
xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //là on écrase l'éventuel header inité par le navigateur pour éviter certains bug avec certains navigateur je suppose. 
var data = "nom="+n+"&prenom="+p 
// paramètres passés en post ou get à la page PHP. Mmmmh là je comprends plus trop, tu voudrais que j'envois des paramètres à ma page hum, pour activer le script éventuellement ? D'autre part si tu pouvais juste m'expliquer la syntaxe de "var data = "nom="+n+"&prenom="+p " ça serait cool. Je connais pas trop le javascript, enfin je me débrouille mais vraiment je me suis pas trop penché dessus. 
xhr_object.send(data); //bon là on envoit. 



Voila, merci beaucoup pour ton aide ça m'a permis d'éclaircir pas mal de point en me penchant sur la source qui est simple. 

Cependant, je vois toujours pas comment je pourrais faire ce que je désire, c'est à dire actualiser une div sur une autre page que celle où est contenu le script. Parce que celui-ci s'exécute sur une page et je cherche à actualiser une valeur dans un autre include. 

J'ai peut être un problème quand à la vision de la manière dont évolue AJAX si c'est le cas n'hésite pas à me le signifier. 
Une fois encore merci beaucoup :)

jmeunier · Answer

l'exemple que je donne concerne une page html, déroulement : et exemple PHP : req="select date_naissance from personne where nom='".$_POST["nom"]."' and prenom='".$_POST["prnom"]."'"; echo $rs["date_naissance"]; Pour ton architecture de pages, je n'ai pas de réponse mais il faudrait te rapprocher de cet exemple ... bien à toi jako

monoski · Answer

Snif :'(


Merci en tout cas t'as éclairé pas mal de chose pour moi ^^

Si quelqu'un à une idée je suis preneur :p

monoski · Answer

Comment on fait pour ne traiter qu'une partie de l'écho de la page php.

Est-ce que c'est possible ?


bon je vous expose mon problème concrètement : 

J'administre un mini jeu de rôle ou on se déplace sur un damier géant celui-ci apparait via une iframe sur la page de jeu et on se déplace grâce à des flèches multi-directionnelle disposée autour du personnage.

Sur la page de jeu il y a un include qui retrace les caractéristiques du personnage notamment les points de mouvements restants. J'aimerai que lorsque le joueur se déplace, les point de mouvements soient actualisées. Pour le moment cette valeur est actualisée via un refresh toutes les deux secondes du formulaire via ajax, mais cela sera à la longue super vorace en bande passante. J'aimerai donc actualiser cette valeur uniquement lorsque j'envoie le formulaire de déplacement.

Voilà c'est plus concret. Que dois-je faire ? Revoir l'architecture physique de mes pages ? Il me semble pourtant que d'autres sites arrivent à un résultat comme le mien. Si on regarde des appli facebook comme Mafia wars par exemple. Les points d'actions sont décomptés en direct pas de soucis et pourtant j'ai bien l'impression que l'architecture du site est au moins aussi complexe que celle de mon site.

PetoleTeam · Answer

Bonjour,
à la lecture du post et si j'ai bien compris ton soucis, la mise à jour ce doit d'être pilotée par le SERVEUR à réception d'une requête.
Le javascript s'exécute coté CLIENT et ne pourra indiquer qu'une modif via un submit au SERVEUR, et c'est à celui ci de prendre en charge la modification et de l'envoyer à ceux qui sont connectés...

donc voir coté PHP ou autre d'ailleurs.

je ne pourrais pas plus t'aider sur ce point!
;O)

monoski · Answer

Oki merci faut que je vois comment je peux diriger un echo vers une autre page...

Ca doit se faire facilement après tout...

Actualiser une div lorsqu'un formulaire en include est posté.

10 réponses

Votre réponse

Discussions similaires