Discussion :

[JujuPomme]

Bonjour à tous,

Je créer actuellement un tableau éditable. J'entends par là, qu'il récupère tout un tas d'information de ma BDD, qu'il me l'affiche. Chaque ligne peut-être ensuite éditée à l'aide d'une fenêtre modale.

Je récupère bien les informations liés à un input pour pré-remplir cette fenêtre modale, mais j'ai un problème sur les select. Je récupère bien la bonne valeur, mais impossible de le pré-remplir dans ma fenêtre modale.

Voici un peu de code : (Ce select là est principalement fait en PHP. Il a été fait par quelqu'un de l'entreprise, et marche très bien.)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
// combo fin
											$_combo_end = '</select>'."\n";
											// combo liste_types
											$_combo_types = '<select name="type" id="type" class="selectpicker form-control" style="width:100%;" required="true">'."\n";
											$_combo_types.= '<option class="none" value=""> - - - </option>'."\n";
											// combo liste sous-types
											$_combo_soustypes = '<select name="soustype" id="soustype" class="selectpicker form-control" style="width:100%;">'."\n";
											$_combo_soustypes.= '<option class="none" value=""> - - - </option>'."\n";
											// combo liste sous-sous-type
											$_combo_sousoustypes = '<select name="soussoustype" id="soussoustype" class="selectpicker form-control" style="width:100%;">'."\n";
											$_combo_sousoustypes.= '<option class="none" value=""> - - - </option>'."\n";
											// recuperation données
											$listeAction = $mobilecrm->getListeTypesAction( );
											//echo '<pre>';
											//print_r( $listeAction );
											//echo '</pre>';
											$niv1 = 1;
											$niv2 = 1;
											$niv3 = 1;
											if ( isset($listeAction) && !empty($listeAction) ) {
												foreach ( $listeAction as $type => $liste ) :
													$_combo_types.= '<option class="opt_'.$niv1.''.(isset($liste['ENFANTS'])?' parent':'').'" value="'.$type.'" title="'.$liste['NOM'].'">'.$liste['NOM'].'</option>'."\n";
													if ( isset($liste['ENFANTS']) ) {
														foreach ( $liste['ENFANTS'] as $soustype => $sousliste ) :
															$_combo_soustypes.= '<option class="p_'.$niv1.''.(isset($sousliste['ENFANTS'])?' parent':'').'" id="opt_'.$niv2.'" value="'.$type.'-'.$soustype.'" title="'.$sousliste['NOM'].'" style="display:none;">'.$sousliste['NOM'].'</option>'."\n";
															if ( isset($sousliste['ENFANTS']) ) {
																foreach ( $sousliste['ENFANTS'] as $soussoustype => $soussousliste ) :
																	$_combo_sousoustypes.= '<option class="p_'.$niv2.'" value="'.$type.'-'.$soustype.'-'.$soussoustype.'" title="'.$soussousliste['NOM'].'" style="display:none;">'.$soussousliste['NOM'].'</option>'."\n";
																$niv3++;
																endforeach;
															}
														$niv2++;
														endforeach;
													}
													$niv1++;
												endforeach;
												// on ferme les combos
												$_combo_types.= $_combo_end."\n";
												// affichage des combos
												// ---- types
												echo $_combo_types;
												// ---- soustypes
												echo '<div id="select_soustype" style="display:none;" >'."\n";
												echo '<label class="control-label" for="soustype">Sous-type :</label>'."\n";
												echo $_combo_soustypes;
												echo $_combo_end;
												echo '</div>'."\n";
												// ---- sousoustypes
												echo '<div id="select_soussoustype" style="display:none;">'."\n";
												echo '<label class="control-label" for="soussoustype">Sous-sous-type :</label>'."\n";
												echo $_combo_sousoustypes;
												echo $_combo_end;
												echo '</div>'."\n";
											}

Et voici le javascript correspondant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
editRow: function(row) {
				var values = row.val();
				console.log(values);
				var detail = noHtml(values.AC_DETAIL).trim();
				var date = values.AC_DATE_PREVU;
				var reg = new RegExp("[ ]+", "g");
				var tab = date.split(reg);
				
				$editor.find('#type').val(values.AC_TYPEACTION);
				$editor.find('#nom_action_id').val(values.AC_NOM_ACTION);
				$editor.find('#ac_codeinterlocuteur_dest').val(values.AC_UTILISATEUR_DEST);
				$editor.find('#dateDeb').val(tab[0]);
				$editor.find('#heureDeb').val(tab[1]);
				date = values.AC_DATEFIN;
				tab = date.split(reg);
				$editor.find('#dateFin').val(tab[0]);
				$editor.find('#heureFin').val(tab[1]);
				$editor.find('#detail_action_id').val(detail);
				$modal.modal('show');
				},

