charger page avec ajax

**ulysse031** · 10/05/2011, 11h06

Bonjour,
j'ai une page web composée de plusieurs divisions <div>
je souhaite a partir d'un lien d'une des divison , mettre a jours une autre division sans recharger toute la page , je sais qu'il existe une solution en ajax , mais je sais pas laquelle , merci d'avance de bien vouloir m'aider.
Cordialement

**DevServlet** · 10/05/2011, 12h23

Peux tu spécifier ton contexte technique ? Par exemple utilise tu une techno RIA que tu couples à JSF (RichFaces, Myfaces, etc..) tout simplement parceque la plus part des actions te fournissent un mecanisme de rafraichissement auto d'un bloc de page.

**mesken** · 10/05/2011, 12h58

Comme l'a dit DevServlet, il est important de préciser la techno RIA avec laquelle tu travailles. Mais déjà avec JSF 2.0 qui intègre la balise <f:ajax tu peux le faire.
Maintenant pour expliquer avec un code exemple, il faut que tu donnes un peu le contexte et peut-être un bout de code. Et ce que tu veux exactement faire

**ulysse031** · 12/05/2011, 19h29

voila un exemple d'une page web ajax.jsp

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
<%@taglib uri="http://java.sun.com/jstl/xml_rt" prefix="x_rt"%><%@taglib
	uri="http://java.sun.com/jsf/core" prefix="f"%><%@taglib
	uri="http://java.sun.com/jsf/html" prefix="h"%><%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Mon super site</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link   rel="stylesheet"  media="screen"  title="Exemple"  type="text/css" href="1.css" />
 
</head>
<body>
 
<f:view>
<!-- L'en-tête -->
 
       <div id="en_tete">
 
       </div>
 
       <!-- Les menus -->
 
       <div id="menu">        
           <div class="element_menu">
               <h3>Titre menu</h3>
               <ul>
 
 
                   <li><a href="page1.html">Lien</a></li>
                   <li><a href="page2.html">Lien</a></li>
                   <li><a href="page3.html">Lien</a></li>
               </ul>
           </div>
 
           <div class="element_menu">
               <h3>Titre menu</h3>
               <ul>
                   <li><a href="page4.html">Lien</a></li>
                   <li><a href="page5.html">Lien</a></li>
                   <li><a href="page6.html">Lien</a></li>
               </ul>
           </div>        
       </div>
 
       <!-- Le corps -->
 
       <div id="corps">
           <h1>Mon super site</h1>
 
           <p>
               Bienvenue sur mon super site !<br />
               Vous allez adorer ici, c'est un site génial qui va parler de... heu... Je cherche encore un peu le thème de mon site :-D
           </p>
 
           <h2>A qui s'adresse ce site ?</h2>    
           <p>
               A tout le monde ! Si je commence à privilégier certaines personnes, on va m'accuser de discrimination ;o)<br />
               Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken, ce site est fait pour vous ! Si si !
           </p>
 
           <h2>L'auteur</h2>    
           <p>
               L'auteur du site ? Bah, c'est moi, quelle question :-p<br />
               Je vais essayer de faire le meilleur site du monde (ça doit pas être bien compliqué). Mon objectif est d'attirer un maximum de visiteurs, de les rendre accros à mon site, puis de les mettre en mon pouvoir.<br />
               Je prendrai ensuite le contrôle du Monde. Une fois que ce sera fait, j'irai explorer les confins de l'Univers à la recherche de nouveaux peuples à soumettre à ma terrible puissance. MooUUuUuuUAhahHaaAhAAaaah !!! (rire diabolique).
           </p>
       </div>
 
       <!-- Le pied de page -->
 
       <div id="pied_de_page">
           <p>Copyright "Tout pourri Corporation" 2005, tous droits réservés</p>
       </div>
 
 
 
</f:view>
</body>
</html>

je veux si je click sur un lien d'un menu <li><a href="page1.html">Lien</a></li>
que la partie du 
qui change pas la page completement dans charger par exemple un autre text ou bien des calcule et rester toujour sur mem page ajax.jsp

et le fichier 1.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
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
 
body
{
   width: 760px;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;    
   background-image: url("image/1.jpg");
}
 
/* L'en-tête */
 
#en_tete
{
   width: 760px;
   height: 100px;
   background-image: url("image/fr.gif");
   background-repeat: no-repeat;
   margin-bottom: 10px;
}
 
 
/* Le menu */
 
#menu
{
   float: left;
   width: 120px;
}
 
.element_menu
{
   background-color: #626262;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
 
   border: 2px solid black;
 
   margin-bottom: 20px;
}
 
 
/* Quelques effets sur les menus */
 
 
.element_menu h3
{    
   color: #B3B3B3;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
}
 
.element_menu ul
{
   list-style-image: url("images/puce.png");
   padding: 0px;
   padding-left: 20px;
   margin: 0px;
   margin-bottom: 5px;
}
 
.element_menu a
{
   color: #B3B3B3;
}
 
.element_menu a:hover
{
   background-color: #B3B3B3;
   color: black;
}
 
 
/* Le corps de la page */
 
#corps
{
   margin-left: 140px;
   margin-bottom: 20px;
   padding: 5px;
 
   color: #B3B3B3;
   background-color: #626262;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
 
   border: 2px solid black;
}
 
#corps h1
{
   color: #B3B3B3;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}
 
#corps h2
{
   height: 30px;
 
   background-image: url("images/titre.png");
   background-repeat: no-repeat;
 
   padding-left: 30px;
   color: #B3B3B3;
   text-align: left;
}
 
 
/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */
 
#pied_de_page
{
   padding: 5px;
   clear: both;
 
   text-align: center;
 
   color: #B3B3B3;
   background-color: #626262;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
 
   border: 2px solid black;
}

**zapbuzz** · 12/05/2011, 20h39

Tu peux aller regarder du coté de JQuery : jquery.com

Avec un super tuto ici par rapport à ton besoin : http://api.jquery.com/html/

---------------

http://www.zap-buzz.com - le programme télé TNT du soir classé par rapport à l'intérêt des internautes.

**ulysse031** · 13/05/2011, 00h14

bonsoir merci pour le lien mais je n'arrive pas à résoudre pb car je n'ai pas comrpis bien et comment integré dans ma page

charger page avec ajax

JSF Java

Vue hybride

Discussions similaires

Partager

Partager