Discussion :

[dubitoph]

Bonjour,

Dans un formulaire d'insertion d'annonces, l'utilisateur a la possibilité d'indiquer plusieurs périodes qui sont liée à un type de saison :



A chaque nouvelle saison choisie, j'ajoute automatiquement des champs pour l'encodage du prix et de la durée qui y correspondent sur le onblur du choix du type de saison :

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
55
56
57
58
59
60
61
62
63
64
65
 
$(document).ready(function() {
    $("body").on( 'blur', '.periodSeason',function() {
 
        var periods = $('.periodSeason').map(function(){
            if($(this).val()) {
                return $(this).val()
            }
          }).get();
 
          //alert($.inArray($(this).val(), periods));
          //alert($.inArray($(this).val(), periods));
 
        var nbOcc = 0;
 
        for (var i = 0; i < periods.length; i++) {
            if (periods[i] == $(this).val()) {
                nbOcc++;
            }
        }
 
        if (nbOcc < 2) {
 
            // Get the ul that holds the collection of prices
            collectionHolderPrices = $ ( 'ul.prices' );
 
            var $newLinkLiPrice = $ ( '<li></li>' )
 
            // add the "add a period" anchor and li to the periods ul
            collectionHolderPrices . append ( $newLinkLiPrice );
 
            // count the current form inputs we have (e.g. 2), use that as the new
            // index when inserting a new item (e.g. 2)
            collectionHolderPrices . data ( 'index' , collectionHolderPrices . find ( ':input' ). length );            
 
            // Get the data-prototype explained earlier
            var prototype = collectionHolderPrices . data ( 'prototype' );
 
            // get the new index
            var index = collectionHolderPrices . data ( 'index' );
 
            var newForm = prototype ;
            // You need this only if you didn't set 'label' => false in your photos field in AdvertType
            // Replace '__name__label__' in the prototype's HTML to
            // instead be a number based on how many items we have
            // newForm = newForm.replace(/__name__label__/g, index);
 
            // 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 "Add a Period" link li
 
            var $newFormLi = $ ( '<li></li>' ). append ( newForm );
            $newLinkLiPrice . before ( $newFormLi );
 
        }
 
    });
 
 
});

Tout fonctionne bien et les champs suivant sont correctement créés :



Ma question est de savoir comment donner une valeur par défaut à un des champs créés par ce script? Je désire que la valeur de la saison choisie se retrouve comme valeur par défaut dans le champ "season" du prix pour savoir à quelle saison le prix se rapporte.

Quelqu'un aurait une idée?

Merci d'avance pour votre aide.

[Toufik83]

pour attribuer une valeur à un champ input, on utilise souvent attr

Code :

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

1
2
3
4
5
6
 
$("id_ou_class_de_l_input").attr("value","ta_valeur_par_defaut");
//ou directement avec val() si l'input est de type text
$("id_ou_class_de_l_input").val("ta_valeur_par_defaut");
//et si c'est un <li>
$("id_ou_class_de_li").text("valeur_par_defaut");

[dubitoph]

Merci beaucoup. Le problème est que je sais pas où placer mon appel à cette fonction.

J'ai tenté de le faire à la fin de la fonction qui construit mes contrôles :

Code :

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

1
2
3
4
5
6
7
8
9
10
$(document).ready(function() {
    $("body").on( 'blur', '.periodSeason',function() {
...
        $( "#advert_prices_0_season" ).load( function () { 
            alert('ok');    
        });
 
    });
 
});

Ca ne fonctionne pas.

