Rafraichissement données Div

Version imprimable

Bonjour,

voila j'ai une page HTML avec des div, j'aimerais rafraichir une d'entre elle toutes les 10 sec par exemple.
Pour cela j'ai inséré le script suivant dans le head :
Code:

1 2 3 var auto_refresh = setInterval(function (){ $('#load_donnees').load('index.html').fadeIn("slow"); }, 10000); // rafraichis toutes les 1000 millisecondes
et dans mon body :
Code:

1 2 3 4 5 6 7 <img border="0" src="images.jpg"></a> <div style="text-align: left;> Heure = </div> <div id="load_donnees" style="text-align: left;> instruction à rafraichir </div>
Sauf que quand je fais celà, j'ai une duplication de mes balises img et div (le rafraichissement fonctionne) mais j'ai tout en double.
Je pense que je n'ai pas mis la bonne chose dans $('#load_donnees').load('index.html').fadeIn("slow"); sur la partie index.html, il doit rappeler toute la page ?
je ne sais pas comment remédier au problème, une idée ?

26/03/2014, 18h21
Sylvercis

la page index.html ne doit contenir que le texte a rafraichir et pas a nouveau la balise IMG.
Il n'y pas aussi dans index.html une div id="load_donnees" ?
26/03/2014, 20h28
thuglife

Je crois que j'ai compris, en faite les deux code que j'ai indiquer sont tous les deux dans la page index.html.
D'après ton explication, il me faudrait donc deux page .html (la deuxième contenant la div à rafraichir) et dans l'index.html je ferais appel à cette deuxième page $('#load_donnees').load('DivARafraichir.html').fadeIn("slow"); ?

Y a t'il une possibilité de tout mettre sur la même page .html ?
26/03/2014, 21h46
Sylvercis

logiquement tu devrait avoir d'un coté ta page Index.html et de l'autre le contenu que tu veut y inserer.
Après ça dépends de ce que tu veut faire, tu peut très bien rester comme ça. Il faudrait alors charger index.html dans une div caché puis copier le contenu de son body vers ta div "load_données". ça me parait compliqué mais c'est ton choix.
26/03/2014, 22h10
thuglife
Ok, j'ai suivi ton conseil et est inséré mes Div dans un autre fichier html.
Maintenant j'ai le problème suivant, j'ai 2 div dans mon nouveau fichier "div.html" comme ceci :
Code:

1 2 3 4 <body> <div id="UTC">Instructions1</div> <div id="ETEHIVER">Instructions2</div> </body>
Dans mon index.html :
Code:

1 2 3 var auto_refresh = setInterval(function (){ $('#UTC').load('div.html').fadeIn("slow"); }, 1000); // rafraichis toutes les 1000 millisecondes
Code:

1 2 3 <body> <div id="UTC"></div> </body>
Le problème est que ceci affiche sous explorateur quelconque à la fois la div UTC et la div ETEHIVER alors que je n'appel pas la deuxième ETEHIVER ?
27/03/2014, 07h22
Sylvercis

Code:

$('#UTC').load('div.html').fadeIn("slow");

dans "#UTC", tu place tout le fichier "div.html" et tu affiche "#UTC" avec un fadeIn

Donc si tu as 2 div dans ton fichier c'est normale qu'elles s'affichent.

Ton fichier "div.html" ne doit contenir que:

Code:

Instructions1

pas de code HTML supplémentaire.
Enfin si... le code HTML contenu dans Instructions1 si ce n'est pas constitué que de texte.
27/03/2014, 12h23
thuglife

je n'ai pas la possibilité d'avoir un fichier div.HTML conteant plein de <div> avec des ID différents et les charger dans l'index.HTML indépendamment les une des autres ? (si j'ai 50 instructions, je suis obligé de faire 50 fichier div1.html, div2.html ... ?)

Effectivement tu peut faire ça, je vient de verifier sur la doc Jquery

https://api.jquery.com/load/

ton code

Code:

1
2
3
var auto_refresh = setInterval(function (){
	$('#UTC').load('div.html').fadeIn("slow");
}, 1000); // rafraichis toutes les 1000 millisecondes

la modif

Code:

1
2
3
var auto_refresh = setInterval(function (){
	$('#UTC').load('div.html #UTC').fadeIn("slow");
}, 1000); // rafraichis toutes les 1000 millisecondes

05/04/2014, 10h36
thuglife

impeccable merci beaucoup pour ton aide