Partage

Création d'une nouvelle case

(optimisation)

21 mai 2019 à 12:42:51

Bonjour, j'ai un petit problème pour optimiser mon JS. Voici le contexte : j'ai une page de mon site qui permet d'affecter des ressources à des métiers. Pour plus de simplicité j'ai créé un bouton "ajouter la ressource " qui ajoute une case en "readonly" avec l'id de la ressource. Cela permet d'ajouter plusieurs ressource en même temps. Le problème est le suivant : Je n'arrive pas à trouver le moyen de remplacer l'affichage de la "value" de ma nouvelle case.

Voici le code (il y a toute la page):

<html>
	<head>
		<title>Ajout de Ressource </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>


	<script>		
		selectionR = function (){
				//le code JS en question 
				console.log('coucou', $('#ressource').find('option:selected'));
				$('#ressource').find('option:selected').each(function(){
				if (!document.getElementById('r_'+ $(this).val()+'')) { $('#ma_selection').append('<input id="r_'+ $(this).val()+'" name="r_'+ $(this).val()+'" value="'+ $(this).val() + '" readonly><br>'); }
				alert($(this).val());
				});
			}
	</script>
	</head>
<form method="POST" action="index.php?uc=ajoutR&action=ressource">
<body>

<br>
<label>Metier</label>
	<select name='metier' id='metier'>
		<?php
			foreach( $lesMetiers as $unMetier){ 
				$num = $unMetier['code_metier'];
				$nom = $unMetier['nom_metier'];?>
				<option value="<?php echo $num ?>"><?php echo $nom ?></option>
				<?php
				}
				?></select>
<br><br><br>
<label>Service</label>
	<select name='service' id='service'>
		<?php	
			foreach( $lesServices as $unService){ 
				$num = $unService['code_service'];
				$nom = $unService['nom_service'];?>
				<option value="<?php echo $num ?>"><?php echo $nom ?></option>
				<?php
				}
				?></select>
<br><br><br>		
<label>Ressource</label><br>
<select name='ressource' id='ressource'>
		<?php				
				foreach( $lesRessources as $uneRessource){ 
				$num = $uneRessource['id_Res'];
				$nom = $uneRessource['nom_Res'];?>
				<option value="<?php echo $num ?>"><?php echo $nom ?></option>
				<?php
				}
				?>
//bouton qui permet d'ajouter la ressource
		<input type="button" value="ajouter la ressource" onclick="selectionR()">
			</select>
		<p id="ma_selection"></p>
		
	<input type="submit" value="Valider" name="valider">
    <input type="reset" value="Annuler" name="annuler">
			
		
</body>
</html>

Si il y a des idées je suis preneur ^^

piero5673

21 mai 2019 à 15:18:00

Bonjour,

Essaye de récupérer la valeur du select plutôt que la valeur d'une option. Je te conseille de regarder les bases du html au passage, celui présenté est invalide.

Tardoss

21 mai 2019 à 16:24:53

Merci pour ta réponse

2 choses à dire :

1- je doit récupérer l'id de la ressource pour ma base de données donc dans ma tête il faut que je récupère les 2.

2-"Je te conseille de regarder les bases du html au passage, celui présenté est invalide." Quelle(s) erreur(s) j'ai pu faire car je ne vois pas du tout.

Je vais regarder de nouveau les bases du HTML et j'éditerai si j'ai trouver pour le dernier point

piero5673

21 mai 2019 à 17:36:29

Le select a une valeur, celle de l'option sélectionnée.

Il faut mettre ton formulaire dans le body, et fermer la balise.

Tardoss

22 mai 2019 à 0:26:55

Bonsoir,

J'ai essayé mais j'ai échoué :/

j'ai tenté 2 choses que voici :

selectionR = function (){
	  var monSelect = document.getElementById($(this).val()).value;
						 console.log('coucou', $('#ressource').find('option:selected'));
						 $('#ressource').find('option:selected').each(function(){
						 if (!document.getElementById('r_'+ $(this).val()+'')) { $('#ma_selection').append('<input id="r_'+ $(this).val()+'" name="r_'+ $(this).val()+'" value="'+ monSelect+ '" readonly><br>'); }
						 alert($(this).val());
						 });
				 }

	selectionR = function (){
	  var monSelect = document.getElementById($(this).val()).options[document.getElementById($(this).val()).selectedIndex].text
						 console.log('coucou', $('#ressource').find('option:selected'));
						 $('#ressource').find('option:selected').each(function(){
						 if (!document.getElementById('r_'+ $(this).val()+'')) { $('#ma_selection').append('<input id="r_'+ $(this).val()+'" name="r_'+ $(this).val()+'" value="'+ monSelect+ '" readonly><br>'); }
						 alert($(this).val());
						 });
				 }

Donc j'ai essayé de récupérer la valeur du select et de la mettre dans une variable et mettre la dite variable dans le value.

Et pour "Il faut mettre ton formulaire dans le body, et fermer la balise." mea culpa je n'avais pas relu cette partie la du code.

p.s:J'ai commencer Javascript il y a 2 mois donc forcement j'ai pas vraiment la logique derrière ^^.

