|
|
|
|
Bonjour,
Actuellement en stage, je dois développer une application en Strus, EJB etc.
Encore à la phase des dessins d'écrans (html, css et javascript uniquement donc) et débutant dans le javascript (néophyte et encore ^^) j'ai besoin d'un petit coup de main :
Je souhaite afficher une liste déroulante (jusque là tout va bien).
Lorsque l'on clique sur un élément de la liste, un paragraphe de texte se met à jour automatiquement en bas de la page (en fonction de l'élément).
Pouvez-vous m'aider ? ^^ Merci d'avance.
Configuration: Windows XP Internet Explorer 6.0
Bonjour :)
function submitChange ( ){
// --- Modification du parametre action qui va permettre d'appeller la bonne méthode JAVA a éxécuter.
document.forms[0].action.value = 'change';
// --- Soumission du formulaire.
document.forms[0].submit;
}
Et tu l'applique sur ta liste : onchange="javascript:submitChange()" Ensuite, il te faut ajouter une action dans ta classe java d'action, nommée 'change'. Elle sera appellée lors du changement de valeur de ta liste. Cette fonction aura pour but de récupérer la valeur sélectionnée de ta liste via un paramètre présent dans ton form, et ensuite de récupérer le texte a affiché qui correspond à cette valeur. Une fois ces valeurs récupérées, tu n'as plus qu'un renseigner les champs d'un Bean construit a cette occasion (ou un Bean existant auquel tu ajoute les propriétés adéquat. Et dans ta page JSP, tu affiche les données en fonctions de ton BEAN. C'est la manière la plus propre si tu travail en Struts. Apres si tu souhaite juste faire en javascript, le principe est le même : 1. Tu applique la fonction javascript à ta liste : onclick='javascript:submitChange(this)" Note la différence : ici on passe l'objet liste en parametre de manière à pouvoir récupérer la valeur sélectionnée dans la fonction. 2. Tu récupère la valeur :
function submitChange ( liste ){
// --- Recup de la valeur courante :
var val = liste.options[liste.selectedIndex].value;
// --- Ensuite libre à toi d'aller chercher le
// --- texte correspondant à la valeur :
var texte = ...
// --- Puis de remplir la zone ou afficher le texte comme il se doit.
// --- Admettons pour cela que dans ta JSP tu aie déclarée une DIV
// --- ayant id='toto'
document.getElementById('toto').innerHTML = texte;
}
Voilà grosso modo ce qu'il faut faire. Maintenant a toi de voir quelle méthode t'es la plus simple à implémenter, et cela dépend je pense de comment sont stockés (ou plus où) les textes à afficher. S'ils sont présent dans le BEAN de session alors tu devra faire la premiere méthode, sinon la deuxième. Bon courage pour la suite. ~ N'oubliez pas la balise "Résolu" lorsque votre problème est... résolu :) ~
|
Tout d'abord affiche chacun des paragraphes entre des balises <div> (par exemple) qui ont pour style "visibility=hidden".
|
Bonjour,
|
Bonjour,
<?php include "script.js"; ?> <select name="choix" onchange="setNewDate(this)"> <option value="1">Une heure avant</option> <option value="6">6 heures avant</option> <option value="0">Aujourd'hui</option> <option value="24">Les dernieres 24 heures</option> </select> </td> <td> De: <input id="from" type="Text" name="input12" value= ""> </td> <td> jusqu'a: <input id="to" type="Text" name="input13" value= ""> </td> <script language="javascript"> // --- Insert current date into 'to' input insertCurrentDate(); </script> Et un fichier de script qui doit avoir pour nom 'script.js' :
<script language="javascript">
var currentDate = new Date();
/**
* Calculate new time in function of time parameter
*/
function calculateNewTime ( _additional_time_in_hours ){
// --- Check if input text "from" is present
if ( ! document.getElementById("from") ){
alert("Missing form data 'from' to calculate the new date");
return;
}
// --- Check if input text "to" is present
var toTime = null;
if ( ! document.getElementById("to") ){
alert("Missing form data 'to' to calculate the new date");
return;
}
// --- Retrieve 'to' value
else
toTime = document.getElementById("to").value;
// --- Calculate the new date only if input text "to" is filled
if ( toTime != null && toTime != "" ){
// --- Take current time as a reference to calculate the new time.
// --- An update would be to parse the value of the input text 'to' in order the user to be able to enter his own time
// --- instead of having current time forced
var newDate = new Date(currentDate.getTime());
// --- Del additional time
newDate.setHours(newDate.getHours()-_additional_time_in_hours);
document.getElementById("from").value =
newDate.getFullYear()+"-"+(newDate.getMonth()+1)+"-"+newDate.getDate()+" "+
newDate.getHours()+":"+newDate.getMinutes()+":"+newDate.getSeconds();
}
}
function setNewDate ( selectBox ){
calculateNewTime(selectBox.options[selectBox.options.selectedIndex].value);
}
/**
* Insert current timestamp into input text "to"
*/
function insertCurrentDate ( ){
if ( document.getElementById("to") )
document.getElementById("to").value =
currentDate.getFullYear()+"-"+(currentDate.getMonth()+1)+"-"+currentDate.getDate()+" "+
currentDate.getHours()+":"+currentDate.getMinutes()+":"+currentDate.getSeconds();
}
</script>
Quelques explications sur le fonctionnement de tout ceci : Le fichier 'date.php' : 1°. Tu remarquera que l'on inclue le fichier de script dans lequel sont définies les fonctions javascript utilisée, ceci via l'instruction include "script.js"; 2°. Ensuite j'ai ajouté un évênement onchange sur la selectbox de manière à recalculer automatiquement la date en fonction de ce qu'à sélectionner l'utilisateur : onchange="setNewDate(this)" La fonction setNewDate est appelée est sera chargée de refaire le calcul. 3°). J'ai modifier les valeurs des différentes sélection en donnant à chaque fois la durée en heure à laquelle correspond l'option (une heure = 1, dans les 24h = 24, aujourd'hui = 0, etc.) Tu peux donc mettre les valeurs que tu souhaite par la suite, mais attention, n'oublie qu'il s'agit de nombre indiquant des heures ! 4°) Comme tu le vera par la suite, le calcule de la date est faite sur la date courante en javascript, donc plutot que d'afficher via du code PHP la date courante dans le champ "from" (deuxième input), je la calcule en javascript et l'affiche via la méthode "insertCurrentDate();". Notes que cette fonction est à appeler une fois le formulaire écrit dans la page. 5°) J'ai ajouté les identifiant "from" et "to" aux deux champs input text du formulaire de manière à les appeler plus facilement dans le code javascript. Le fichier de script 'script.js' : Celui-ci contient donc les fonctions de recalcule de la date. 1°. La fonction "insertCurrentDate" permet de calculer la date courante et l'afficher dans le champ input 'to' 2°. La fonction "setNewDate" permet de récupérer la valeur sélectionnée dans la liste box et d'appeler la fonction de recalcule de la nouvelle date en donnant en paramètre la valeur récupérée. 3°. La fonction "calculateNewTime" permet de recalculer la nouvelle date. Je n'explique pas plus là dessus, si tu tiens à comprendre son fonctionnement je te conseille vivement de regarder cette page web : http://www.commentcamarche.net/javascript/jsdate.php3 Une amélioration serait de faire un timer qui met à jour automatiquement toutes les x secondes la date du champ 'to' de manière à ce que si l'utilisateur reste 10 minutes sur ta page, cette date soit raffraichie. (sinon lors du recalcul tu aura un décalage :) ~ N'oubliez pas la balise "Résolu" lorsque votre problème est... résolu :) ~ |
Re,
<?php include "script.js"; ?> <select name="choix" onchange="setNewDate(this)"> <option value="1">Une heure avant</option> <option value="6">6 heures avant</option> <option value="0">Aujourd'hui</option> <option value="24">Les dernieres 24 heures</option> </select> </td> <td> De: <input id="from" type="Text" name="input12" value= ""> </td> <td> jusqu'a: <input id="to" type="Text" name="input13" value= ""> </td> <script language="javascript"> // --- Insert current date into 'to' input insertCurrentDate(); // --- Launch timer startTimer(); </script> La seule modification se situe dans la partie javascript du bas avec le lancement du timer : // --- Launch timer startTimer(); Le fichier 'script.js' :
<script language="javascript">
var currentDate = new Date();
/**
* Calculate new time in function of time parameter
*/
function calculateNewTime ( _additional_time_in_hours ){
// --- Check if input text "from" is present
if ( ! document.getElementById("from") ){
alert("Missing form data 'from' to calculate the new date");
return;
}
// --- Check if input text "to" is present
var toTime = null;
if ( ! document.getElementById("to") ){
alert("Missing form data 'to' to calculate the new date");
return;
}
// --- Retrieve 'to' value
else
toTime = document.getElementById("to").value;
// --- Calculate the new date only if input text "to" is filled
if ( toTime != null && toTime != "" ){
// --- Take current time as a reference to calculate the new time.
// --- An update would be to parse the value of the input text 'to' in order the user to be able to enter his own time
// --- instead of having current time forced
var newDate = new Date(currentDate.getTime());
// --- Del additional time
newDate.setHours(newDate.getHours()-_additional_time_in_hours);
document.getElementById("from").value =
newDate.getFullYear()+"-"+(newDate.getMonth()+1)+"-"+newDate.getDate()+" "+
newDate.getHours()+":"+newDate.getMinutes()+":"+newDate.getSeconds();
}
}
function setNewDate ( selectBox ){
calculateNewTime(selectBox.options[selectBox.options.selectedIndex].value);
}
/**
* Insert current timestamp into input text "to"
*/
function insertCurrentDate ( ){
if ( document.getElementById("to") )
document.getElementById("to").value =
currentDate.getFullYear()+"-"+(currentDate.getMonth()+1)+"-"+currentDate.getDate()+" "+
currentDate.getHours()+":"+currentDate.getMinutes()+":"+currentDate.getSeconds();
}
/**
* Timer to set automatically the current date into the input text 'to'
* and have the real date recalculated
*/
var tant = 0; // ---
function startTimer(){
tant = tant+1;
if (tant < 60 ) { // exemple:caler à 60 secondes (60*1000)
timerID = setTimeout("startTimer()",1000);
} else {
tant = 0;
// --- New date
currentDate = new Date();
// --- Display again
insertCurrentDate();
startTimer(); // Redémarre la boucle
}
}
</script>
La seule modif est l'ajout de la fonction 'startTimer' qui toutes les 60 secondes (modifiable), modifie la date courante et raffraichit le champ input 'to' avec cette nouvelle date.
~ N'oubliez pas la balise "Résolu" lorsque votre problème est... résolu :) ~ |