Rafraichissement de page

Version imprimable

Bonjour,

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

Code:

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

Merci

05/08/2010, 20h19
Bovino

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é.
05/08/2010, 22h39
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 !

Citation:

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:

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

06/08/2010, 09h36
googlemania

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 ! :/
06/08/2010, 10h18
RomainVALERI

Citation:

Envoyé par googlemania

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

:koi: 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 ^^

Après mdoif, voici mon code :) :

JS :

Code:

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:

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 ;)

Fais toi une fonction ^^

Code:

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

et appelle la comme ça :

Code:

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... ^^

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

JS

Code:

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:

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 :

http://img807.imageshack.us/img807/8903/ordi.png

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

Une idée :/

Merci :D

06/08/2010, 14h58
Bovino

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:

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

mais du coup, sémantiquement, ça devient bancal...
06/08/2010, 15h10
googlemania

Oh tiens ! ca marche :)

Merci à tous !
06/08/2010, 15h33
RomainVALERI

Citation:

Envoyé par googlemania

Oh tiens ! ca marche :)

Merci à tous !

:arf:
c'est tombé en marche...

Nous v'la beaux ! :aie: