Rafraichissement de page

**googlemania** · 05/08/2010, 17h50

Bonjour,

Je viens de créer un petit script en JS. Le voici :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<script>	
 
	function hello(e)
	{
 
			e = e || window.event;
			var el = e.target || e.srcElement;
			if(el.nodeType==3)el=el.parentNode
			if(el.id=="PC1"){
			var processeur = "Intel Core i3 530";
			var carte_mere = "Asustek P7F7-E WS Supercomputer";
			var memoire = "DDR3 1066 MhZ";
			var carte_graphique = "NVidia Geforce GTX 460GS";
 
			var disque_dur = "Western Digital Green 1 To";
			var carte_audio = "Son High Definition 7.1";
			var carte_reseau = "Reseau 10/100/1000 Mbps";
			var peripherique = "souris + clavier";
			var ecran = "Philips 221T1SB";
 
			document.write('<img id="PC1" id="PC1" src="DJCE.png" onclick="hello();"/>');
			document.write("<h1>Description de l'ordinateur</h1>" );
			document.write('<p>Processeur : ' + processeur + '</p>');
			document.write('<p>Carte Mère : ' + carte_mere + '</p>');			
			document.write('<p>Mémoire : ' + memoire + '</p>');
			document.write('<p>Carte graphique : ' + carte_graphique + '</p>');			
			document.write('<p>Disque dur : ' + disque_dur + '</p>');
			document.write('<p>Carte audio : ' + carte_audio + '</p>');			
			document.write('<p>Carte réseau : ' + carte_reseau + '</p>');
			document.write('<p>Périphérique : ' + peripherique + '</p>');
			document.write('<p>Ecran : ' + ecran + '</p>');
			}
 
		}
 
 
 
		//--></script>
 
 
			<img id="PC1" id="PC1" src="DJCE.png" onclick="hello();"/>
	</body>

tout marche niquel mais est il possible de juste rafraichir les données passés en variable parceque si je suis à chaque fois obligé de rappeler la page entière... on est pas sorto

Merci

**Bovino** · 05/08/2010, 20h19

Tu ne recharges pas la page, tu la recrées, c'est pas tout à fait pareil.
C'est dû à l'utilisation de l'immonde document.write().

Lorsqu'un script se trouve dans le corps de la page et que cette instruction est appelée, cela ajoute son (ou ses) paramètre(s) au contenu de celle-ci, car le document est dans un état dit ouvert (en cours de création), en revanche, dans ton cas, le write est bien dans le corps de la page, mais à l'intérieur d'une fonction, qui sera appelée après que la page ait fini de se charger, c'est-à-dire quand le document sera dans un état fermé. Dans ce cas, write efface le document, en recrée un et insère ce contenu dans le nouveau document, l'ancien étant définitivement perdu.

Utilises plutôt une balise div vide dans laquelle tu insèrera le contenu généré.

**googlemania** · 05/08/2010, 22h39

Ok merci pour l'info mais serait il possible d'être un peu plus clair au niveau de mon code, je ne vois pas comment aborder ça.

Enlever les "document.write" ? Pour mettre quoi à la place ?

Bref je ne vois pas trop comment aborder la chose

Merci bien !

**RomainVALERI** · 06/08/2010, 08h51

Envoyé par googlemania

Ok merci pour l'info mais serait il possible d'être un peu plus clair au niveau de mon code, je ne vois pas comment aborder ça.

Enlever les "document.write" ? Pour mettre quoi à la place ?

Bref je ne vois pas trop comment aborder la chose

Merci bien !

Un exemple vite fait en utilisant le DOM de la page :

Code javascript :

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

1
2
3
var elemP = document.createElement("P");
elemP.appendChild(document.createTextNode("Carte Mère : " + carte_mere));
document.getElementById("idDeLElementParentAuquelTuVeuxGrefferCeParagraphe").appendChild(elemP);

**googlemania** · 06/08/2010, 09h36

Impeccable.

Merci grâce à toi je viens de toucher à de l'AJAX

Encore une petite question :

Comment insérer des balises HTML dans ton code ? A la Javascript, cela ne fonctionne pas ! :/

**RomainVALERI** · 06/08/2010, 10h18

Envoyé par googlemania

Comment insérer des balises HTML dans ton code ? A la Javascript, cela ne fonctionne pas ! :/

Créer des balises dans le code JS pour les intégrer a ta page HTML ? (ou j'ai pas compris... ?

) Eh ben c'est l'exemple que je te donnais ci-dessus ^^

**googlemania** · 06/08/2010, 12h04

Après mdoif, voici mon code

:

