actualiser div (contenant php) javascript ou ajax

31 août 2013 à 22:24:24

Bonjour,

Je développe avec PHP. Je veux bien insérer la météo sur mon site (page index.php).

La page de météo je l'ai sur une autre page (meteo.php) avec le code dessous où j'affecte le numéro de la ville avec le code

<?php echo $_GET[id_ville]?>

<div id="widget_97e879abd9f8b28426ff627a7c67e36b"><a href="http://www.my-meteo.fr/previsions+meteo+maroc/casablanca.html" title="M&eacute;t&eacute;o Casablanca">M&eacute;t&eacute;o Casablanca</a> 

<script type="text/javascript" src="http://www.my-meteo.fr/meteo+webmaster/widget/js.php?ville=<?php echo $_GET[id_ville]?> &amp;format=petit-vertical&amp;nb_jours=5&amp;icones&amp;c1=272E38&amp;c2=00519e&amp;c3=eee&amp;c4=eee&amp;id=97e879abd9f8b28426ff627a7c67e36b">

</script>

</div>

Ma question est la suivante:

Je veux bien faire une div sur la page (index.php) qui rappelle le contenu de (meteo.php) en passant le numéro de la ville (id_ville) par get (combobox ou lien directe) sans recharger ma page (index.php).

Je vous remercie pour votre aide.

arnaud49

1 septembre 2013 à 1:17:56

Salut !

Si j'ai bien compris ta question, ce code (une fois adapté à ton cas) devrait te satisfaire :

