Rafraîchissement dynamique d'une page avec le framework Jquery

Tout d'abord, bonjour à toutes et à tous et merci à tous ceux qui souhaiterons prendre part à ce sujet.

Rentrons maintenant dans le vif du sujet :

Imaginons que je possède :
. Un fichier "page.php" contenant 3 div (id = "div1" id = "div2" id="div3") et un bouton
. Un fichier "test.php" réalisant une requête Sql demandant 3 valeurs,
. Et un "test.js" dont le script permet, au clic sur le bouton, de lancer le script test.php" et de remplacer le contenu des 3 div par les valeurs récupérées par la requête Sql.

Voilà mon souci est qu'en fait je n'arrive pas à changer le contenu des 3 div. D'après-vous quelle méthode dois-je appliquer pour obtenir ce résultat?

Un petit up, pour avoir vos avis. Je ne souhaite pas qu'on me fasse mon code mais seulement qu'on me donne des pistes.

Merci
Modifié par lorenzo_one (11 Jul 2011 - 11:22)

Salut,

Une simple requête ajax via jQuery en récupérant soit de l'xml, soit du json, puis le placement dans les divs des valeurs récupérées et le tour est joué…

Mais tu dis que tu n'arrives pas à changer le contenu des divs, c'est donc que tu as déjà testé un script non ?

Merci de ta réponse. Effectivement j'ai déjà essayer un script pour réaliser le changement de div.

//script JS

$('#monBouton').click(function() {	

     $("#maDiv").load("test.php");
});

//script PHP ("test.php")

connexion_BDD(); // la connexion se fait nickel
$query = "select val from $table where date=now()" 	//donne la valeur d'aujourd'hui
		or die('Impossible d\'exécuter la requête :' . mysql_error());

$result = mysql_query($query); // on place le résultat de la requête dans une variable result
		
$data = mysql_fetch_array($result);	//on récupère le résultat dans un tableau nommé data

mysql_free_result($result);// on libère la mémoire allouée pour cette requête

echo $data['val'];
		
mysql_close();

Alors l'appel du load est correct, mais ensuite tu ne lui dis pas ce qu'il doit faire une fois la page chargée. Il faut que tu fasses appel au callback, exemple :

$('#monBouton').click(function() {
		$("#maDiv").load("test.php",function(response, status) { 
		  if (status == "success") { 
			  $(this).html(response);
		  }else if(status == "error") {
			  alert('erreur !');
		  }
		});
	});

PS : pense à éditer tes messages au lieu d'y répondre
Modifié par ZeB_panam (11 Jul 2011 - 16:35)

Salut zeb_panam, je ne vois pas trop l’intérêt de ce rajout voire même je ne le comprends pas. Si l'appel du load est correct ,j'affiche la réponse du script php sinon je lance une alerte erreur!, c'est bien ça?

Car sans cela, j'ai quand même réussi a obtenir le résultat souhaité mais seulement pour une div. Par contre je ne sais pas du tout comment faire pour rafraîchir plusieurs div en même temps.

Exemple avec mon cas précédent, si je récupère la valeur d'aujourd'hui dans la BDD, je veux l'afficher dans une premiere div mais je veux également faire un calcul dessus et afficher le résultat dans une autre div, est-ce possible ou alors faut-il faire appel à un autre script php?

Bonjour,

Ta requête renvoi bien un résultat ?

Essaye déja avec une valeur en dur dans test.php genre echo 'ok';

Car cela devrais fonctionner.

Bonjour CVNEO, oui ma requête renvoi bien un résultat et j'arrive à présent à modifier le contenu d'une div mais maintenant je souhaiterais pouvoir modifier plusieurs div en même temps lors de l'appui sur mon bouton. Malheureusement je ne vois pas comment faire. Aurais-tu une idée?

Ah bah je viens d'apprendre un truc, le fait de loader directement dans un div insère directement le contenu dedans . En même temps je ne bosse qu'avec la fonction $.ajax() (je trouve ça plus propre et plus souple).

