Cacher/Afficher des champs dans un formulaire

[Alice ETCHEGARAY, modificado hace 9 años.]

Bonjour à  tous,

J'ai un autre problème :
Je voudrais afficher ou masquer certains champs en fonction d'une valeur d'un autre champ.
Voici un aperçu :

Les champs encadrés en rouge devront se masquer lorsque la valeur comprise dans Statut = Permanent.

Merci de votre aide,

[Darryl Kpizingui, modificado hace 9 años.]

Un classique JavaScript.

var A = AUI();
A.one('#id_du_champ_select').on('change', function(event)
{
   var selectBox = event.currentTarget;
   var value = selectBox.attr('value');
  if( value === 'Permanent')
  {
     A.one('#id_du_champ_a_cacher').addClass('hide');
  }
 else
 {
     A.one('#id_du_champ_a_cacher').removeClass('hide');
 }

});

Eventuellement ajouter <portlet:namespace /> devant les ID utilises dans les methodes A.one('#<portlet:namespace />id_du_champ_select').

[Alice ETCHEGARAY, modificado hace 9 años.]

J'ai oublié de préciser que je voudrais modifier le code dans mon edit.jsp.
Est-il possible d'insérer du JavaScript dans un JSP ?

Voici mon code :

<liferay-ui:error key="statut-required" message="statut-required" />
		<aui:select name="statutId" inlinefield="true" showemptyoption="<%= true %>" label="Statut :">

	 		&lt;%
				for(Statut statut: statuts){
			%&gt;
			<aui:option value="<%= statut.getStatutId() %>" selected="<%= collaborateur != null &amp;&amp; statut.getStatutId() == collaborateur.getStatutId() %>">&lt;%=HtmlUtil.escape(statut.getNom())%&gt;</aui:option>
			&lt;%
				}
			%&gt;

		</aui:select>
		<liferay-ui:error key="societe-required" message="societe-required" />
		<aui:select name="societeId" inlinefield="true" showemptyoption="<%= true %>" label="Société :">

	 		&lt;%
				for(Societe societe: societes){
			%&gt;
			<aui:option value="<%= societe.getSocieteId() %>" selected="<%= collaborateur != null &amp;&amp; societe.getSocieteId() == collaborateur.getSocieteId() %>">&lt;%=HtmlUtil.escape(societe.getNom())%&gt;</aui:option>
			&lt;%
				}
			%&gt;

		</aui:select>
	
		<aui:input name="datesortie" inlineField="true" label="Date de sortie :" />

En fait, si le statut = 'Permanent' ou statutId = 1, alors les champs suivants (Societe et Date de Sortie) devront se masquer.

[Darryl Kpizingui, modificado hace 9 años.]

Disons, que l'on peut définir une JSP comme un fichier HTML avec des instructions JAVA. De ce fait elle peut contenir du JavaScript.
Si vous êtes nouvelle à Liferay, vous ne connaissez peut être pas bien AlloyUI qui est le framework JS livré avec Liferay: https://www.liferay.com/community/liferay-projects/alloy-ui/overview

Vous pouvez mettre des balises <script> dans les JSP comme bon vous semble. Vous pouvez aussi les mettre dans un fichier (par exemple main.js) et les inclure dans votre projet.
Liferay a défini une taglib <aui:script> que vous pouvez aussi utiliser. Une petite recherche sur Google vous donnera de plus ample information.

Le bout de code ci-dessous inséré à la fin de votre JSP devrait cacher/afficher le champ société pour Liferay 6.2. Sinon, il faudra utiliser la classe CSS *aui-helper-hidden* à la place de *hide* . Je vous laisse le loisir de le compléter.

<aui:script use="node">
 A.one('#<portlet:namespace />statutId').on('change', function(event)
 {
    var hiddenFieldsForStatusId = 1;
    var selectBox = A.one('#<portlet:namespace />statutId');
    var value = selectBox.attr('value');
   if( value == hiddenFieldsForStatusId )
   {
      A.one('#<portlet:namespace />societeId').addClass('hide');
   }
 else
 {
     A.one('#<portlet:namespace />societeId').removeClass('hide');
 }
});
</aui:script>

[Alice ETCHEGARAY, modificado hace 9 años.]

Je suis désolée mais ça ne marche toujours pas.

<%@include file="/html/init.jsp"%>
<script src="http://cdn.alloyui.com/2.5.0/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/2.5.0/aui-css/css/bootstrap.min.css" rel="stylesheet">
&lt;%
Collaborateur collaborateur = null;

long collaborateurId = ParamUtil.getLong(request, "collaborateurId");

if (collaborateurId &gt; 0) {
	collaborateur = CollaborateurLocalServiceUtil.getCollaborateur(collaborateurId);
}

