Rafraîchir une page xhtml incluse dans une autre page

**johnlobs** · 24/01/2018, 19h49

Bonjour à tous !!

j'ai un petit soucis et malgré une longue recherche je n'abouti à aucun résultat intéressant.

Tout d’abord je souhaiterais signaler que cette discussion a été créée dans cette section car le javascript me semble être la solution la plus proche de ce que je veux,je reste cependant ouvert a toute éventuelle proposition.

Je m'explique:

Dans le cadre d'une application web (utilisant les techno jsf /spring/jpa....), toutes les pages incluent la Template principale qu'on appellera
"template.xhtml".

Cette page inclue elle même plusieurs pages dont la page qui m' interresse et qu'on appellera "notif.xhtml" et qui regroupe un ensemble de notification liées a l'utilisateur connecté bien sur.

Les autres pages de l'application incluent toutes la fameuse template.xhtml car elle contient le menu , les notifications et bien d'autres choses commune à toute les pages.

Mon soucis est de vouloir faire un rafraîchissement des notifications en temps réel,c'est à dire que lorsqu'une action est executée sur une page qui inclue la template, j'aimerais reloader uniquement les notifs et plus précisément notification.xhtml qui elle est incluse dans template.xhtml.

j’espère avoir été clair jusqu’à présent!

Au niveau du controlleur, j'utilise le code suivant pour recharger toute page mais c'est une solution qui ne me satisfait pas du tout car mes pages contiennent des filtres et plusieurs autres chose que je n'ai pas forcement envie de recharger et donc de perdre.

Voici le code que j'utilise à la fin de mon action pour injecter du js :

Code :

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

RequestContext.getCurrentInstance().execute("location.reload(true)");

Ceci recharge la page entière du serveur avec le "forceget" fixé à "true" chose qui me crée encore plus de problèmes car a la moindre action je perd la page et les données filtrées si la page contient une "datatable".

l'histoire du rafraîchissement automatique avec intervalles figé dans le code html ne m' interresse pas car cela ne me règle en aucun cas mon problème puisque je veux rafraîchir les notifications si une action les affectant est exécutée et dans ce cas ne pas rafraîchir tout la page.

Ma question est donc :

Comment pourrais je rafraichir la page notif.xhtml qui elle dans son controlleur contient une fonction postconstruct qui me fait tout le travail concernant les notifs ce qui veut dire que si je la recharge ,les notifs seront automatiquement mises à jour.
A ce jour et apres plusieurs tentatives je n'arrive pas à accéder a cette page dont l'url est inexistante puisqu'elle est contenue dans une autre page qui elle aussi est incluse dans ma page courante.

je sais que c'est pas facile à expliquer mais j’espère avoir été un minimum clair et que j'aurais des réponses dans un premier temps et que celle ci seront un minimum claires.

je vous remercie d'avance

**johnlobs** · 25/01/2018, 12h55

Bonjour,
Dans mes pages :

Code :

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

1
2
3
4
5
6
7
8
9
10
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pe="http://primefaces.org/ui/extensions"
	xmlns:sec="http://www.springframework.org/security/tags"
	xmlns:f="http://java.sun.com/jsf/core"
	 template="/WEB-INF/template.xhtml">
         ...................
</ui composition>

Dans template.xhtml

Code :

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

1
2
3
4
5
6
<h:head>
</h:head>
<h:body>
<ui:include src="notif.xhtml" />
.........
</h:body>

comment est ce que je pourrais rafraichir uniquement notif.xhtml à partir d'un bouton dans ma page qui inclut template.xhtml
je ne trouve pas grand chose dans les recherches sur les facelets

je vous remercie d'avance

**SpaceFrog** · 25/01/2018, 13h59

un ajax ? un load() jquery ?

**Beginner.** · 25/01/2018, 14h12

Salut,

Je ne m'y connais pas dans ce domaine mais avec html et JS, ça me fait penser à ajax ou bien mettre dans la page principale une iframe dans laquelle on mettrait la page à recharger.

Je ne sais pas si ce sont de bonnes idées je dis juste que ton message me fait penser à ça.

**johnlobs** · 25/01/2018, 14h32

Tout d'abord je tiens à vous remercier pour le temps que vous consacrez pour lire et répondre aux message de tous les membres.

La techno importe peu car le problème que j'ai rencontré ne concerne pas la méthode à utiliser pour rafraîchir la page mais plutôt un problème d'accès.
je m'explique :

