[Débutant] "Rafraîchir" une <div> ?

**the_pit** · 25/07/2006, 23h36

Bonjour à tous,

Je tripatouille le html et le php depuis bientot 5 semaines, et je suis dans une impasse technique :
j'ai une page html/php contenant plusieurs div, dont une avec un include d'un menu en flash, et je voudrais qu'une autre balise div soit réactualisée avec un fichier html/php, suivant le click dans le menu.

Ceci pour éviter de recharger le menu, qui pèse quand même son poids.

J'ai entendu parler d'Ajax, mais ne connaissant rien au javascript et autres joyeusetés de cette technique, je ne sais pas si cette solution est adaptée (les exemples et tutos lus, dont ceux de ce site, me semblent très complexes par rapport au problème)

Quelle est selon vous la solution la plus simple ?

Je n'ai pas mis de code car je pense que c'est plus un problème de conception, mais n'hésitez pas à me demander.

Merci d'avance,
the_pit

**hazardous_material** · 26/07/2006, 00h10

Tu peux faire ça avec le CSS et un peu de javascript, tu va voir c'est simple :

Dans le CSS :

Code :

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

1
2
3
4
5
6
7
8
div.menuON {
attribut1 : ...;
attribut2 : ...;
}
 
div.menuOFF {
visibility : hidden;
}

Dans l'en-tête de ta page HTML (balise <head>...</head>):

Code :

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

1
2
3
4
5
6
7
8
9
10
<script language="javascript">
function menu(val) {
	if (val=='show')
	{
	y = document.getElementById('menu').className='menuON';
	} else {
	y = document.getElementById('menu').className='menuOFF';
	}
	}
</script>

Et dans ta page HTML :

Code :

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

1
2
3
4
<div id="menu" class="menuOFF">
	<a onclick="menu('show')">Menu</a>
	<a onclick="menu('hide')">Fermer</a>
</div>

Voilà, avec cette méthode, tu aura un menu qui peut s'ouvrir et se fermer. Là les boutons seront affiché de base, mais il y a moyen de changer cela avec le css également, en définissant des classes par exemple :

Reprenons le code de la page HTML

Code :

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

1
2
3
4
5
6
<div id="menu" class="menuOFF">
	<a class="OFF" classonclick="menu('show')">Menu</a>
	<div class="ON">
		<a onclick="menu('hide')">Fermer</a>
	</div>
</div>

Dans ton CSS :

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
div.menuOFF .OFF{
visibility : visible;
}
 
div.menuOFF .ON{
visibility : hidden;
}
 
div.menuON .OFF{
visibility : hidden;
}
 
div.menuON .ON{
visibility : visible;
}

Voilà, j'espère que c'est ce que tu demandais, et que tu comprendra ma réponse. ^^'

Bonne chance !

**Kerod** · 26/07/2006, 00h11

Ben si c'est juste la page (déjà existante) il suffit d'utiliser le innerHTML de ton div...Mais si tu veux plus de détails fais une recherche approfondi sur le forum. Javascript..En effet, cette question a déjà été traité plusieurs fois

**the_pit** · 26/07/2006, 11h09

Bonjour,

Merci pour vos réponses, elles m'ouvrent d'autres pistes.

hazardous_material, le menu est en place et ne doit pas être caché, j'essaye de rafraichir la zone sous le menu, en fonction du lien cliqué.

Kerod, la prop innerHtml permet-elle d'afficher autre chose qu'une chaine de caractères, par exemple l'ouverture de l'url d'un fichier ?

Je vais certainement ouvrir un thread dans le forum javascript, vu mon niveau de compétence

**Kerod** · 26/07/2006, 11h18

Oui il me semble qu'un sujet portant le nom de "Charger une page dans un div" avait été traité il y a un mois de ca dans le forum Javascript

**the_pit** · 27/07/2006, 16h56

Bonjour,

Après pas mal de fouilles, j'ai trouvé une classe js du nom de XHRconnection qui permet de "charger le contenu d'un fichier dans une zone de la page" (zone définie par une <div>), soit exactement ce que je voulais faire.

http://xhrconnection.sutekidane.net/...ne-de-la-page/

Par une petite modif du script de chargement du fichier, on peut passer en paramètre le fichier à charger depuis un lien, donc depuis un menu flash, et le tour est joué

Faut il déplacer ce thread dans le forum js ?
Je mets le tag résolu, en tout cas

Merci pour votre aide

[Débutant] "Rafraîchir" une <div> ?

JavaScript

Discussions similaires

Partager

Partager