Rafraichissement données Div

**thuglife** · 26/03/2014, 14h07

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**Sylvercis** · 26/03/2014, 18h21

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" ?

**thuglife** · 26/03/2014, 20h28

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 ?

**Sylvercis** · 26/03/2014, 21h46

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.

**thuglife** · 26/03/2014, 22h10

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<body>
	<div id="UTC">Instructions1</div>
	<div id="ETEHIVER">Instructions2</div>
</body>

Dans mon index.html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**Sylvercis** · 27/03/2014, 07h22

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#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 :

Sélectionner tout - Visualiser dans une fenêtre à part

Instructions1

pas de code HTML supplémentaire.
Enfin si... le code HTML contenu dans Instructions1 si ce n'est pas constitué que de texte.

**thuglife** · 27/03/2014, 12h23

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

**Sylvercis** · 27/03/2014, 18h45

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

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

ton code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

la modif

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**thuglife** · 05/04/2014, 10h36

impeccable merci beaucoup pour ton aide

Rafraichissement données Div

jQuery

Discussions similaires

Partager

Partager