lorsque je veux accéder depuis ma page aux éléments de template.xhtml puis à notif.xhtml pour la rafraîchir j'ai une erreur car il ne les reconnait pas meme en créant une div comme suit il ne reconnait pas la div

code de template.xhtml:

Code XHTML :

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

1
2
3
4
5
6
7
<h:body>
 
	<div id="include" >
		<ui:include src="notif.xhtml" />
 
		<ui:include src="menu.xhtml" />
	</div>

code de mapage.xhtml:

Code XHTML :

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

1
2
3
4
5
6
7
8
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pe="http://primefaces.org/ui/extensions"
	xmlns:sec="http://www.springframework.org/security/tags"
	xmlns:f="http://java.sun.com/jsf/core"
	 template="/WEB-INF/template.xhtml">

peu importe la méthode d’accès et le langage ,mon objectif est d'y accéder puis de reloader uniquement notif.xhtml

J'ai aussi pense a poster dans la section facelets JSF (dans java web) car ca peut aussi concerner cette section car la question est assez globale

En tout cas,en attendant vos reponses,je vous remercie pour vos conseils

**johnlobs** · 25/01/2018, 19h44

Bonjour ,

Je sais que mon sujet est mal exprimé et manque de precision.
A ce jour, je ne suis plus au même stade ; je m'explique:

toute mon histoire d'include et de composition n'est plus d'actualité.En effet tous ces includes ne posent plus probleme car le code de la page incluse est injecté dans la page qui fait apel à template.xhtml.

J'arrive à recuperer la div qui m'interresse et qui contient l'include grace à ce code javascript:

Code javascript :

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

document.body.children[0]

le soucis que j'ai actuellement est de pouvoir raffraichir uniquement cette div sans injecter de nouveau contenu (je veux uniquement la recharger avec son contenu )

J'ai essayer ce code mais ca ne marche pas :

Code javascript :

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

document.body.children[0].load(location.href+document.body.children[0])

Si quelqu'un peut m'aider ce serait très sympas !

merci d'avance!

**Beginner.** · 25/01/2018, 21h10

Perso j'aimerais bien t'aider mais j'y connais rien à ce langage, c'est quoi ces "ui" ? Cela me fait penser à des iframe...

Si c'était une image ou une iframe, je te suggérerais de modifier le source (l'attribut "src"), ce changement provoque un chargement mais comme tu veux recharger la même page il faudrait donner le même nom + ? + un nombre...

Genre tu as src="notif.xhtml" tu le remplaces par src="notif.xhtml?1"Il faut que le nombre soit différent à chaque fois, pour produire un nombre différent on utilise parfois l'objet date et getTime...

**Watilin** · 26/01/2018, 00h01

Je plussoie la proposition de Beginner. Dans les docs anglophones, on la trouve parfois sous l’appellation cache buster.

**johnlobs** · 29/01/2018, 15h58

Je vous remercie pour vos réponses!!!

Pour répondre a ta question Beginner les fameux "ui" ne sont que des balises facelets qui aident a structurer son application avec une meilleure gestion des templates.

Pour éviter due duplication de code , certaines fonctionnalités qui sont communes à plusieurs ou bien à toutes les pages sont regroupées dans cette fameuse template.

C'est la que commence mon problème: dans mon header j'ai une partie notification qui regroupe l'ensemble des notifications de l'utilisateur connecté.

Ces notifications ne sont qu'une page xhtml ,qui grâce a une méthode annotée @postconstruct du controlleur concerné ,est alimentée.

Mon soucis est alors de vouloir recharger cette page qui au départ est chargée grâce à une "facelet" balise include.

J'ai mis l'include de la page dans une div que je recharge avec ce code Jquery:

Code :

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

$("#topbar").load("#topbar");

Chose qui fonctionne à merveille sauf que après analyse je réalise que ma page perd en fonctionnalités c'est à dire que ce code me charge le code HTML
mais n’interprète pas toutes les balises .

je pense que je vais devoir aller poster dans la rubrique jsf que je ne trouve pas mais je suppose que ça doit être dans java web

En tout cas merci beaucoup et je reste ouvert a toute proposition

Bonne journée a tous

**Watilin** · 30/01/2018, 11h00

Bonjour,

quand tu appelles .load("#topbar"), c’est la page actuelle qui est implicitement appelée. Par exemple si ta page s’appelle index.html, l’URL appelée sera en réalité index.html#topbar.

Tu peux vérifier ce comportement en ouvrant la console F12 de ton navigateur et en allant sur le panneau réseau.

Pour que ton appel .load() fonctionne comme tu le souhaites, tu dois lui passer explicitement l’adresse de la page de notifications. Et si j’ai bien suivi il s’agit de notif.xhtml. Donc, ton appel devra ressembler à ça :

Code :

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

$("#topbar").load(("notif.xhtml");

Voir http://api.jquery.com/load/.

**johnlobs** · 30/01/2018, 13h45

Merci Watilin pour ta reponse .

C'est justement ce que tu viens de dire qui me fait recharger la div au lieu de la page;je m'explique :

Lorsque je tente de charger la page en faisant :

Code jquery :

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

$("#topbar").load("notif.xhtml");

Il va chercher le fichier dans le path de la page en cours.Même quand je lui indique que la page se trouve dans WEB-INF,il concatene WEB-INF/notif.xhtml à l'url de la page en cours donc erreur.Ce qui m'a poussé a vouloir charger uniquement la div mais autre problème, la div se charge bien mais il ne considère pas la balise de fin de div et va recharger tout le code qui vient après et donc toute la page.

D'apres ce que j'ai lu ,il y a bcp de problèmes liés a jsf2 qui ne répond pas encore a tous les problèmes de dev.
Toute la documentation parle de lien pour changer la page de l'include chose qui ne concerne pas mon cas.

De plus lors du chargement de la div , je perd les fonctionnalité des notifs qui devient une simple icone .

Je reste ouvert a toute autre proposition...
Merci beaucoup pour ton aide et pour le temps que tu consacre à mon cas

**Watilin** · 30/01/2018, 23h10

Envoyé par johnlobs

Il va chercher le fichier dans le path de la page en cours. Même quand je lui indique que la page se trouve dans WEB-INF,il concatene WEB-INF/notif.xhtml à l'url de la page en cours donc erreur.

Peut-être qu’une petite révision sur les URL absolues et relatives pourrait t’être utile

Je voulais trouver un cours à propos de ça sur Developpez.com, mais apparemment je cherche mal. Je te la fais courte :

Une URL absolue commence par /, où / est la racine de ton site.
Depuis n’importe quelle page, l’URL /a/b/page.html sera toujours la même.

Une URL relative, c’est l’inverse : elle ne commence pas par /, et sera relative au dossier contenant la page actuelle.
Par exemple, si ta page est /a/page.html et que tu appelles l’URL d/autrepage.html, l’adresse réelle sera /a/d/autrepage.html.

Un moyen simple de voir en quoi se résoud une adresse, relative ou absolue, c’est d’utiliser un lien dans la console F12 du navigateur (le panneau console, cette fois-ci) :

Code :

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

1
2
3
var lien = document.createElement("a");
lien.href = "chemin/quelconque";
console.log(lien.href);

La propriété href des liens est un peu « magique » : quand tu y accèdes en lecture, elle est automatiquement résolue en URL complète. Ça te permet de bien voir le résultat.

Envoyé par johnlobs

Ce qui m'a poussé a vouloir charger uniquement la div mais autre problème, la div se charge bien mais il ne considère pas la balise de fin de div et va recharger tout le code qui vient après et donc toute la page.

De plus lors du chargement de la div , je perd les fonctionnalité des notifs qui devient une simple icone .

Quand tu invoques .load(), le contenu de l’élément HTML est écrasé comme si tu avais utilisé innerHTML. Voilà ce qui se passe en détails :

L’élément est d’abord vidé ; tous ses enfants sont supprimés, et ainsi toutes les références JavaScript (ids, évènements attachés, etc.) sont perdues. Ça explique sans doute ta perte de fonctionnalité.
La chaîne reçue depuis le serveur est analysée comme code HTML ; un arbre DOM est construit.
Ce nouvel arbre DOM est inséré dans l’élément réceptacle.

On appele parfois corruption du DOM le fait qu’on perde des références JS quand un bout du DOM est écrasé.

Je ne connais pas la techno serveur JSF, mais je peux dire au moins une chose : si elle repose sur l’envoi de scripts à exécuter côté client, elle ne s’articulera pas bien avec .load(). Il vaut mieux regarder dans les docs de JSF pour savoir quoi faire.

Autrement, fais générer du HTML classique à ton serveur, et code la partie client à la main. Ça sera peut-être long, mais si la techno serveur est insuffisante, c’est sans doute la seule solution.

**psychadelic** · 31/01/2018, 16h41

Tout ça me semble un peu brouillon..

C'est quoi l'architecture générale . ?
Coté serveur j'ai l'impression que c'est un serveur Java genre TomCat ?
Mais coté client je vois pas trop, parce que s'imposer de faire du XHTML me semble rébarbatif. J'ai l’impression que ce sont des terminaux Wang "trafiqués" ?

Comment le client fait pour savoir que ta partie "" $("#topbar") "" doit être rechargée ??
Soit la recharger en boucle et effectuer un changement sur la page seulement si elle est différente ? (il y a un élément discriminant ?) => et c'est un peu lourd autant mettre en place une boucle de rafraîchissement sur la page avec un setTimeout.

Si en revanche ce sont des PC normaux, alors autant utiliser un navigateur normal, même Edge s'il le faut..
Et la tu peux utiliser le système des promesses de JavaScript et même même recharger la page par un fetch, si tu a la flemme de te coltiner du code Ajax.

Maintenant je ne sais pas trop comment peut se comporter un tel systeme avec une promesse qui arrive au bout d'un siècle, et si le Navigateur peut décider de les tuer de lui même si le délai est trop long, mais c'est prévu aussi bien par Ajax qu'en Fetch, on rammase une erreur, et alors il n'y a plus qu'a relancer un nouveau fetch d'attente, mais tu risque de te retrouver dans la problématique d'écrire une sorte de fonction récurssive, et c'est un peu spécial à écrire quand des promesses sont imbriquées dedans.

**johnlobs** · 31/01/2018, 17h52

merci a vous pour vos reponses qui me permettent d'avancer de jour en jour et peut etre un jour de resoudre ce probleme pour quelqu'un d'autre à mon tour.
@psychadelic :Comme je l'ai mis dans mon premier post c'est une appli se basant sur le modele mvc avec les techno jsf spring jpa serveur tomcat... mais peu importe car mon problème à ce jour concerne la partie web et plus exactement ajax/jquery ou javascript et les tags jsf de templating car je veux recharger une partie du template pour pouvoir afficher les notifications qui on déjà été calculées dans un des controlleurs et donc uniquement un probleme de rechargement .Pour finir le terme brouillon me semble être inapproprié et ton questionnement sur le xhtml me parait être infondé j'aimerais que tu développes un peu plus ton idée concernant jsf et xhtml.

@Watilin :je vois un peu ce que tu veux dire et ca me rapelle les histoires de chemin relatif en dev sys mais le probleme c'est que dans cette appli il ya une gestion des acces aux chemins avec gestion des roles et de la securite mais pour ne pas compliquer les choses on va dire qu'à travers la div et le include de la src, le chemin est reconnu et le rechargement se fait mais la console à travers le f12 me donne cette erreur :

onclick @ mapage.xhtml:233
jquery.js.xhtml?ln=primefaces&v=5.1:25 Uncaught TypeError: Cannot read property 'debug' of undefined
at eval (eval at <anonymous> (jquery.js.xhtml?ln=primefaces&v=5.1:14), <anonymous>:1:33)
at eval (eval at <anonymous> (jquery.js.xhtml?ln=primefaces&v=5.1:14), <anonymous>:1:10047)
at eval (<anonymous>)
at jquery.js.xhtml?ln=primefaces&v=5.1:14
at Function.globalEval (jquery.js.xhtml?ln=primefaces&v=5.1:14)
at text script (jquery.js.xhtml?ln=primefaces&v=5.1:25)
at ag (jquery.js.xhtml?ln=primefaces&v=5.1:25)
at cg (jquery.js.xhtml?ln=primefaces&v=5.1:25)
at i (jquery.js.xhtml?ln=primefaces&v=5.1:25)
at Object.send (jquery.js.xhtml?ln=primefaces&v=5.1:25)

En esperant vous relire je vous remercie vraiment pour votre intention!!

**Beginner.** · 31/01/2018, 19h05

Salut,

Tu n'as pas trouvé de solution dans le lien que je t'avais indiqué (https://stackoverflow.com/questions/...n-menu-jsf-spa) ?

**psychadelic** · 31/01/2018, 22h46

Ok, juste la partie client*: js / jQuery…

1) , il y a quoi coté client*?
c’est bien un PC normal avec un navigateur web genre FireFox*??
Et dans ce cas c’est une version récente de FireFox avec un javascript dedans en version ECMAScript 2016*??

Donc je pars de cette hypothèse, mais j'aimerai bien le lire noir sur blanc pour juste bien me fixer l’esprit.

que tu utilise un modèle vue contrôleur c'est très bien mais cela ne changera rien au fait que coté client tu est juste dans un contexte client, avec sa petite logique de fonctionnalités et de programmation java script (avec une librairie jQuery en plus dans ton cas) et qui ne peut pas exécuter la moindre commande java.

La fonction Load de jQuery attend une url, comme te l’a écrit Watilin cette url peut être en relatif ou en fixe.
Quand c’est une url relative c’est par rapport au chemin utilisé pour la page, avec la logique de marquage des répertoires indiqué par des slashs, et l’utilisation de 2 points successifs pour remonter au répertoire parent.
Quand c’est une url fixe, ben faut tout mettre, en commençant par le http://
C’est pas très sorcier.

Le message d’erreur que tu donne renseigne sur les différentes difficultés rencontrées par l’exécution de ton Load à l’intérieur de la libraire des fonctions de jQuery, ça n’arrangera pas ton affaire d’en suivre la trace, la seule chose à y voir c’est que visiblement ton utilisation de la fonction load de jQuery n’est pas conforme, et comme le seul argument que tu utilise c’est l’url, alors c’est la que ça pêche, ton url est mauvaise.

http://api.jquery.com/load/

url => https://fr.wikipedia.org/wiki/Uniform_Resource_Locator

Le problème avec le xhtml par rapport à du html5, c’est que je ne suis pas certain que jQuery se comporte pareil pour adresser les objets, et d’ailleurs, quelle version de jQuery*?
(mais passons, si on en reste à un simple Load jQuery)

Chose qui fonctionne à merveille sauf que après analyse je réalise que ma page perd en fonctionnalités c'est à dire que ce code me charge le code HTML
mais n’interprète pas toutes les balises .

C’est "*logique ", la fonction load est exécutée coté client et la seule chose qu’elle fasse c’est de récupérer du texte xhtml pour le mettre dans la page, le navigateur client n’est pas la pour interpréter du code java, c’est au serveur de donner la page toute cuite.

2 ) Ce que je ne comprends pas non plus dans ton histoire, c’est à partir de quelle information coté navigateur cela déclenche le chargement Ajax de ta <div id="#topbar">???

