Foren
Cacher/Afficher des champs dans un formulaire
Alice ETCHEGARAY, geändert vor 10 Jahren.
Cacher/Afficher des champs dans un formulaire
Junior Member Beiträge: 49 Beitrittsdatum: 23.01.14 Neueste Beiträge
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,
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,
Anhänge:
Darryl Kpizingui, geändert vor 10 Jahren.
RE: Cacher/Afficher des champs dans un formulaire
Junior Member Beiträge: 82 Beitrittsdatum: 10.01.13 Neueste Beiträge
Un classique JavaScript.
Eventuellement ajouter <portlet:namespace /> devant les ID utilises dans les methodes A.one('#<portlet:namespace />id_du_champ_select').
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, geändert vor 10 Jahren.
RE: Cacher/Afficher des champs dans un formulaire
Junior Member Beiträge: 49 Beitrittsdatum: 23.01.14 Neueste Beiträge
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 :
En fait, si le statut = 'Permanent' ou statutId = 1, alors les champs suivants (Societe et Date de Sortie) devront se masquer.
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 :">
<%
for(Statut statut: statuts){
%>
<aui:option value="<%= statut.getStatutId() %>" selected="<%= collaborateur != null && statut.getStatutId() == collaborateur.getStatutId() %>"><%=HtmlUtil.escape(statut.getNom())%></aui:option>
<%
}
%>
</aui:select>
<liferay-ui:error key="societe-required" message="societe-required" />
<aui:select name="societeId" inlinefield="true" showemptyoption="<%= true %>" label="Société :">
<%
for(Societe societe: societes){
%>
<aui:option value="<%= societe.getSocieteId() %>" selected="<%= collaborateur != null && societe.getSocieteId() == collaborateur.getSocieteId() %>"><%=HtmlUtil.escape(societe.getNom())%></aui:option>
<%
}
%>
</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, geändert vor 10 Jahren.
RE: Cacher/Afficher des champs dans un formulaire
Junior Member Beiträge: 82 Beitrittsdatum: 10.01.13 Neueste Beiträge
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.
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, geändert vor 10 Jahren.
RE: Cacher/Afficher des champs dans un formulaire
Junior Member Beiträge: 49 Beitrittsdatum: 23.01.14 Neueste Beiträge
Je suis désolée mais ça ne marche toujours pas.
L'action se fait-elle dynamiquement ?
<%@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">
<%
Collaborateur collaborateur = null;
long collaborateurId = ParamUtil.getLong(request, "collaborateurId");
if (collaborateurId > 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");
%>
<aui:model-context bean="<%= collaborateur %>" model="<%= Collaborateur.class %>" />
<portlet:renderurl var="viewCollaborateurURL" />
<portlet:actionurl name="<%= collaborateur == null ? "addCollaborateur" : "updateCollaborateur" %>" var="editCollaborateurURL" windowState="normal" />
<liferay-ui:header backURL="<%= viewCollaborateurURL %>" title="<%= (collaborateur != null) ? collaborateur.getNom() + " " + collaborateur.getPrenom(): "new-collaborateur" %>" />
<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 ? "" : 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 :">
<%
for(Manager manager: managers){
%>
<aui:option value="<%= manager.getManagerId() %>" selected="<%= collaborateur != null && manager.getManagerId() == collaborateur.getManagerId() %>"><%=HtmlUtil.escape(manager.getLogin() + " " + manager.getHierarchie())%></aui:option>
<%
}
%>
</aui:select>
<liferay-ui:error key="statut-required" message="statut-required" />
<aui:select id="StatutId" name="StatutId" inlinefield="true" showemptyoption="<%= true %>" label="Statut :">
<%
for(Statut statut: statuts){
%>
<aui:option value="<%= statut.getStatutId() %>" selected="<%= collaborateur != null && statut.getStatutId() == collaborateur.getStatutId() %>"><%=HtmlUtil.escape(statut.getNom())%></aui:option>
<%
}
%>
</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é :">
<%
for(Societe societe: societes){
%>
<aui:option value="<%= societe.getSocieteId() %>" selected="<%= collaborateur != null && societe.getSocieteId() == collaborateur.getSocieteId() %>"><%=HtmlUtil.escape(societe.getNom())%></aui:option>
<%
}
%>
</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">
<%
for(Application appli: applications){
%>
<option value="<%= appli.getApplicationId() %>" selected="<%= collaborateur != null && appli.getApplicationId() == collaborateur.getApplicationId() %>"><%=HtmlUtil.escape(appli.getNom() + " / " + appli.getAcces())%></option>
<%
}
%>
</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, geändert vor 9 Jahren.
RE: Cacher/Afficher des champs dans un formulaire
Junior Member Beiträge: 82 Beitrittsdatum: 10.01.13 Neueste Beiträge
Bonjour,
Il y a plusieurs problème avec votre code.
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 ***
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, geändert vor 9 Jahren.
RE: Cacher/Afficher des champs dans un formulaire
Junior Member Beiträge: 49 Beitrittsdatum: 23.01.14 Neueste Beiträge
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 :
Qu'est-ce qu'il y a de faux dans mon code ?
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 ?