piero5673

22 mai 2019 à 11:50:30

déjà tu mélange jquery et les sélecteurs natifs, c'est pas clair. Ca représente quoi le this dans ta fonction ?

voilà la doc avec un magnifique exemple de select : http://api.jquery.com/val/ .

Pas d'input dans un select aussi.

Et il faut déclarer ta variable aussi (const selectionR par exemple).

Et dans un mode parfait tu n'utilise pas d'inline.

-
Edité par piero5673 22 mai 2019 à 11:53:40

Tardoss

22 mai 2019 à 14:38:13

Bonjour,

1.le this représente la value de l'option de cette partie php

<select name='ressource' id='ressource'>
		<?php
				foreach( $lesRessources as $uneRessource){
				$num = $uneRessource['id_Res'];
				$nom = $uneRessource['nom_Res'];?>
				<option value="<?php echo $num ?>"><?php echo $nom ?></option>
				<?php
				}
				?>
		<input type="button" value="ajouter la ressource" onclick="selectionR()">
			</select>

2. Je dois avouer que je suis perdu avec le lien que tu ma donné. Je vois pas vraiment quoi utiliser pour mon code

3. Ok compris mais je ne vis pas par quoi remplacer. Une balise form me semble peu judicieux.

4. "Et dans un mode parfait tu n'utilise pas d'inline."2 choses : a.J en'ai pas d'inline dans mon code (sauf si je suis aveugle). b. Pourquoi?

5. Je vais poser une question pour savoir si c'est possible

Donc imaginons que j'attribue à un métier la ressource ordinateur. La valeur de l'option dans la liste déroulante est donc ceci :

<option value="<?php echo $num ?>
// qui est 1 dans ma base de données
"><?php echo $nom
// qui est ordinateur 
?></option>

Il y aurait il un moyen de récupérer la valeur de la value et ce qui a entre les balises option en JS ou ceci est impossible?

6. je vais essayé de comprendre comment bien utiliser une const selectionR.

piero5673

22 mai 2019 à 15:10:03

Évite d'utiliser this quand tu ne sais pas ce que c'est, ça peut être un peu n'importe quoi et comme le inline, ça rends le code moins maintenable. Dans ton code c'est plusieurs choses (à voir ce que c'est exactement avec des console.log), je doute que ce soit tout le temps ton option et jamais sa valeur.

Normalement c'est comme ça que l'on récupère la valeur d'un select.

Un form dans un select ça n'existe pas non plus. Il n'y a que des option dans un select.

onclick="selectionR()" ceci c'est du inline. Ca marche mais ça rends le code moins maintenable. Imagine que tu as 1000 onclick comme cela et que tu change le nom de ta fonction, c'est la galère pour aller tout changer et ne rien oublier.

Oui, c'est possible, mais ça veut dire que tu vas aller chercher dans le DOM. En général, tu sais que 1 = ordinateur.

Avant, pour déclarer une variable en js on utilisait le mot clef var. Aujourd'hui, on peut utiliser var, let (pour les variables qui vont être modifiées) et const (pour les variables qui ne vont pas être modifiées).

Tardoss

27 mai 2019 à 2:30:16

Merci pour cette réponse détaillé : )

Je changerai le onclick="selectionR()" plus tard

J'ai donc modifié ma fonction mais quand je clique sur mon bouton rien ne se passe? J'ai mis des alertes mais aucune ne s'active. Une idée?

<script>
	selectionR = function (){

//recupère l'id de la case
	  var let id = document.getElementById('ressource');
//recupère le texte de la case
		 var let libelle = id.innerText || id.textContent;
		 alert(id);
		 alert(libelle);
						 console.log('coucou', $('#ressource').find('option:selected'));
						 $('#ressource').find('option:selected').each(function(){
						 if (!document.getElementById('r_'+id+'')) { $('#ma_selection').append('<input id="r_'+id+'" name="r_'+ libelle+'" value="'+ libelle+ '" readonly><br>'); }
						 alert(id);
						 alert(libelle);
						 });
				 }
	</script>

-
Edité par Tardoss 27 mai 2019 à 2:30:36

piero5673

28 mai 2019 à 2:33:18

Essaye ça :

<script>
const $res = $('#ressource');

function selectionR (){
  console.log($res.val());
}
</script>

<select name='ressource' id='ressource' multiple>
        <?php
                foreach( $lesRessources as $uneRessource){
                $num = $uneRessource['id_Res'];
                $nom = $uneRessource['nom_Res'];?>
                <option value="<?php echo $num ?>"><?php echo $nom ?></option>
                <?php
                }
                ?>
</select>

<input type="button" value="ajouter la ressource" onclick="selectionR()">

Lartak

28 mai 2019 à 11:08:23

Bonjour.

La ligne 5 est fausse, soit tu utilises var ou alors let.

Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.

AliasDmc

28 mai 2019 à 20:14:42

Bonjour Tardoss,

Voila quelques exemples en espérant avoir compris ton problème :

https://codepen.io/Zonecss/pen/zQLMao

Découvrez les Css avec la zonecss.fr