Modifier la valeur d'un select créé par Jquery

Version imprimable

Bonjour,

Dans un formulaire d'encodage de prix, de nouveaux prix peuvent être ajoutés à la demande via un bouton :

Dans mon template :

Code:

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
    <ul class= "prices" data-prototype= " {{ form_widget ( formPricesAdvert.prices.vars.prototype )| e ( 'html_attr' ) }} " >
 
        {% for season in unique_seasons %}
 
            {% set i = 0 %}
 
            <h4>Saison {{ season.season }}</h4>
 
            <div id= "divSeason_{{ idsSeasons[i] }}">
 
                {% for price in formPricesAdvert.prices %}                
 
                    {% if idsSeasons[i] == season.id %}
 
                        <li>
                            {{ form_label(price.price, 'Prix', {'label_attr': {'class': 'foo'}}) }}
                            {{ form_errors(price.price) }}
                            {{ form_widget(price.price) }}
 
                            {{ form_label(price.duration, 'Durée', {'label_attr': {'class': 'foo'}}) }}
                            {{ form_errors(price.duration) }}
                            {{ form_widget(price.duration) }}
 
                            {{ form_label(price.season, 'Saison', {'label_attr': {'class': 'foo'}}) }}
                            {{ form_errors(price.season) }}
                            {{ form_widget(price.season) }}
 
                            <button type="button" class="btn-remove">
                                Supprimer cette durée
                            </button>
                        </li>
 
                    {% endif %}
 
                    {% set i = i + 1 %}
 
                {% endfor %}
 
                <button type="button" class="btn-add">
                    Ajouter durée
                </button>
 
            </div>
 
        {% endfor %}
 
    </ul>

Dans mon fichier js :

Code:

1
2
3
$('.btn-add') . on ( 'click' , function ( e ) {
Je crée les différents éléments repris dans le data-prototype de mon template
});

Tout se passe correctement pour la création. Cependant, lors de celle-ci, je voudrais attribuer une valeur à mon select {{ form_widget(price.season) }}. Et là, malgré mes nombreuses recherches, je sèche car je ne parviens pas à accéder aux différents éléments (dont ce select) qui viennent d'être créés.

Quelqu'un aurait une piste?

Merci d'avance pour votre aide.

20/02/2019, 16h38
Toufik83
Pourquoi ne pas le faire dans ton fichier twig avec form_widget ?
Code:

1 2 {{ form_widget(price.season, {value: "la_valeur_que_tu_veux" } ) }}
20/02/2019, 18h08
dubitoph

1 pièce(s) jointe(s)

Bonjour et merci pour tes nombreuses aides :) !

Ce n'est pas possible car les select peuvent avoir une valeur différente, en fonction du passage dans la boucle for() :

Code:

{% for season in unique_seasons %}

. Voici ce que ça donne au niveau du formulaire :

Pièce jointe 451731

Le bouton "Ajouter une durée" se retrouve en fin de la liste des prix correspondant à une saison et permet d'ajouter un prix qui contient 3 input : le prix, la durée et la saison. Je voudrais pousser la valeur de la saison correspondante dans le select y afférant car celui-ci est en readonly afin d'éviter des erreurs.

En d'autre termes, quand l'utilisateur clique sur le bouton "Ajouter une durée" dans la liste des prix de la Saison basse", je voudrais pousser l'id de la saison basse dans le select correspondant à la saison. Idem pour la saison moyenne, la saison haute et la saison top.
20/02/2019, 19h53
Invité

Bonjour,

les boutons '.btn-add' ne sont pas présents dans le DOM au chargement de la page.

Il faut "accrocher" l'action à un élément PRESENT.

Remplace :

Code:

