Comment détecter un changement de page pour exécuter du code front

Tags: #<Tag:0x00007f9e50a9d620>

Bonjour,

Je voulais savoir s’il existe un hook qui permettrait de détecter que l’utilsateur vient de quitter la vue sur laquelle il se trouve.

En effet, je suis actuellement en train de travailler sur la conception d’une vue récapitulant des informations. Cette vue comporte un objet externe (pour la selection du CMG et affichage des widgets et bouton de redirection) et d’un objet métier (Rapport d’activité). Cette vue se comporte de la manière suivante :

  • En cliquant sur le domaine comportant la vue, l’utilisateur arrive sur une page lui demandant de selectionner un centre de gestion dans la liste déroulante
  • Après confirmation de la sélection, les données filtrées en fonction du CMG s’affichent à l’écran.
  • Afin de pouvoir transmettre l’information sélectionnée, je place la valeur du centre de gestion dans un paramètre système qui servira dans la conception du filtre de l’objet métier.

Le problème survient quand l’utilisateur change de page, il faut reinitialiser ce paramètre système afin qu’à la prochaine utilisation, on le force à rechoisir un centre de gestion :

  • J’ai mis en place ce bout de code qui ne fonctionne :
  	$(window).on("beforeunload",(function() { 
	          		zoneRapport.css("display","none")
	        		zoneIndicateur.css("display","none")
	          		$('#selectionCmgDiv option[value="default"]').prop('selected','selected');
	          		app.setSysParam(null, CMG_TABLEAU_DE_BORD, "0",true);
	          	}));

qui était censé remettre à l’état initial la vue. Cependant, cela ne fonctionne que si on refresh la page ou qu’il y ait un changement de l’URL

Si je clique sur une autre entrée d’un autre domaine, cette méthode ne se déclenche pas.

  • Je me demandais s’il existe un hook permettant détecter que l’utilsateur vient de quitter la page actuelle qui me permettrait d’ajouter la condition suivante :
    Si l’utilsateur bascule sur une autre objet métier autre que celui du rapport d’activité alors on reinitialise la vue sinon on la conserve.

Cordialement,

Nadège

Dans du code spécifique, la méthode qui affiche une vue

$ui.displayView(ctn, "MyView", options, cbk)

accepte en option les fonctions onload et onunload.

Sinon, vous pouvez toujours ajouter spécifiquement un handler sur le container de votre vue (par défaut la zone principale est #work, mais la logique reste la même quel que soit le div qui demande a être remplacé):

$("#work")
  .addClass("js-content-unload") // selector to detect component to unload
  .on("ui.content.unload", function() { ... }); // handler before #work unload

Il faut binder ce handler lorsque vous affichez votre vue.