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.