$('.btn-add') . on ( 'click' , function ( e ) {

par :

Code:

$('body').on( 'click' , '.btn-add', function ( e ) {

N.B. Au lieu de $('body')...., il est recommandé de l'accrocher au plus proche parent *. (ex. : $('form').... )

* PRESENT dans le DOM au chargement de la apge.
20/02/2019, 21h13
dubitoph
Merci beaucoup pour ton aide. Cependant, je pense qu'on ne s'est pas bien compris : le clic sur le bouton '.btn-add' fonctionne correctement car il est présent dans la DOM via ceci dans mon template :
Code:

1 2 3 <button type="button" class="btn-add"> Ajouter durée </button>
L'action crée bien les 3 inputs attendus. Cependant, ce que je voudrais faire, c'est donner une valeur à un de ces trois inputs, valeur qui va varier en fonction de certains critères.
21/02/2019, 12h46
Toufik83

Donc les 3 inputs dont tu as parlé sont crées dynamiquement avec javascript, ben il fallait montrer le code js et pas twig.
Il faut voir le code exécuté au moment du clic sur .btn-add.

Ok, merci. Voici le code correspondant à l'ajout :

Code:

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
 
// Keep count of how many elements price have been added
var collectionHolderPrices;
 
var parentDiv;
 
$('.btn-add') . on ( 'click' , function ( e ) {
 
    var collectionHolderPrices = $( this ).parent();
 
    // Get the data-prototype
    var prototype = $ ( 'ul.prices' ) . data ( 'prototype' );
 
    // get the new index
    var index = collectionHolderPrices . data ( 'index' );
 
    var newForm = prototype ;
 
    // Replace '__name__' in the prototype's HTML to
    // instead be a number based on how many items we have
    newForm = newForm . replace ( /__name__/g , index );
 
    // increase the index with one for the next item
    collectionHolderPrices . data ( 'index' , index + 1 );
 
    // Display the form in the page in an li, before the "Ajouter une durée" button 
    var $newFormLi = $ ( '<li></li>' ). append ( newForm );
    var $deletePriceButton = $ ( '<button type="button" class="btn-remove" >Supprimer cette durée</button>' );
    $newFormLi. append ( $deletePriceButton );
    $( this ) . before ( $newFormLi );
 
});

Cet attribut data-prototype de ul.prices donne quoi en html ?
Code:

1 2 data-prototype= " {{ form_widget ( formPricesAdvert.prices.vars.prototype )| e ( 'html_attr' ) }} "

Voici les sources générées lorsqu'on clique sur le bouton "Ajouter une durée" :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<li> 
	<div id="prices_advert_prices_undefined">
		<div class="form-group">
			<label for="prices_advert_prices_undefined_price">Price</label>
			<input type="number" id="prices_advert_prices_undefined_price" name="prices_advert[prices][undefined][price]" class="form-control">
		</div>
		<div class="form-group">
			<label for="prices_advert_prices_undefined_duration">Duration</label>
			<input type="text" id="prices_advert_prices_undefined_duration" name="prices_advert[prices][undefined][duration]" readonly="readonly" class="form-control">
		</div>
		<div class="form-group">
			<label class="" for="prices_advert_prices_undefined_season">Season</label>
				<select id="prices_advert_prices_undefined_season" name="prices_advert[prices][undefined][season]" readonly="readonly" class="form-control">
					<option value="1">Basse</option>
					<option value="2">Moyenne</option>
					<option value="3">Haute</option>
					<option value="4">Top</option></select>
		</div>
	</div> 
	<button type="button" class="btn-remove">Supprimer cette durée</button>
</li>

21/02/2019, 13h58
Toufik83

Ha ! tu vois bien qu'il y a plusieurs undefined dans le code html généré. Il faut d'abord corriger ça.
21/02/2019, 14h01
dubitoph

Ok, je ne savais pas que ça pouvait avoir un impact. Cependant, je ne sais toujours pas comment faire du fait que je ne sais pas comment accéder à ces éléments :?
21/02/2019, 14h10
Toufik83
Pour que tu ne te bloques pas à cette étape, tu peux faire ceci pour modifier l'option sélectionnée dans le dernier <select> que tu viens de créer, en utilisant le selecteur :last.
Code:

1 2 $ ( 'ul.prices li:last select' ).val("3");//pour la saison haute par exemple
Mais il faut absolument corriger le générateur de l'html, undefined veux dire qu'il y a une variable indéfinie dans ton code.
21/02/2019, 14h36
dubitoph

1 pièce(s) jointe(s)
Je te remercie beaucoup pour ton temps et ton aide.

J'ai modifié ton code qui m'a bien aidé de cette manière pour aller chercher le bon select :
Code:

1 2 $ ( "#" + $(this).parent().attr('id') + " li:last select" ).val("3");
Tout à l'air de fonctionner!

EDIT : l'image jointe n'est pas correcte mais je ne parviens pas à la supprimer
21/02/2019, 14h44
Toufik83
D'accord mais si tu mets un console.log("id parent :"+$(this).parent().attr('id')), tu vois toujours undefined dans l'id?

Il y a un autre moyen pour accéder à ton select
Code:

1 2 $newFormLi. append ( $deletePriceButton ).find( 'select' ).val( '3' );

Merci pour ton jusqu’au boutisme :D

J'ai peut-être une piste pour le problème des undifined : j'ai remarqué que l'id des différentes divSeason_x n'est pas correctement incrémenté dans le code twig suivant :

Code:

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
        {% for season in unique_seasons %}
 
            {% set i = 0 %}
 
            <h4>Saison {{ season.season }}</h4>
 
            <div id= "divSeason_{{ idsSeasons[i] }}">
 
                {% for price in formPricesAdvert.prices %}                
 
                    {% if idsSeasons[i] == season.id %}
 
                        <li>
                            {{ form_label(price.price, 'Prix', {'label_attr': {'class': 'foo'}}) }}
                            {{ form_errors(price.price) }}
                            {{ form_widget(price.price) }}
 
                            {{ form_label(price.duration, 'Durée', {'label_attr': {'class': 'foo'}}) }}
                            {{ form_errors(price.duration) }}
                            {{ form_widget(price.duration) }}
 
                            {{ form_label(price.season, 'Saison', {'label_attr': {'class': 'foo'}}) }}
                            {{ form_errors(price.season) }}
                            {{ form_widget( price.season ) }}
 
                            <button type="button" class="btn-remove">
                                Supprimer cette durée
                            </button>
                        </li>
 
                    {% endif %}
 
                    {% set i = i + 1 %}
 
                {% endfor %}
 
                <button type="button" class="btn-add">
                    Ajouter durée
                </button>
 
            </div>
 
        {% endfor %}

C'est toujours "divSeason_1" qui est généré au lieu de "divSeason_1", "divSeason_2", "divSeason_3" et "divSeason_4", correspondant à chacune des saisons.

Je me mets donc à la recherche de l'erreur qui doit sans doute se trouver dans mon tableau "idsSeasons" qui reprend les ids des saisons pour lesquelles l'utilisateur doit fournir un prix.

J'ai réglé mon problème d'incrémentation de l'id des "divSeason_x" et j'ai finalisé l'affectation du select de la saison pour que la valeur soit calculée en fonction de la saison pour laquelle la durée doit être ajoutée :
Code:

1 2 3 var idSeason = $(this).parent().attr('id').substr(-1); $ ( "#" + $(this).parent().attr('id') + " li:last select" ).val(idSeason);
Les sources générées contiennent malheureusement toujours des undifined :
Code:

1 2 3 4 5 <select id="prices_advert_prices_undefined_season" name="prices_advert[prices][undefined][season]" readonly="readonly" class="form-control"> <option value="1">Basse</option><option value="2">Moyenne</option> <option value="3">Haute</option> <option value="4">Top</option> </select>

les 3 inputs sont le contenu de l'attribut data-prototype de ul.prices
Code:

1 2 data-prototype= " {{ form_widget ( formPricesAdvert.prices.vars.prototype )| e ( 'html_attr' ) }} "
Je crois avoir trouver l'erreur de "undefined" généré en html.

Le problème c'est que tu essaie de récupérer le data-index de la div parente du bouton btn-add
Code:

1 2 3 4 5 var collectionHolderPrices = $( this ).parent(); var prototype = $ ( 'ul.prices' ) . data ( 'prototype' ); var index = collectionHolderPrices . data ( 'index' );//ici console.log("index :"+index);//normalement si tu mets ça ici, ça devrai renvoyer undefined, non ?
par-contre la div parente du bouton n'a pas d'attribut "data-index" au moment de la génération dans twig
Code:

1 2 <div id= "divSeason_{{ idsSeasons[i] }}">
Il faut l'attribuer un data-index aussi
Code:

1 2 <div id= "divSeason_{{ idsSeasons[i] }}" data-index="{{ idsSeasons[i]}}">

21/02/2019, 16h56
dubitoph

Dans mon template, j'ai fait :

Code:

<div id= "divSeason_{{ season.id }}" data-index="{{ season.id }}">

Et de fait, maintenant, il n'y a plus de undifined.

Un tout grand merci!
21/02/2019, 17h00
Toufik83
Attention aussi a la structure html générée
un div ne peut pas être inséré directement dans un ul, parce que le code ne sera pas valide par rapport aux normes W3C.
mauvaise structure :
Code:

1 2 3 4 5 <ul> <div></div> <li></li> </ul>
bonne structure :
Code:

1 2 3 4 5 6 7 <ul> <li> <div></div> </li> <li></li> </ul>

Ok, merci pour tes précieux conseils ;)

J'ai donc modifié mon template comme suit :

Code:

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
 
...
    <h3>Prix</h3>
 
        {% for season in unique_seasons %}
 
            <h4>Saison {{ season.season }}</h4>
 
            <div id= "divSeason_{{ season.id }}" data-index="{{ season.id }}">
 
                <ul class= "prices" data-prototype= " {{ form_widget ( formPricesAdvert.prices.vars.prototype )| e ( 'html_attr' ) }} " >
 
                    {% set i = 0 %}
 
                    {% for price in formPricesAdvert.prices %}                
 
                        {% if idsSeasonsPrices[i] == season.id %}
 
                            <li>
                                {{ form_label(price.price, 'Prix', {'label_attr': {'class': 'foo'}}) }}
                                {{ form_errors(price.price) }}
                                {{ form_widget(price.price) }}
 
                                {{ form_label(price.duration, 'Durée', {'label_attr': {'class': 'foo'}}) }}
                                {{ form_errors(price.duration) }}
                                {{ form_widget(price.duration) }}
 
                                {{ form_label(price.season, 'Saison', {'label_attr': {'class': 'foo'}}) }}
                                {{ form_errors(price.season) }}
                                {{ form_widget( price.season ) }}
 
                                <button type="button" class="btn-remove">
                                    Supprimer cette durée
                                </button>
                            </li>
 
                        {% endif %}
 
                        {% set i = i + 1 %}
 
                    {% endfor %}
 
                </ul>
                <button type="button" id="btn-add_{{ season.id }}_8" class="btn-add">
                    Ajouter durée
                </button>
 
            </div>
 
        {% endfor %}    
...

Je ne suis pas sûr que tu aies bien compris mon dernier post.
Ta page twig doit généré un html structuré comme ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
    <ul class= "prices" data-prototype= "..." >
 
           <li><!-- on est dans le ul.prices, tu ne peux pas mettre ni h4 ni div ni quoi que se soit directement dans un ul, appart un li-->
                <h4>Type de saison </h4>
           </li>   
            <li>
                 <div id="..." data-index="...">
                      <ul><!-- Ici tu ajoute un ul ou ol, pour qu'ensuite tu insert le li qui suit -->
                             <li>
                                  <!-- les 3 inputs générés ici -->
                                  <!-- Pas la peine de mettre type="button", le tag <button> est suffisant -->
                                  <button class="btn-remove">Supprimer cette durée</button>
                              </li>
                       </ul>
                       <button  class="btn-add"> Ajouter durée </button>
 
                  </div>
             </li>
    </ul>