Ne pas recharger page

**hugo7** · 04/02/2011, 17h46

Bonjour j'ai 3 div et 3 boutons, chaque clic sur un bouton affiche le div correspondant, c'est dire le bouton 1 affiche le div1 , le bouton 2 le div 2 et le bouton 3 le div 3.
Je voudrais le faire mais sans que la page se recharge à chaque fois
D'avance merci

**Nicolas Esprit** · 04/02/2011, 19h04

Bonjour,

Une fonction javascript de base fera l'affaire. Tu fais un appel à cette méthode via l'event click côté client de tes boutons. Et tu passes en paramètre le nom de la div à cache/afficher. Après tu joues sur la visibilité de l'élement div.

Une simple recherche google tous les exemples dont tu as besoin.

En espérant t'avoir aidé.

**hugo7** · 05/02/2011, 12h27

Merci pour la réponse mais je n'ai pas trouvé ce que je cherchais...

**papouuu** · 07/02/2011, 11h02

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<script language="javascript" type="text/javascript">
function show(id) {
 
		document.getElementById(id).style.display = "block" // fonction qui affiche un élément par son id
}
 
//fonction qui permet de cacher un élément par son id
function hide(id) {
 
	document.getElementById(id).style.display = "none";
}
</script>

Tu appelle la fonction hide(id) sur le onload de ton body avec en paramêtre l'id de ta div à cacher

puis sur le onclick de ton bouton tu appelle la fonction show(id) avec toujours en paramêtre l'id de la div que tu veux afficher.

**hugo7** · 07/02/2011, 19h00

Merci pour la réponse mais je n'ai pas de onload pour mon body
j'ai load , unload et preload
et pareil pour les boutons j'ai juste click.
D'avance merci.

**papouuu** · 08/02/2011, 08h52

Bien sûr que tu as un onload et onclick. entre les directement dans tes balises même si l'intellisens ne te les propose pas et teste

[EDIT] (essayes avec onClientclick)

**hugo7** · 08/02/2011, 16h19

Bonjour j'ai essayer le onLoad pour mon body
Code vb.net

Code :

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

1
2
3
  Protected Sub body_OnLoad(ByVal sender As Object, ByVal e As System.EventArgs) Handles body.OnLoad
 
    End Sub

Code asp.net

Code :

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

<body id="body" runat="server">

Mais j'ai cette erreur :

'System.Web.UI.Control.Protected Friend Overridable Sub OnLoad(e As System.EventArgs)' n'est pas accessible dans ce contexte, car il est 'Protected Friend'.

Deuxiement je ne sais pas appeler la fonction , show par exemple dans le code vb.net ...

D'avance merci

**papouuu** · 08/02/2011, 16h28

Bon alors reprenons le début.
Tu as dis vouloir utiliser du Javascript uniquement donc dans ta balise <head> tu mets ton code JavaScript et dans le onload de ton body apelle la fonction que tu veux

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
[...]
<head>
<script language="javascript" type="text/javascript">
function show(id) {
 
		document.getElementById(id).style.display = "block" // fonction qui affiche un élément par son id
}
 
//fonction qui permet de cacher un élément par son id
function hide(id) {
 
	document.getElementById(id).style.display = "none";
}
</script>
 
 
[...]
 
</head>
 
<body onload="hide('idDeTaDiv')">
 
[...]
 
</body>

voila ce que tu dois avoir dans ta page. tu n'as pas besoin d'entrer dans le code behind

tu fais la même chose dans ton boutton avec

Code :

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

onClientClick="Show('idDeTaDiv')"

**hugo7** · 08/02/2011, 16h57

Merci pour la réponse mais je n'y arrive toujours pas , voila mon code asp.net

Code :

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

<body id="body" onload="hide ('divprincipal')" runat="server">

Code :

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

 <asp:ImageButton ID="accueil2" onClientClick="Show ('divsecondaire')" ImageUrl="~/images/accueil2vide.jpg" class="accueil2" runat="server" />

D'avance merci.

**jbrasselet** · 08/02/2011, 17h03

Peux-tu poster tout le code de ta page aspx ?
Quelle est ton erreur exacte ?

**hugo7** · 08/02/2011, 17h19

A oui j'ai oublié de mettre l'erreur , en faite c'est une erreur de compilation :

C:\Documents and Settings\Travail(hugo)\Mes documents\Visual Studio 2008\WebSites\site\accueil.aspx(22) : error BC30456: 'hide' n'est pas un membre de 'ASP.accueil_aspx'.

AddHandler __ctrl.Load, AddressOf Me.hide ('divsecondaire')

C:\Documents and Settings\Travail(hugo)\Mes documents\Visual Studio 2008\WebSites\site\accueil.aspx(22) : error BC30201: Expression attendue.

AddHandler __ctrl.Load, AddressOf Me.hide ('divsecondaire')

Il me souligne le Me.hide
et la première parenthèse de
Me.hide ('divsecondaire')