D'ailleurs pour ton problème c'est ce qu'il faut faire, charger avec $.ajax(), récupérer du json (il y a juste à encoder avec php ton array via json_encode() ), et de là tu as tes données indépendantes.

Il y a d'autres manières de faire, mais en json c'est pratique. Là j'ai pas le temps de te faire un exemple, mais je verrais ce soir si je peux.
Modifié par ZeB_panam (12 Jul 2011 - 11:20)

Très bien je te remercie et du coup si tu penses que c'est mieux d'utiliser $.ajax je ferai de même. merci
Modifié par lorenzo_one (12 Jul 2011 - 11:43)

Ok, donc on va faire ça rapidement :

D'abord ta sortie php à encoder en json :

// je pars du principe que $data['val'] est un array bien sûr, et je l'insère dans un array multidimensionnel (ça permet par exemple d'avoir autre chose que "data" dans ce tableau) 
$resultat = array('data' => $data['val']);
echo json_encode($resultat);

Ensuite dans le js :

// si besoin d'envoyer des variables au script php
var dataProcess = "var_1="+var_1+"&var_2="+var_2;
var lien = "test.php";
$.ajax({
	url:lien,
	data:dataProcess,
	type:'POST',
	dataType:'json',
	success: function(resultat){
		// On assigne une variable à ce que nous retourne le script php
		var dataReturned = resultat['data'];
		// On transforme ce résultat en array
		var dataArray= dataReturned.split(",");
		// et on peut assigner les valeurs à n'importe quel objet jQuery
		$(".div1").html(dataArray[0]);
		$(".div2").html(dataArray[1]);
		$(".div3").html(dataArray[0]);
	}
});

Alors on peut bien sûr rendre ça plus automatique (faire un $.each sur l'array dataArray(), génerer des div selon le nombre d'éléments présents dans l'array, etc…), mais c'est vraiment pour t'expliquer comment se manipulent des données en json.

Merci Zeb d'avoir pris le temps de me répondre. Je vais essayer ton script dès à présent.

ReBonjour Zeb, après plusieurs essais, je n'arrive toujours pas à remplir mes 3 div en même mais seulement la première.

Voici mon code :

//script php
$resultat = array('data' => $data['val'],
                       'data2' => $data['val']*0.1,
		       'data3' => $data['val']*0.09
		); 
echo json_encode($resultat); 

//script js
		var lien = "test.php"; 
		$.ajax({ 
			url:lien, //lien du script php à exécuter
			data:"null", //pas besoin d'envoyer de données
			type:'POST', // envoi en POST
			dataType:'json', //type de données Json
			success: function(resultat){ //si l'appel de la méthode est réussie
			// On assigne une variable à ce que nous retourne le script php 
			var dataReturned = resultat['data','data2','data3']; 
			// On transforme ce résultat en array 
			
			var dataArray= dataReturned.split(","); 
			// et on peut assigner les valeurs à n'importe quel objet jQuery 
			$("#div1").html(dataArray[0]); 
 			$("#div2").html(dataArray[1]); 
			$("#div3").html(dataArray[2]);  
			} 
		}); 

Je ne vois pas où se trouve mon erreur et du coup je ne peux pas encore me lancer dans la méthode each(). Sinon encore merci car maintenant, je comprends mieux le concept du Json

Bon en fait je viens de réussir ce que je voulais faire en modifiant le script js

		var lien = "test.php"; 
		$.ajax({ 
			url:lien, //lien du script php à exécuter
			data:"null", //
			type:'POST', // envoi en POST
			dataType:'json', //type de données
			success: function(resultat){ //si l'appel de la méthode est réussie

			$("#val_elec_j").html(resultat.data); 
 			$("#val_euro_j").html(resultat.data2); 
			$("#val_co2_j").html(resultat.data3); 			
                } 
		}); 

Mais je me demande si c'est la meilleure façon de le réaliser?