Mise à jour du CSS par Ajax

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:

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:

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:

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:

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:

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