JS :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
var elemP = document.createElement("P");
 
			elemP.appendChild(document.createTextNode('Processeur : ' + processeur));
			elemP.appendChild(document.createTextNode('Carte Mère : ' + carte_mere));
			elemP.appendChild(document.createTextNode('Mémoire : ' + memoire));
			elemP.appendChild(document.createTextNode('Carte graphique : ' + carte_graphique));
			elemP.appendChild(document.createTextNode('Disque dur : ' + disque_dur));
			elemP.appendChild(document.createTextNode('Carte audio : ' + carte_audio));
			elemP.appendChild(document.createTextNode('Carte réseau : ' + carte_reseau));
			elemP.appendChild(document.createTextNode('Périphérique : ' + peripherique));
			elemP.appendChild(document.createTextNode('Ecran : ' + ecran));
 
			document.getElementById("divtest").appendChild(elemP);

HTML :

Code :

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

1
2
3
4
5
<img id="PC1" id="PC1" src="DJCE.png" onclick="hello();"/>
			<h1>Description de l'ordinateur</h1>
			<div id="divtest">
 
			</div>

Mais tout est sur une ligne, je souhaiterai mettre chaque ligne dans une balise <p> afin de faire de joli paragraphe

**RomainVALERI** · 06/08/2010, 13h24

Fais toi une fonction ^^

Code javascript :

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

1
2
3
function ajouter_paragraphe(parent, texte){
	return parent.appendChild(document.createElement("P").createTextNode(texte));
}

et appelle la comme ça :

Code javascript :

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

1
2
3
var div = document.getElementById("divtest");
ajouter_paragraphe(div, "Processeur : " + processeur);
ajouter_paragraphe(div, "Carte Mère : " + carte_mere);

enfin ce n'est qu'une piste... ^^

**googlemania** · 06/08/2010, 14h39

Merci pour l'info, mais je ne vais pas faire de fonction ! Cependant mon probleme persiste toujours. Voici mon code :

JS

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
function hello(e)
	{
 
			e = e || window.event;
			var el = e.target || e.srcElement;
			if(el.nodeType==3)el=el.parentNode
			if(el.id=="PC1"){
 
			var processeur = "Intel Core i3 530";
			var carte_mere = "Asustek P7F7-E WS Supercomputer";
			var memoire = "DDR3 1066 MhZ";
			var carte_graphique = "NVidia Geforce GTX 460GS";
			var disque_dur = "Western Digital Green 1 To";
			var carte_audio = "Son High Definition 7.1";
			var carte_reseau = "Reseau 10/100/1000 Mbps";
			var peripherique = "souris + clavier";
			var ecran = "Philips 221T1SB";
 
			var elemP = document.createElement("P");
 
 
			elemP.appendChild(document.createTextNode("Processeur : " + processeur));
			elemP.appendChild(document.createTextNode("Carte Mère : " + carte_mere));
			elemP.appendChild(document.createTextNode("Mémoire : " + memoire));
			elemP.appendChild(document.createTextNode("Carte graphique : " + carte_graphique));
			elemP.appendChild(document.createTextNode("Disque dur : " + disque_dur));
			elemP.appendChild(document.createTextNode("Carte audio : " + carte_audio));
			elemP.appendChild(document.createTextNode("Carte réseau : " + carte_reseau));
			elemP.appendChild(document.createTextNode("Périphérique : " + peripherique));
			elemP.appendChild(document.createTextNode("Ecran : " + ecran));
 
			document.getElementById("divtest").appendChild(elemP);
 
			}
 
		}

HTML

Code :

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

1
2
3
4
5
 
<img id="PC1" id="PC1" src="DJCE.png" onclick="hello();"/>
<h1>Description de l'ordinateur</h1>
<div id="divtest">
</div>

Voici le rendu :

Le problème est que la balise <p> n'est pas prise en compte ! Pas de retour à la ligne !

Une idée :/

Merci

**Bovino** · 06/08/2010, 14h58

Si, ta balise p est prise en compte, seulement, vu que tu insères tous tes textes dans cette balise, il n'y a aucune raison qu'il y ai des retours à la ligne, c'est donc pour ça que Romain te proposais de créer autant de balises p que de textes à afficher

Sinon, tu peux aussi insérer entre chaque ligne :

Code :

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

elemP.appendChild(document.createElement('br'));

mais du coup, sémantiquement, ça devient bancal...

**googlemania** · 06/08/2010, 15h10

Oh tiens ! ca marche

Merci à tous !

**RomainVALERI** · 06/08/2010, 15h33

Envoyé par googlemania

Oh tiens ! ca marche

Merci à tous !

c'est tombé en marche...

Nous v'la beaux !

Rafraichissement de page

JavaScript

Discussions similaires

Partager

Partager