Discussion :

[dubitoph]

Bonjour,

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

Dans mon template :

Code html :

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
    <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 :

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

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.

[Toufik83]

Pourquoi ne pas le faire dans ton fichier twig avec form_widget ?

Code twig :

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

1
2
 
{{ form_widget(price.season, {value: "la_valeur_que_tu_veux" } ) }}

[dubitoph]

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 :

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

{% for season in unique_seasons %}

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



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.

[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 :

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

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

par :

Code :

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

$('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.

[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 html :

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

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.

[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.

[dubitoph]

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

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
 
// 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 );
 
});

[Toufik83]

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

Code twig :

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

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

[dubitoph]

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

Code html :

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
<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>

[Toufik83]

Ha ! tu vois bien qu'il y a plusieurs undefined dans le code html généré. Il faut d'abord corriger ça.

[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

[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 jquery :

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

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.

[dubitoph]

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 :

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

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

[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 jquery :

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

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

[dubitoph]

Merci pour ton jusqu’au boutisme

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 html :

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
        {% 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.

[dubitoph]

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 :

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

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 html :

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

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>

[Toufik83]

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

Code twig :

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

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 jquery :

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

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 twig :

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

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

Il faut l'attribuer un data-index aussi

Code twig :

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

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

[dubitoph]

Dans mon template, j'ai fait :

Code :

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

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

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

Un tout grand merci!

[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 html :

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

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

bonne structure :

Code html :

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

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

[dubitoph]

Ok, merci pour tes précieux conseils

J'ai donc modifié mon template comme suit :

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
 
...
    <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 %}    
...