List<manager> managers = ManagerLocalServiceUtil.getManagersByGroupId(scopeGroupId);
List<statut> statuts = StatutLocalServiceUtil.getStatuts(-1,-1);
List<societe> societes = SocieteLocalServiceUtil.getSocietes(-1,-1);
List<application> applications = ApplicationLocalServiceUtil.getApplications(-1,-1);

String redirect = ParamUtil.getString(request, "redirect");
%&gt;

<aui:model-context bean="<%= collaborateur %>" model="<%= Collaborateur.class %>" />
<portlet:renderurl var="viewCollaborateurURL" />
<portlet:actionurl name="<%= collaborateur == null ? &quot;addCollaborateur&quot; : &quot;updateCollaborateur&quot; %>" var="editCollaborateurURL" windowState="normal" />

<liferay-ui:header backURL="<%= viewCollaborateurURL %>" title="<%= (collaborateur != null) ? collaborateur.getNom() + &quot; &quot; + collaborateur.getPrenom(): &quot;new-collaborateur&quot; %>" />

<aui:form action="<%= editCollaborateurURL %>" method="POST" name="fm">
		<aui:input type="hidden" name="redirect" value="<%= redirect %>" />

		<aui:input type="hidden" name="collaborateurId" value="<%= collaborateur == null ? &quot;&quot; : collaborateur.getCollaborateurId() %>" />
		
		<liferay-ui:error key="entreedate-required" message="dateentree-required" />
		<aui:input name="dateentree" label="Date d'entrée :" />
		
		<liferay-ui:error key="Collaborateurnom-required" message="Collaborateurnom-required" />
		<aui:input name="nom" label="Nom :" inlineField="true" />

		<liferay-ui:error key="Collaborateurprenom-required" message="Collaborateurprenom-required" />
		<aui:input name="prenom" label="Prénom :" inlineField="true" />	
		
		<liferay-ui:error key="mail-required" message="mail-required" />
		<aui:input name="mail" label="Mail Axione :" />
		
		<liferay-ui:error key="tel-required" message="tel-required" />
		<aui:input name="tel" label="Téléphone :" inlineField="true" />

		<liferay-ui:error key="manager-required" message="manager-required" />
		<aui:select name="managerId" showemptyoption="<%= true %>" label="Manager et hiérarchie :">

	 		&lt;%
				for(Manager manager: managers){
			%&gt;
			<aui:option value="<%= manager.getManagerId() %>" selected="<%= collaborateur != null &amp;&amp; manager.getManagerId() == collaborateur.getManagerId() %>">&lt;%=HtmlUtil.escape(manager.getLogin() + "   " + manager.getHierarchie())%&gt;</aui:option>			
			&lt;%
				}
			%&gt;

		</aui:select>
		
		<liferay-ui:error key="statut-required" message="statut-required" />
		<aui:select id="StatutId" name="StatutId" inlinefield="true" showemptyoption="<%= true %>" label="Statut :">

	 		&lt;%
				for(Statut statut: statuts){
			%&gt;
			<aui:option value="<%= statut.getStatutId() %>" selected="<%= collaborateur != null &amp;&amp; statut.getStatutId() == collaborateur.getStatutId() %>">&lt;%=HtmlUtil.escape(statut.getNom())%&gt;</aui:option>
			&lt;%
				}
			%&gt;
	
		</aui:select>
		
		<aui:script use="node">
			A.one('Collaborateur.StatutId').on('change', function(event)
			{
    			var hiddenFieldsForStatusId = 1;
    			var selectBox = A.one('Collaborateur.getStatutId');
    			var value = selectBox.attr('value');
   			if( value == hiddenFieldsForStatusId )
   			{
      			A.one('Collaborateur.SocieteId').addClass('hide');
   			}
 			else
 			{
     			A.one('Collaborateur.SocieteId').removeClass('hide');
 			}
			});
			</aui:script>
		
		<liferay-ui:error key="societe-required" message="societe-required" />
		<aui:select id="SocieteId" name="SocieteId" inlinefield="true" showemptyoption="<%= true %>" label="Société :">

	 		&lt;%
				for(Societe societe: societes){
			%&gt;
			<aui:option value="<%= societe.getSocieteId() %>" selected="<%= collaborateur != null &amp;&amp; societe.getSocieteId() == collaborateur.getSocieteId() %>">&lt;%=HtmlUtil.escape(societe.getNom())%&gt;</aui:option>
			&lt;%
				}
			%&gt;

		</aui:select>
	
		<aui:input name="datesortie" inlineField="true" label="Date de sortie :" />

		<aui:select size="10" multiple="true" label="Droits d'accès aux applications :" showemptyoption="<%= true %>" name="multiselect">
				&lt;%
					for(Application appli: applications){
				%&gt;
					<option value="<%= appli.getApplicationId() %>" selected="<%= collaborateur != null &amp;&amp; appli.getApplicationId() == collaborateur.getApplicationId() %>">&lt;%=HtmlUtil.escape(appli.getNom() + " / " + appli.getAcces())%&gt;</option>
				&lt;%
					}
				%&gt;
		</aui:select>

	<aui:button-row>
		<aui:button type="submit" />

		<aui:button type="cancel" onClick="<%= viewCollaborateurURL %>" />
	</aui:button-row>