Car la fonction Load de jQuery est une fonction Ajax, ou autrement c’est une fonction asynchrone*:
elle envoi un message à ton serveur jsf et quand celui-ci lui répond elle substitue le xhtml sur ta <div id="#topbar"> par le texte html que ton serveur lui envoie.

3) j’ai cru comprendre que l’intérêt pour toi de cette fonction asynchrone c’est de justement lancer une attente coté client pour que ton serveur décide de lui même de n’y répondre uniquement quand les informations utiles à cette partie à afficher sont à rafraîchir.
Ce qui me fait poser la question de savoir jusqu’à combien de temps coté client l’interpréteur javascript peut accepter comme durée d’attente avant d’y renoncer, et dans ce cas il faut la relancer, c’est bien ça ton plan*??

**johnlobs** · 01/02/2018, 19h12

Salut ,

Tout d'abord je vous remercie encore une fois pour l’intérêt porté a mon problème.

@Beginner: Le lien est très intéressant et m'a apporté beaucoup d'information concernant cette techno par contre il montre comment changer le contenu de la page et non pas le header qui "a la même page source" ce qui me laisse croire que tant que la page ne change pas elle ne sera pas rechargée".Donc histoire de cache buster que je ne maîtrise pas et qui me fait générer des random numbers;je fuis donc cette solution car je suis sur qu'il doit y avoir une meilleure solution.

@psychadelic:
1)Coté client c'est des poste(mobile,pc,...) tout a fait normaux avec accès navigateur.Je vais aller consulter les lien que tu m'as envoyé !!

2)Ce point ne me pose aucunement probleme si j'arrive a resoudre ce petit probleme car la logique est tres simple et le choix vaste;je m'explique:l'action sera declenchée par des evenements qui metteront à jour les notif puis par un rafraichissement a intervalles regulier et pourquoi pas autre chose mais le problème n'est pas la :le probleme est que la div ne se recharge pas alors que tous les evenements sont prets et attendent l'appel de la fonction de chargement.

3)Ce plan est à elaborer par la suite mais pour le moment je m'attaque au noyau de la chose et je bloque au niveau du rechargement si je debloque ce probleme je pourrais m'amuser à gerer le reste et a laisser libre court à mon imagination.

En tout cas merci à vous et reste dans l'attente de vous relire

Rafraîchir une page xhtml incluse dans une autre page

JavaScript

Discussions similaires

Partager

Partager