Rafraishissement partiel

**Alkhan** · 19/08/2013, 12h21

bonjour,
je suis donc toujours débutant et j'ai le problème suivant :

j'ai utilisé un template dans lequel j'ai trois parties :
- une entête : une barre de bouton
- une barre d'action a gauche
- un contenu central (avec par défaut une page d’accueil)

le contenu est chargé de la façon suivante :

Code :

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

1
2
3
4
5
6
 
		<ui:define name="content">
			<p:layoutUnit id="AppView" position="center" styleClass="test">
				<ui:include src="#{sidePview.includedPage}" />
			</p:layoutUnit>
		</ui:define>

donc dans la barre d'action j'ai :

Code :

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

1
2
3
4
5
6
 
<p:commandLink id="appUser" update=":AppView"
					actionListener="#{sidePview.sideBarAction}"
					style="margin-right:20px;" value="#{msgs['menu.user.lbl']}">
					<f:param id="userParamId" name="pageViewId" value="user" />
				</p:commandLink>

ce qui m'ouvre m'a page dans le conteneur central.

Le code qui affiche la liste :

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
 
	<h:form>
		<h:panelGrid columns="2" >
		<h:inputText value="#{user.searchTxt}" >
		</h:inputText>
 		<p:selectOneListbox id="userList" value="#{user.selUser}" var="u" style="height:200px" onchange="submit();" converter="#{userConverter}"> 
           	<f:selectItems value="#{user.usersLst}"/>
			<p:column>
				#{u.username}
			</p:column>
        </p:selectOneListbox> 
    	</h:panelGrid>
		<h:panelGrid columns="2" >
       <h:outputText value="#{msgs['user.lbl.name']} : " />
         <h:outputText value="#{user.selUser.username}" />  
    	</h:panelGrid>
	</h:form>

La zone de texte permet de saisir du texte pour filtrer le contenu de la listBox.
Lorsque je test la page seule cela semble fonctionner (il rafraichie que la liste), mais lorsque je l'utilise en tant que que contenu de ma page principale, toute la page est rafraichie et pas uniquement la liste.
tout cela a pour effet de me ramener sur la page d'accueil

Je ne comprend pas ce qu'il se passe quelqu'un aurait il une idée ?

merci d'avance

**cryo94** · 20/08/2013, 10h22

J'ai l'impression que c'est du à une absence de spécification sur l'élément à recharger.

Peut tu publier l'intégralité des pages / template?

**Alkhan** · 20/08/2013, 13h36

Avant tout, merci de t'intéresser a mon cas

j'ai donc :
layout.xhtml :

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
 
<?xml version="1.0" encoding="UTF-8"?>
<!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"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="./css/default.css" rel="stylesheet" type="text/css" />
<link href="./css/cssLayout.css" rel="stylesheet" type="text/css" />
<title>Template</title>
</head>
<body>
	<!--h:outputStylesheet library="default" name="css/desktop.css" /-->
	<div id="outerWrapper">
		<div id="header">
			<ui:insert name="header" />
		</div>
		<div id="contentWrapper">
			<div id="leftColumn">
				<ui:insert name="leftColumn" />
			</div>
			<div id="content">
				<ui:insert name="content" />
			</div>
			<br />
		</div>
	</div>
</body>
</html>

desktop.xhtml :

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
 
<?xml version='1.0' encoding='UTF-8' ?>
<!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"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui">
<body>
	<ui:composition template="/WEB-INF/account/layout.xhtml">
		<ui:define name="header">
			<ui:include src="/WEB-INF/account/header.xhtml" />
		</ui:define>
		<ui:define name="leftColumn">
			<ui:include src="/WEB-INF/account/sideBar.xhtml" />
		</ui:define>
		<ui:define name="content">
			<p:layoutUnit id="AppView" position="center" styleClass="test">
				<ui:include src="#{sidePview.includedPage}" />
			</p:layoutUnit>
		</ui:define>
	</ui:composition>
</body>

la sideBar :

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
 