Et ma page asp.net

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
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="accueil.aspx.vb" Inherits="accueil" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Accueil</title>
    <link href="mozillafirefox.css" rel="stylesheet" type="text/css" />
    <script language="javascript" type="text/javascript">
function show(id) {
 
		document.getElementById(id).style.display = "block" // fonction qui affiche un élément par son id
}
 
//fonction qui permet de cacher un élément par son id
function hide(id) {
 
	document.getElementById(id).style.display = "none";
}
</script>
</head>
<body id="body" onload="hide ('divsecondaire')" runat="server">
  <form id="form1" runat="server">
    <div  runat="server" id="divprincipal">
      <asp:ImageButton ID="accueil2" onClientClick="show ('divsecondaire')" ImageUrl="~/images/accueil2vide.jpg" class="accueil2" runat="server" />
  </div>
  <div  runat="server" id="secondaire">
  </div>

**jbrasselet** · 08/02/2011, 17h36

Enlève le runat="server" sur ta balise body car tu utilises une balise HTML et non ASP.Net avec du javascript

**hugo7** · 08/02/2011, 18h19

Je n'ai plus d'erreur la page se charge mais quand je clic sur mon imagebutton rien ne se passe et la page se recharge ...

**Nicopilami** · 08/02/2011, 20h01

Hello

function show(id) {

document.getElementById(id).style.display = "block" // fonction qui affiche un élément par son id
}

Si tu veux du 'tout javascript', tu peux faire un truc comme ca:
dans le head

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
 
<script language="javascript">
var tabDiv=new Array();
tabDiv[tabDiv.length]="Div1";
tabDiv[tabDiv.length]="Div2";
tabDiv[tabDiv.length]="Div3";
 
function show(DivToShow)
{
    for(var dvID in tabDiv)
    {
        var Div=document.getElementById(tabDiv[dvID]);
        Div.style.display=(Div.id==DivToShow?'block':'none');
     }
}
</script>

et dans le body

Code :

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

1
2
3
4
5
6
7
8
 
<div style="display:none" id="Div1">blabla1</div>
<div style="display:none" id="Div2">blabla2</div>
<div style="display:none" id="Div3">blabla3</div>
 
<input type="button" value="show1" onclick="show('Div1')"/>
<input type="button" value="show2" onclick="show('Div2')"/>
<input type="button" value="show3" onclick="show('Div3')"/>

bye
Nico

**Nicopilami** · 08/02/2011, 20h33

Envoyé par hugo7

Je n'ai plus d'erreur la page se charge mais quand je clic sur mon imagebutton rien ne se passe et la page se recharge ...

normal, car l'evenement serveur se produit apres le OnClientClick
Pour eviter cela, tu dois interrompre cet evenement; Il faut alors rajouter un return false; Essaie ca:

Code :

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

      <asp:ImageButton ID="accueil2" onClientClick="show('divsecondaire');return false;" ImageUrl="~/images/accueil2vide.jpg" class="accueil2" runat="server" />

bye
Nico

**hugo7** · 10/02/2011, 18h02

Merci pour les réponse nico mais sa ne marche toujours pas ...
J'ai rajouter un return false mais rien ne change la page se recharge toujours et le div affiché en premier reste le même , il n'affiche pas l'autre .
J'ai essayer l'autre méthode mais quand je rajoute le style="display:none" au div il disparait et quand je rajoute value="show1" onclick="show('Div1')" à mon image button apres avoir enlever le runat=server toute la mise en page du div par n'importe comment et le div se retrouve à l'extrême droite de ma page

.
Que faire ...
D'avance merci

**Nicopilami** · 10/02/2011, 22h32

Envoyé par hugo7

Merci pour les réponse nico mais sa ne marche toujours pas ...
J'ai rajouter un return false mais rien ne change la page se recharge toujours et le div affiché en premier reste le même , il n'affiche pas l'autre .
J'ai essayer l'autre méthode mais quand je rajoute le style="display:none" au div il disparait et quand je rajoute value="show1" onclick="show('Div1')" à mon image button apres avoir enlever le runat=server toute la mise en page du div par n'importe comment et le div se retrouve à l'extrême droite de ma page

.
Que faire ...
D'avance merci

et question bête, pourquoi ne mettrais tu pas des

Code :

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

<span onclick="show('Divx')"><img...></span>

plutôt qu'un linkbutton ? au moins là pas de postback

**tortuegenie** · 11/02/2011, 11h41

Pourtant en rajoutant simplement un updatePanel ajax il me semble que le probleme serait résolu depuis longtemps

**hugo7** · 12/02/2011, 12h21

Merci sa marche

, juste un dernier petit truc comment faire pour par exemple que après 10 seconde que le premier div est chargé le 2eme s'affiche , qu'il y est simulation de clic sur le span?
D'avance merci

**jbrasselet** · 14/02/2011, 08h32

Tu dois pouvoir éventuellement utilisé un sap:timer et un asp:AsyncPostBackTrigger.

Ne pas recharger page

ASP.NET

Discussions similaires

Partager

Partager