La ligne en rouge, me récupère bien la bonne valeur puisque dans la console, AC_TYPEACTION retourne ce que je souhaite. Il me manque l'initialisation au select...

Merci d'avance à tout intérêt porté à mon post !

Bonne journée à tous !

[-Rpass-]

Pour mettre la valeur par défaut d'un select, il faut ajouter l'attribut "selected" à la valeur correspondante

[JujuPomme]

Bonjour -Rpass-

Merci pour ton intérêt porté à ma question

J'entends bien que c'est quelque chose du genre : http://jsfiddle.net/xkqTR/

Mais dans mon cas, je bloque un peu au niveau de la technique plus que la compréhension...

[-Rpass-]

Ton code a l'air de fonctionner Qu'est-ce qui ne va pas ?

[JujuPomme]

C'est juste un fiddle à part ça hein

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$editor.find('#type').val(values.AC_TYPEACTION);

Mon values.AC_TYPEACTION n'est pas set lorsque j'ouvre ma fenêtre modale alors que dans ma console, il me récupère bien la bonne valeur.

Donc quelque chose comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var elem = document.getElementById('#type')
elem.value = .value = values.AC_TYPEACTION;

Devrait marcher non?

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$editor.find('#type')

?
c'est un id ???

tu utilises jquery ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var elem = document.getElementById('#type')

=>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var elem = document.getElementById('type')

[JujuPomme]

Très juste @grenouilleBizarre, j'avais pas fais attention à ça, je l'ai écris directement dans mon message !

Merci

Sinon dans l'esprit?

[JujuPomme]

Dans l'esprit ça marche pas.

Après un console.log(elem), j'obtiens :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 <select id="type_id" class="selectpicker form-control" required="true" style="width:100%;" name="type">

Code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
	var elem = document.getElementById('type_id');
				elem.value = values.AC_TYPEACTION;
				console.log(elem);
				$editor.find('#type_id').val(elem);

Alors que quand je console.log(values) , j'ai bien mon :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

AC_TYPEACTION : "MESSAGE"

Et du coup ce MESSAGE, j'aimerais le set dans un select lors de l'ouverture d'une fenêtre modale... :/

Merci encore pour le temps passé sur mon problème !

[SpaceFrog]

Dans l'esprit :

avec Jquery

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#type').val("bike')

en js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('type').value='bike'

quel est le problème ?

[JujuPomme]

Le problème est que mon select reste vide (voir mon post plus haut) et non pré-remplis avec la bonne valeur, alors que je la récupère correctement.

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$editor.find('#type_id').val(elem);

c'est supposé faire quoi ??
$editor c'est quoi ???

[JujuPomme]

$editor c'est ma fenêtre modale qui à pour but d'éditer (non, vraiment?) une ligne de mon tableau.

Via un bouton, quand je clique dessus, ma fenêtre modale apparaît avec un formulaire. Comme il s'agit de l'édition, je pré-remplit ce formulaire avec les informations de la ligne, ce qui me paraît jusque là, une utilisation logique d'une fonction d'édition.

J'arrive à pré-remplir les input, comme pour un nom, un prénom, une date... Mais quand il s'agit d'un select, je n'y arrive pas. Je récupère bien la bonne valeur de la ligne en ce qui concerne ce select, mais ce que je n'arrive pas, c'est à pré-remplir le select avec cette valeur justement.

[danielhagnoul]

Si ma boule de cristal fonctionne , alors je pense à : $editor.contents().find('#type_id').val(elem);.

[JujuPomme]

@danielhagnoul tu es sur que ta boule de cristal n'est pas fissurée?

Non sans rire, j'ai essayé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var elem = document.getElementById('type_id');
         elem.value = values.AC_TYPEACTION;
         console.log(elem);
	 $editor.contents().find('#type_id').val(elem);

Et ça marche pas...

Je reste donc toujours bloqué sur le même problème

Le console.log(elem) retournant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 <select id="type_id" class="selectpicker form-control" required="true" style="width:100%;" name="type">

[JujuPomme]

Mille merci à SpaceFrog qui a passé une grosse demi-heure à m'aidé à trouver la source du problème, je le remercie mille fois.

C'était pourtant pas si compliqué. Chaque option de mon select avec un attribut data-original-title, et c'est cet attribut que je devais set et non la value...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#type_id option[data-original-title="'+title+'"]').attr('selected',true);

Si ça peut aider...

Merci à tous de vous être penché sur mon problème !