<?xml version='1.0' encoding='UTF-8' ?>
<!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"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui">
<body>
	<f:loadBundle basename ="resources.desktop" var ="msgs"/>
	<h:form id="sideBarId">
		<p:accordionPanel>
			<p:tab title="Configuration">
				<p:commandLink id="appUser" update=":AppView"
					actionListener="#{sidePview.sideBarAction}"
					style="margin-right:20px;" value="#{msgs['menu.user.lbl']}">
					<f:param id="userParamId" name="pageViewId" value="user" />
				</p:commandLink>
			</p:tab>
		</p:accordionPanel>
	</h:form>
</body>
</html>

et pour la page inclut (user.xhtml) :

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
 
<?xml version="1.0" encoding="UTF-8"?>
<!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"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<f:loadBundle basename="resources.user" var="msgs" />
</h:head>
<h:body>
	<h:outputStylesheet library="default" name="css/monStyle.css" />
	<h2>#{msgs['user.title']}</h2>
	<h:form>
		<h:panelGrid columns="2" >
		<h:inputText value="#{user.searchTxt}" >
			<f:ajax render="@form userList"/>
		</h:inputText>
 		<p:selectOneListbox id="userList" value="#{user.selUser}" var="u" style="height:200px" onchange="submit();" converter="#{userConverter}"> 
           	<f:selectItems value="#{user.usersLst}"/>
			<p:column>
				#{u.username}
			</p:column>
        </p:selectOneListbox> 
    	</h:panelGrid>
	</h:form>
	<h:form>
	     <h:panelGrid columns="2" >
		<h:outputText value="#{msgs['user.lbl.name']} : " />
		<p:inplace id="basic">  
        	    <p:inputText value="#{user.selUser.nom}"/>  
                </p:inplace>
    	     </h:panelGrid>
        </h:form>
 
</h:body>
</html>

j'avoue ne pas voir d'ou vient le problème, bon je suis aussi débutant dans le domaine

de plus j'ajouterais une petite chose j'ai remarqué lors de tests sur la page seule, qu'il y avait un rafraichissement complet aussi mais pas a chaque fois !!!

je pense que j'ai raté quelque chose mais je ne sais pas quoi.

**cryo94** · 20/08/2013, 17h36

Effectivement avec toutes les pages c'est plus simple

Tout d'abord il faut que tu donne un Id à ton formulaire... pas obligatoire mais te permet de mieux le cibler
<h:form id="myForm">

Ensuite tu peux remplacer
<f:ajax render="@form userList"/>
par
<p:ajax event="keydown" update="userList" />
Ce qui te permet de spécifier l'evenement sur lequel déclancher l'update.

Essaye et dis nous ce qu'il en est.

PS : Regarde aussi ce composant http://primefaces.org/showcase/ui/selectOneMenu.jsf et particulièrement le "Content with filter". Je me demande si ca pourrait pas faire ton bonheur

**Alkhan** · 20/08/2013, 18h04

Envoyé par cryo94

Tout d'abord il faut que tu donne un Id à ton formulaire... pas obligatoire mais te permet de mieux le cibler
<h:form id="myForm">

Ça c’était fait entre temps

Envoyé par cryo94

Ensuite tu peux remplacer
<f:ajax render="@form userList"/>
par
<p:ajax event="keydown" update="userList" />
Ce qui te permet de spécifier l'evenement sur lequel déclancher l'update.

J'avais déjà essayer, mais aucun résultat concluant. Dans le doute je l'ai refais, mais ça ne change rien

Envoyé par cryo94

PS : Regarde aussi ce composant http://primefaces.org/showcase/ui/selectOneMenu.jsf et particulièrement le "Content with filter". Je me demande si ca pourrait pas faire ton bonheur

Oui je l'ai vu mais, je souhaite utiliser une liste et pas un menu déroulant car potentiellement le résultat de la recherche peut être important et le menu serait un peut léger.

**cryo94** · 20/08/2013, 18h07

Je vais essayer de me mettre un environnement en place d'ici demain soir afin de reproduire ton problème.

Peux tu me donner la version de JSF / Primeface que tu utilise (et ton face-config.xml si il est un peu custum) ?

Rafraishissement partiel

JSF Java

Vue hybride

Discussions similaires

Partager

Partager