Discussion :

[dubitoph]

Bonjour,

Dans un formulaire, je permets la création d'un nouveau prix lié à une durée spécifique de manière dynamique en cliquant sur un bouton "Ajouter" :

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
 
                {# For each missing duration for the season, adding a button to add the price for these durations  #}
                {% set seasonName = season.season %}
 
                {% for configuredDuration in configuredDurations %}
 
                    {% if missingDurations[seasonName] is defined and configuredDuration in missingDurations[seasonName] %}                        
 
                        {# Don't changing the id because it's used in Jquery #}    
                        <button type="button" id="btn-add_{{ season.id }}_{{ configuredDuration }}" class="btn-add">
                            Ajouter {{configuredDuration}}
                        </button>
 
                    {% else %}                        
 
                        {# Don't changing the id because it's used in Jquery #}    
                        <button type="button" id="btn-add_{{ season.id }}_{{ configuredDuration }}" class="btn-add" style="display: none">
                            Ajouter {{configuredDuration}}
                        </button>
 
                    {% endif %}
 
                {% endfor %}

Ce qui donne visuellement ceci, par exemple :



Au moment du clic sur le bouton "Ajouter", les inputs nécessaires sont bien créés. Egalement, j'affecte un id au bouton "Supprimer cette durée" créé dynamiquement au cas où l'utilisateur s'était trompé :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
$('.btn-add') . on ( 'click' , function ( e ) {
...
    $( this ).toggle();
 
    //Id's affectation to the remove button
    var idButtonRemove = idButton.replace('add', 'remove');
    var btnRemove = $ ( "#" + idParent + " li:last button" );
    btnRemove.attr('id', idButtonRemove);
});

Ce qui, par exemple, donne ceci :



Avec cet HTML généré pour le bouton "Supprimer cette durée" :

Code :

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

<button type="button" class="btn-remove" id="btn-remove_1_Long week-end">Supprimer cette durée</button>

Le bouton "Ajouter" correspondant à la durée qui vient d'être créée est bien caché. Cependant, si l'utilisateur clique sur "Supprimer cette durée", je voudrais alors que le bouton "Ajouter" correspondant à la durée (ré)apparaisse. Pour ce faire, j'ai donc fait ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
$('body').on('click',".btn-remove",function(){
 
    $( this ).parent().remove();
 
    //Showing the add button for the deleted duration
    var idButtonAdd = $( this ).attr('id').replace('remove', 'add');
 
    //$( '#' + idButtonAdd + '' ).show();
    $( '#' + idButtonAdd + '' ).toggle();
 
});

L'id du bouton ("idButtonAdd ") est bien construit mais le bouton ne se ré-affiche pas.

Quelqu'un aurait une idée sur la provenance du problème?

Merci d'avance pur votre aide.

[Toufik83]

Salut,
Je vois bien que tu supprime le parent du bouton avec la ligne :

Code js :

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

1
2
 
   $( this ).parent().remove();

Quand tu supprime un parent, tu supprime aussi son contenu (ses éléments enfants)

Si tu mets ça, toujours le même problème ?

Code js :

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

1
2
3
4
5
6
7
8
9
10
 
$('body').on('click',".btn-remove",function(){
var idButtonAdd = $( this ).attr('id').replace('remove', 'add');
 
  $(this)
  .attr('id', idButtonAdd)
  .toggle() //pas de point virgule ici
  .parent().remove();//la suppression ici pose problème !
 
});

[dubitoph]

Bonjour,

Merci beaucoup pour ton aide toujours aussi pertinente !

Effectivement, honte à moi, le problème provient certainement du fait que le bouton fait partie de la div parente qui est supprimée. J'ai tenté ton approche, mais ça ne résout pas mon problème, car le bouton, même s'il est ré-affiché, est supprimé après coup.

EDIT : j'avais oublié de commenter la ligne

Code :

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

$( this ).parent().remove();

lors de l'essai. En faisant :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
$('body').on('click',".btn-remove",function(){
 
    //$( this ).parent().remove();
 
    //Showing the add button for the deleted duration
    var idButtonAdd = $( this ).attr('id').replace('remove', 'add');
 
    //$( '#' + idButtonAdd + '' ).show();
    //$( '#' + idButtonAdd + '' ).toggle();
    $( this ).attr('id').replace('remove', 'add').toggle()//pas de point virgule ici
    .parent().remove();
 
});

le remove ne s'effectue plus et j'ai cette erreur :

createPricesAdvert.js:67 Uncaught TypeError: $(...).attr(...).replace(...).toggle is not a function
at HTMLButtonElement.<anonymous> (createPricesAdvert.js:67)
at HTMLBodyElement.dispatch (jquery.js:5183)
at HTMLBodyElement.elemData.handle (jquery.js:4991)

[Toufik83]

A mon avis, il faut ajouter un bouton "Modifier" au cas où l'utilisateur se trompe, et quand il clic sur ce bouton les input type="text" devient immédiatement des <select> contenant les choix possibles (pour éviter les erreurs).

Edit: concernant le remove, désolé, je n'ai pas fait attention et j'ai rectifié ma réponse plus haut.

[dubitoph]

Je viens de vérifier le code html généré pour toute une <div id="divSeason_x" data-index="x"> et il est temps que j'aille me coucher : le parent du bouton "Supprimer cette durée" est un <li> tandis que celui des boutons "Ajouter" est bien la <div id="divSeason_x" data-index="x"> :

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<div id="divSeason_2" data-index="2">
 
    <ul class="prices" data-prototype="  ">                 
 
		<li>
 
			<label class="foo" for="prices_advert_prices_1_price">Prix</label>                                
            <input type="number" id="prices_advert_prices_1_price" name="prices_advert[prices][1][price]" class="form-control" value="500">
            <label class="foo" for="prices_advert_prices_1_duration">Durée</label>
            <input type="text" id="prices_advert_prices_1_duration" name="prices_advert[prices][1][duration]" readonly="readonly" class="form-control" value="Semaine">
            <label class="foo" for="prices_advert_prices_1_season">Saison</label>
            <select id="prices_advert_prices_1_season" name="prices_advert[prices][1][season]" readonly="readonly" class="form-control">
 
				<option value="1">Basse</option>
				<option value="2" selected="selected">Moyenne</option>
				<option value="3">Haute</option>
				<option value="4">Top</option>
 
			</select>
 
            <button type="button" class="btn-remove" id="btn-remove_2_Semaine">
                Supprimer cette durée
            </button>
        </li>      
    </ul>
 
    <li> 
 
		<div id="prices_advert_prices_2">
 
			<div class="form-group">
 
				<label for="prices_advert_prices_2_price">Price</label>
				<input type="number" id="prices_advert_prices_2_price" name="prices_advert[prices][2][price]" class="form-control">
 
			</div>
			<div class="form-group">
 
				<label for="prices_advert_prices_2_duration">Duration</label>
				<input type="text" id="prices_advert_prices_2_duration" name="prices_advert[prices][2][duration]" readonly="readonly" class="form-control">
 
			</div>
			<div class="form-group">
 
				<label class="" for="prices_advert_prices_2_season">Season</label>
				<select id="prices_advert_prices_2_season" name="prices_advert[prices][2][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" id="btn-remove_2_Week-end">Supprimer cette durée</button>
 
	</li>
	<button type="button" id="btn-add_2_Week-end" class="btn-add" style="display: none;">
        Ajouter Week-end
    </button>
	<button type="button" id="btn-add_2_Long week-end" class="btn-add">
        Ajouter Long week-end
    </button>
	<button type="button" id="btn-add_2_Semaine" class="btn-add" style="display: none">
        Ajouter Semaine
    </button>
 
</div>

Donc, je ne comprends pas le souci

Par contre, en vérifiant le HTML, j'ai trouvé un autre souci que je dois régler : j'ai des <li> qui sont générés en dehors des balises <ul></ul>. Cependant, je ne pense pas que cela a une incidence sur le comportement du Jquery.

[Toufik83]

haaa oui! le dernier li est généré en dehors de l'ul, il faut corriger ça sinon le document ne sera pas valide par rapport aux normes W3C.