Mise à jour du CSS par Ajax

**paladice** · 15/12/2017, 15h57

Bonjour,

est-il possible de charger une feuille de styles CSS dynamiquement grâce à Ajax lorsque l'on utilise JSF ?

J'ai le template suivant :

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
 
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
 
<f:view />
<h:head>
 
</h:head>
 
<h:body>
	<f:facet name="last">
		<h:outputStylesheet name="/ressources/css/default.css" />
	</f:facet>
 
	<!-- Bandeau -->
	<p:layout fullPage="true">
		<p:layoutUnit position="north" style="height: 50px;">
			<h:form id="menuForm">
				<div id="bandeau">
					<div id="menu" class="bandeauElement">
						<p:commandLink action="#{myBean.allerVersDeuxiemePage}">
							<i class="fa fa-arrow-left" style="color: white" />
							<f:ajax render="content cssContent contentForm" />
						</p:commandLink>
					</div>
				</div>
			</h:form>
		</p:layoutUnit>
		<p:layoutUnit position="center">
			<h:form id="contentForm">
				<ui:insert name="content">                                                      
					<ui:include src="#{facePainter.mainContent}" />                        
				</ui:insert>  
			</h:form>
 
			<ui:insert name="cssContent"> 
				<h:outputStylesheet library="css" name="#{facePainter.cssContent}"  />                     
			</ui:insert>  			
 
		</p:layoutUnit>
	</p:layout>
</h:body>
</html>

J'ai également le FacePainter suivant :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
@ManagedBean(name="facePainter")
@SessionScoped
public class FacePainter {
 
    private String mainContent = "ressources/fragments/premierePage.xhtml";
 
    private String cssContent = "ressources/css/default.css";
 
    //getters/setters
 
}

et le bean pour ma page

Code :

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

1
2
3
4
5
 
public void allerVersDeuxiemePage() {
	facePainter.setMainContent("ressources/fragments/deuxiemePage.xhtml");
	facePainter.setCssContent("ressources/css/deuxiemePage.css");
}

Le changement de page par Ajax semble se faire. Cependant, lorsque je regarde les sources, je n'ai pas le style "deuxiemePage.css". J'ai un <link type="text/css" rel="stylesheet" href="RES_NOT_FOUND" /> à la place.

Quelqu'un a une idée pour m'aider ? Merci d'avance

**paladice** · 19/12/2017, 10h30

Bonjour, je met à jour ma question parce que je n'arrive pas à reproduire mon problème, par contre j'en ai un autre toujours lié au sujet en question.

Je suis passé à l'utilisation du <ui:insert>. Cela semble presque fonctionner mais je me heurte à un problème qui, je l'espère, sera le dernier avant de pouvoir me lancer vraiment dans mon développement.

J'ai le code suivant :

Mon TEMPLATE index.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
41
42
43
44
45
 
<h:html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
 
<f:view />
<h:head>
	<f:facet name="first">
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="viewport"
			content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		<meta name="mobile-web-app-capable" content="yes" />
	</f:facet>
 
	<h:outputScript name="/ressources/js/primeFacesLocales.js" />
 
	<title>
		<ui:insert name="pageTitle">
    		TEST
    	</ui:insert>
    </title>
 
	<link rel="manifest" href="manifest.json" />
 
	<ui:insert name="dynamicalCss" />
</h:head>
 
 
<h:body>
 
	<h:form id="contentForm">
		<p:growl id="growl" showDetail="true" autoUpdate="true"
			globalOnly="true" />
 
		<ui:insert name="dynamicalContent">
			<ui:include src="#{facePainter.mainContent}" />
		</ui:insert>
	</h:form>
 
</h:body>
 
</h:html>

Ma page1 et ma page 2.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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<h:html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui" >
 
<h:head></h:head>
<h:body>
	<ui:composition>
 
		<f:facet name="last">
			<h:outputStylesheet name="/ressources/css/default.css" />
			<h:outputStylesheet name="/ressources/css/page1.css" />
		</f:facet>
 
		<p>Thanks you for the information.</p>  
		<h:commandLink value="Aller vers page2" action="#{myBean.allerVersPage2}" id="btnPage2">               
			<f:ajax render="dynamicalContent dynamicalCss contentForm" />
		</h:commandLink>    
	</ui:composition>
</h:body>
</h:html>

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<h:html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui" >
 
<h:head></h:head>
<h:body>
	<ui:composition>
 
		<f:facet name="last">
			<h:outputStylesheet name="/ressources/css/default.css" />
			<h:outputStylesheet name="/ressources/css/page2.css" />
		</f:facet>
 
		<p>Thanks you for the information.</p>  
		<h:commandLink value="Aller vers page1" action="#{myBean.allerVersPage1}" id="btnPage1">               
			<f:ajax render="dynamicalContent dynamicalCss contentForm" />
		</h:commandLink>    
	</ui:composition>
</h:body>
</h:html>

Ma classe FacePainter.java :

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
 
@ManagedBean(name="facePainter")
@SessionScoped
public class FacePainter {
 
  // Page par défaut.
  private String mainContent = "ressources/fragments/pagesTests/page1.xhtml";
 
  public String getMainContent() {
    return mainContent;
  }
 
  public void setMainContent(String mainContent) {
    this.mainContent = mainContent;
  }
 
}

ET enfin, mon Bean :

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
 
@ManagedBean
@SessionScoped
public class MyBean implements Serializable {
 
  private static final long serialVersionUID = 7371178454776635733L;
 
  @ManagedProperty(value="#{facePainter}")
  public FacePainter facePainter;
 
  //...
 
  public void allerVersPage1() {
    facePainter.setMainContent("ressources/fragments/pagesTests/page1.xhtml");
  }
 
  public void allerVersPage2() {
    facePainter.setMainContent("ressources/fragments/page2.xhtml");
  }
 
  public FacePainter getFacePainter() {
    return facePainter;
  }
 
  public void setFacePainter(FacePainter facePainter) {
    this.facePainter = facePainter;
  }
}

On peut voir que j'ai un <ui:insert> dans le head du template qui devrait normalement se mettre à jour. Cependant, ce que je ne comprend pas, c'est que quand je clique sur le lien je change bien le contenu de mon body mais pas le head. Pas dynamiquement en tout cas, il faut que je fasse F5 pour que ce soit pris en compte.

Est-ce que quelqu'un peut m'aider là-dessus ? Merci d'avance

Mise à jour du CSS par Ajax

JSF Java

Vue hybride

Discussions similaires

Partager

Partager