</aui:form></application></societe></statut></manager>

L'action se fait-elle dynamiquement ?

[Darryl Kpizingui, modificado hace 9 años.]

Bonjour,

Il y a plusieurs problème avec votre code.

• Alloy UI est déjà inclus par Liferay. Vous devais pas le faire dans le code du portlet.
• Dans le JavaScript, hiddenFieldsForStatusId devrait peut être avoir la valeur var hiddenFieldsForStatusId = <%= collaborateur.getStatutId() %>;
• A.one('Collaborateur.getStatutId') ??? C'est de la manipulation du DOM avec du JavaScript, Le code devrait être comme l'ai écrit dans mon précédant message var selectBox = A.one('#<portlet:namespace />StatutId');
• Le code JS peut être placé tout à la fin de la page

J'ai pas très envie d'écrire le code à votre place. je vous poste un code fonctionnel; Vous pouvez le remplacer temporairement avec le contenu de votre fichier pour voir comment ça rend.
*** Code pour Liferay 6.2 ***

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>

<%@ taglib uri="http://alloy.liferay.com/tld/aui" prefix="aui"%>
<%@ taglib uri="http://liferay.com/tld/portlet" prefix="liferay-portlet" %>
<%@ taglib uri="http://liferay.com/tld/security" prefix="liferay-security" %>
<%@ taglib uri="http://liferay.com/tld/theme" prefix="liferay-theme" %>

<portlet:defineObjects />

<aui:select id="StatutId" name="StatutId" inlineField="true" showEmptyOption="<%= true %>" label="Statut :">
<aui:option value="1" selected="${true}">1</aui:option>
<aui:option value="2" >2</aui:option>
<aui:option value="3" >3</aui:option>
<aui:option value="4" >4</aui:option>
</aui:select>

<aui:select id="SocieteId" name="SocieteId" inlineField="true" showEmptyOption="<%= true %>" label="Société :">
<aui:option value="425" >444444</aui:option>
</aui:select>


<aui:script use="node,node-event-simulate">
A.one('#<portlet:namespace />StatutId').on('change', function(event)
{
var hiddenFieldsForStatusId = 1;
var selectBox = A.one('#<portlet:namespace />StatutId');
var value = selectBox.attr('value');
if( value == hiddenFieldsForStatusId )
{
A.one('#<portlet:namespace />SocieteId').ancestor('.control-group').addClass('hide');
//A.one('#<portlet:namespace />SocieteId').ancestor('.control-group').addClass('aui-helper-hidden');
}
else
{
A.one('#<portlet:namespace />SocieteId').ancestor('.control-group').removeClass('hide');
// A.one('#<portlet:namespace />SocieteId').ancestor('.control-group').removeClass('aui-helper-hidden');
}
});

A.one('#<portlet:namespace />StatutId').simulate('change');
</aui:script>

[Alice ETCHEGARAY, modificado hace 9 años.]

Bonjour,

Tout d'abord, merci beaucoup pour votre code, je l'ai essayé et il fonctionne très bien.
Seulement, j'ai deux champs à masquer : la société et la date de sortie.
Or, quand je rajoute le dernier champs dans le code, ça ne fonctionne pas :

		<aui:input id="DateSortie" name="datesortie" inlineField="true" label="Date de sortie :" />

		<aui:script use="node,node-event-simulate">
		A.one('#<portlet:namespace />Statut').on('change', function(event)
		{
			var hiddenFieldsForStatus = 'Permanent';
			var selectBox = A.one('#<portlet:namespace />Statut');
			var value = selectBox.attr('value');
			if( value == hiddenFieldsForStatus )
			{
				A.one('#<portlet:namespace />SocieteId').ancestor('.control-group').addClass('hide');
				//A.one('#<portlet:namespace />SocieteId').ancestor('.control-group').addClass('aui-helper-hidden');
				A.one('#<portlet:namespace />DateSortie').ancestor('.control-group').addClass('hide');
				//A.one('#<portlet:namespace />DateSortie').ancestor('.control-group').addClass('aui-helper-hidden');
			}
			else
			{
				A.one('#<portlet:namespace />SocieteId').ancestor('.control-group').removeClass('hide');
				// A.one('#<portlet:namespace />SocieteId').ancestor('.control-group').removeClass('aui-helper-hidden');
				A.one('#<portlet:namespace />DateSortie').ancestor('.control-group').removeClass('hide');
				// A.one('#<portlet:namespace />DateSortie').ancestor('.control-group').removeClass('aui-helper-hidden');
			}
		});

		A.one('#<portlet:namespace />Statut').simulate('change');
		</aui:script>

Qu'est-ce qu'il y a de faux dans mon code ?