function meteo(){
   $.ajax({
      type: "GET",
      url: "maPageMeteo.php"
   }).done(function(html){
      $('#maDiv').html(html); // Retourne dans #maDiv le contenu de ta page
   ;
   setTimeout("meteo();", 5000); // Va rafraichir les données toutes les 5 secondes
}

Créer : voilà la grande délivrance de la souffrance, voilà ce qui rend la vie légère.

medhan

1 septembre 2013 à 1:45:21

Arnaud49 je te remercie 1000 fois, je vais essayer ton code..

Je suis peut être en avance mais toujours un petit blocage. J'ai pu m'inspirer d'un tutoriel et j'ai fais ce qui suit :

j'ai codé ma page (index.php) comme suit :

<?php 
	require("./connect.php");
?>

<html>
	<head>
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>



		<script type='text/javascript'>
 
			function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
	

				function go(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('id_meteo').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajax_meteo.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sel = document.getElementById('auteur');
				id = sel.options[sel.selectedIndex].value;
				xhr.send("id="+id);
			}

	
	

	
		</script>
        
        
        
	</head>
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend>METEO</legend>
				<label>Ville : </label>


				<select name='auteur' id='auteur' onchange='go()'>
					<option value='-1'>Aucun</option>
					<?php

						$res = mysql_query('SELECT id_ville, ville FROM t_villes_meteo ORDER BY ville');
						while($row = mysql_fetch_assoc($res))
						{
							echo "<option value='".$row["id_ville"]."'>".$row["ville"]."</option>";
						}
					?>
				</select>


                
                <br><br><br>
                <div id='id_meteo'>
                  
                  
                </div>
                
			</fieldset>
		</form>
        
        
        





	</body>
</html>

sur une autre page appelée (ajax_meteo.php) j'ai fais ce code :

<?php 
	require("./connect.php");


	$sql = "SELECT id_ville, ville FROM t_villes_meteo WHERE id_ville = ".$_POST["id"]." ";
    $req = mysql_query($sql) or die(mysql_error());
	$row = mysql_fetch_array($req);


$id_ville=$row['id_ville'];
$ville=$row['ville'];

?>
 


</br>
</br>


<!-- widget meteo -->
<div id="widget_e00fc18850d1b1e32a408b491a1dd1c3">
<a href="http://www.my-meteo.fr/previsions+meteo+maroc/<?php echo $ville ?>.html">M&eacute;t&eacute;o <?php echo $ville ?> 5 jours </a>

<script type="text/javascript">
(function() {
    var my = document.createElement("script"); my.type = "text/javascript"; my.async = true;
    my.src = "http://www.my-meteo.fr/meteo+webmaster/widget/js2.php?ville=<?php echo $id_ville ?>&format=classique&nb_jours=5&temps&c1=414141&c2=a1a1a1&c3=d4d4d4&c4=ffffff&c5=56d4f4&c6=d12e2e&police=0&t_icones=1&x=180&y=384&id=e00fc18850d1b1e32a408b491a1dd1c3";
    var z = document.getElementsByTagName("script")[0]; z.parentNode.insertBefore(my, z);
  })();
 </script>

</div>
<!-- widget meteo -->

Mon idée est de passer la variable "id_ville" de ma ville de (index.php) en méthode poste vers (ajax_meteo.php) et essayer de rapporter le résultat de la page (ajax_meteo.php) dans la "div" de (index.php).

J'ai maintenant un problème que je ne comprend pas sur ma page index.php :

- Le titre dont le code dessous fonctionne très bien en changeant la ville

<a href="http://www.my-meteo.fr/previsions+meteo+maroc/<?php echo $ville ?>.html">M&eacute;t&eacute;o <?php echo $ville ?> 5 jours </a>

- l’apparition de la météo de la ville (code dessous) ne se fait pas....!

<script type="text/javascript">
(function() {
    var my = document.createElement("script"); my.type = "text/javascript"; my.async = true;
    my.src = "http://www.my-meteo.fr/meteo+webmaster/widget/js2.php?ville=<?php echo $id_ville ?>&format=classique&nb_jours=5&temps&c1=414141&c2=a1a1a1&c3=d4d4d4&c4=ffffff&c5=56d4f4&c6=d12e2e&police=0&t_icones=1&x=180&y=384&id=e00fc18850d1b1e32a408b491a1dd1c3";
    var z = document.getElementsByTagName("script")[0]; z.parentNode.insertBefore(my, z);
  })();
 </script>

Le code ma table ville si vous voulez est :

CREATE TABLE `t_villes_meteo` (
  `id_ville` int(4) NOT NULL,
  `ville` varchar(20) DEFAULT NULL,
  PRIMARY KEY (`id_ville`)
) 

INSERT INTO `t_villes_meteo` (`id_ville`, `ville`) VALUES 
  (330,'Casablanca'),
  (331,'Rabat-Sale'),
  (332,'Fes'),
  (333,'Meknes'),
  (334,'Marrakech'),
  (335,'Tanger'),
  (336,'Agadir'),
  (337,'Oujda'),
  (338,'Tetouan'),
  (339,'Safi'),
  (340,'Beni Mellal'),
  (341,'EL Jadida'),
  (342,'Taza'),
  (343,'Laarache'),
  (344,'Essaouira'),
  (345,'Ourzazat'),
  (676,'Kenitra'),
  (678,'Kouribga'),
  (680,'Laayoune'),
  (681,'Kenifra'),
  (682,'Kenitra');
COMMIT;

Alors comment je peux faire tourner ce code das (ajax_meteo.php) et le faire apparaitre correctement sur (index.php) ??

- l’apparition de la météo de la ville (code dessous) ne se fait pas....!

<script type="text/javascript">
(function() {
    var my = document.createElement("script"); my.type = "text/javascript"; my.async = true;
    my.src = "http://www.my-meteo.fr/meteo+webmaster/widget/js2.php?ville=<?php echo $id_ville ?>&format=classique&nb_jours=5&temps&c1=414141&c2=a1a1a1&c3=d4d4d4&c4=ffffff&c5=56d4f4&c6=d12e2e&police=0&t_icones=1&x=180&y=384&id=e00fc18850d1b1e32a408b491a1dd1c3";
    var z = document.getElementsByTagName("script")[0]; z.parentNode.insertBefore(my, z);
  })();
 </script>

arnaud49

1 septembre 2013 à 1:56:06

PS: j'ai oublié de te dire qu'il faudra pour utiliser mon code, insérer Jquery grâce au code suivant :

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

Après, concernant ton code honnêtement, j'ai pas la foi de tout lire. Cependant, de ce que j'ai pu en tirer comme conclusion c'est que tout ça est bien fouillis ! Essaye de voir des tutoriels concernant Ajax et Jquery et tu devrais pouvoir réaliser ce que tu souhaites (même si je reste convaincu que mon code précédent convient à ta situation!). Bon courage !

-
Edité par arnaud49 1 septembre 2013 à 1:56:35

Créer : voilà la grande délivrance de la souffrance, voilà ce qui rend la vie légère.

medhan

1 septembre 2013 à 2:09:07

Merci 1000 fois, je suis preneur de toute solutions... la votre se montre très intéressante et aussi très facile.

J'ai un problème quelque part. Est ce tu peux me vérifier où est l'erreur dans ton code ici.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js">

function meteo(){
   $.ajax({
      type: "GET",
      url: "maPageMeteo.php"
   }).done(function(html){
      $('#maDiv').html(html); // Retourne dans #maDiv le contenu de ta page
   ;
   setTimeout("meteo();", 5000); // Va rafraichir les données toutes les 5 secondes
}
        
 </script>

arnaud49

1 septembre 2013 à 2:36:28

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
function meteo() {
   $.ajax({
      type: "GET",
      url: "maPageMeteo.php"
   }).done(function (html) {
      $('#maDiv').html(html); // Retourne dans #maDiv le contenu de ta page
      setTimeout(meteo, 5000);
   });
}       
</script>

-
Edité par arnaud49 29 mai 2016 à 4:49:16

Créer : voilà la grande délivrance de la souffrance, voilà ce qui rend la vie légère.

JulienJulien15

27 mai 2016 à 13:17:38

Hola

Le ";" à la ligne 9 ne serait-il pas en trop?