J'ai également tenté de faire un appel javascript directement depuis mon template :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
    <ul class= "prices" data-prototype= " {{ form_widget ( formAdvert.prices.vars.prototype )| e ( 'html_attr' ) }} " >
        {# iterate over each existing price #}
        {% for price in formAdvert.prices %}
            <li> 
 
                {{ form_row(price.price) }}
                {{ form_row( price.duration ) }}
                {{ form_row( price.season, {'attr': {'onchange': "alert('ok');" }}) }}
 
            </li>
        {% endfor %}
    </ul>

Mais ça ne va pas non plus.

J'avoue que je rame

[Toufik83]

difficile de dire quoi que ce soit sans voir le code html généré.

copie colle le code html (seulement celui de la première section)

[dubitoph]

Merci beaucoup pour ton aide.

Voici le code généré pour les périodes :

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
 
    <h4>Périodes</h4>
 
    <ul class= "periods" data-prototype= " &lt;div id&#x3D;&quot;advert_periods___name__&quot;&gt;&lt;div class&#x3D;&quot;form-group&quot;&gt;&lt;label for&#x3D;&quot;advert_periods___name___start&quot;&gt;Start&lt;&#x2F;label&gt;&lt;input type&#x3D;&quot;text&quot; id&#x3D;&quot;advert_periods___name___start&quot; name&#x3D;&quot;advert&#x5B;periods&#x5D;&#x5B;__name__&#x5D;&#x5B;start&#x5D;&quot; class&#x3D;&quot;js-datepicker-period form-control&quot; &#x2F;&gt;&lt;&#x2F;div&gt;&lt;div class&#x3D;&quot;form-group&quot;&gt;&lt;label for&#x3D;&quot;advert_periods___name___end&quot;&gt;End&lt;&#x2F;label&gt;&lt;input type&#x3D;&quot;text&quot; id&#x3D;&quot;advert_periods___name___end&quot; name&#x3D;&quot;advert&#x5B;periods&#x5D;&#x5B;__name__&#x5D;&#x5B;end&#x5D;&quot; class&#x3D;&quot;js-datepicker-period form-control&quot; &#x2F;&gt;&lt;&#x2F;div&gt;&lt;div class&#x3D;&quot;form-group&quot;&gt;&lt;label class&#x3D;&quot;&quot; for&#x3D;&quot;advert_periods___name___season&quot;&gt;Season&lt;&#x2F;label&gt;&lt;select id&#x3D;&quot;advert_periods___name___season&quot; name&#x3D;&quot;advert&#x5B;periods&#x5D;&#x5B;__name__&#x5D;&#x5B;season&#x5D;&quot; class&#x3D;&quot;periodSeason form-control&quot;&gt;&lt;option value&#x3D;&quot;&quot;&gt;Choisissez une saison&lt;&#x2F;option&gt;&lt;option value&#x3D;&quot;1&quot;&gt;Basse&lt;&#x2F;option&gt;&lt;option value&#x3D;&quot;2&quot;&gt;Moyenne&lt;&#x2F;option&gt;&lt;option value&#x3D;&quot;3&quot;&gt;Haute&lt;&#x2F;option&gt;&lt;option value&#x3D;&quot;5&quot;&gt;Top&lt;&#x2F;option&gt;&lt;&#x2F;select&gt;&lt;&#x2F;div&gt;&lt;&#x2F;div&gt; " >
                            <li> 
 
                <div class="form-group"><label for="advert_periods_0_start">Start</label><input type="text" id="advert_periods_0_start" name="advert[periods][0][start]" class="js-datepicker-period form-control" /></div>
                <div class="form-group"><label for="advert_periods_0_end">End</label><input type="text" id="advert_periods_0_end" name="advert[periods][0][end]" class="js-datepicker-period form-control" /></div>
                <div class="form-group"><label class="" for="advert_periods_0_season">Season</label><select id="advert_periods_0_season" name="advert[periods][0][season]" class="periodSeason form-control"><option value="">Choisissez une saison</option><option value="1">Basse</option><option value="2">Moyenne</option><option value="3">Haute</option><option value="5">Top</option></select></div>
 
            </li>
                    <li> 
 
                <div class="form-group"><label for="advert_periods_1_start">Start</label><input type="text" id="advert_periods_1_start" name="advert[periods][1][start]" class="js-datepicker-period form-control" /></div>
                <div class="form-group"><label for="advert_periods_1_end">End</label><input type="text" id="advert_periods_1_end" name="advert[periods][1][end]" class="js-datepicker-period form-control" /></div>
                <div class="form-group"><label class="" for="advert_periods_1_season">Season</label><select id="advert_periods_1_season" name="advert[periods][1][season]" class="periodSeason form-control"><option value="">Choisissez une saison</option><option value="1">Basse</option><option value="2">Moyenne</option><option value="3">Haute</option><option value="5">Top</option></select></div>
 
            </li>
                    <li> 
 
                <div class="form-group"><label for="advert_periods_2_start">Start</label><input type="text" id="advert_periods_2_start" name="advert[periods][2][start]" class="js-datepicker-period form-control" /></div>
                <div class="form-group"><label for="advert_periods_2_end">End</label><input type="text" id="advert_periods_2_end" name="advert[periods][2][end]" class="js-datepicker-period form-control" /></div>
                <div class="form-group"><label class="" for="advert_periods_2_season">Season</label><select id="advert_periods_2_season" name="advert[periods][2][season]" class="periodSeason form-control"><option value="">Choisissez une saison</option><option value="1">Basse</option><option value="2">Moyenne</option><option value="3">Haute</option><option value="5">Top</option></select></div>
 
            </li>
            </ul>

Cependant, lorsque j'affiche les sources de la page après voir indiqué une saison pour une période, après que la fonction suivante ait été appelée donc :

Code :

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

1
2
3
4
5
 
$(document).ready(function() {
    $("body").on( 'blur', '.periodSeason',function() {
...
}

dans les sources de la page, le code pour les nouveaux contrôles créés (ceux correspondant au prix), n'est pas généré. Pour le visualiser, je dois faire un clic droit sur un des contrôles, et choisir "Inspecter".

[dubitoph]

Etant donné la difficulté à mettre ceci en place avec du Javascript, d'autant qu'il faudrait également gérer la modification d'un type de saison dans les périodes, j'ai préféré scinder mon formulaire en deux et travailler en Php.