Discussion :

[beegees]

Bonsoir tout le monde,

Je clone cet objet avec jQuery :

Code :

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

1
2
3
4
5
6
7
8
var selct = '';
 
            selct += '<div class="form-group col-md-3 id="btnRemove">';
            selct += '<br>';
            selct += '<div class="" style="margin-top:9px;padding-left: 15px;">';
            selct += ' <input type="button" class="btn  btn-danger remove_btn" id="her" value="-"><br>';
            selct += '</div>';
            selct += '</div>';

avec ce code :

Code :

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

$("#drug_div").clone().attr({'id': 'drug_div' + cpt}).appendTo('#countDrug') .after(selct); // Add field html

J'ai deux questions :

1- Comment je pourrais supprimer le clone après l'avoir clôné avec le code ci-dessus ?

2- J'essaie de lancer une fonction (enregistrée dans une variable) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var disable_option = $('#countHerb').on('change', 'select',function()
            {
                alert("dans disable");
                // enable all options 
                $('option[disabled]').prop('disabled', false);
                
                $('select').each(function() 
                {
                    $('select').not(this).find('option[value="' + this.value + '"]').prop('disabled', true); 
                });
            

            });

je l'appelle ci-dessous dans le code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
$(addBtn).click(function() {
            $(this).val("+"); // On met un getter sur l'input pour gerer le message d'erreure

            if(cpt < maxField) {
                $("#herb_div").clone().attr({'id': 'herb_div' + cpt}).appendTo('#countHerb') .after(selct); // Add field html
                cpt++; // Increment field counter
                disable_option();
            }else {
                $(this).val("Maximum 5 plantes").prop("disabled",true); // on desactive l'input +
            }
        });

Mais j'ai ce message d'erreur :

ReferenceError: disable_option is not defined

Pourtant, la fonction est créée avant l'appel...

Merci d'avance pour l'aide.

[Toufik83]

Bonjour,

Code :

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

var disable_option = $('#countHerb').on(....)

Là tu stock un objet jQuery dans ta variable et pas une fonction, si tu veux le faire, il faut mettre ceci :

Code :

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

1
2
 
var disable_option =function(){/*le code de la fonction ici*/}

Puis tu fais appel à la fonction dans le change comme ça ( et sans les parenthèses ):

Code :

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

1
2
 
$('#countHerb').on('change', 'select',disable_option);

Pour la question 1, je ne l'ai pas vraiment compris.

Tu veux supprimer tout le conteneur $("#drug_div").clone() ? pourquoi l'avoir ajouter alors ?

[beegees]

Bonjour Toufik,

Grand merci pour ta réponse rapide.

Tu as bien sûr raison, où ais-je la tête, là, j'avais juste un objet jQuery dans ma variable... merci.

Par contre, cela ne fonctionne toujours pas, je me demande si ce n'est pas parce que la fonctionne ne travaille sur l'évent change de ma liste déroulante ?

à partir de la ligne 128 :

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
$(document).ready(function()
	{
        var disable_option = function() 
        {
 
            $('#countHerb').on('change', 'select',function()
            {
                alert("dans disable");
                // enable all options 
                $('option[disabled]').prop('disabled', false);
 
                $('select').each(function() 
                {
                    $('select').not(this).find('option[value="' + this.value + '"]').prop('disabled', true); 
                });
 
 
            });
 
        }

Et je l'appelle à la ligne 177, mais sur un clic d'un bouton :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
$(addBtn).click(function() {
            $(this).val("+"); // On met un getter sur l'input pour gerer le message d'erreur

            if(cpt < maxField) {
                $("#herb_div").clone().attr({'id': 'herb_div' + cpt}).appendTo('#countHerb') .after(selct); // Add field html
                cpt++; // Increment field counter
                disable_option();
            }else {
                $(this).val("Maximum 5 plantes").prop("disabled",true); // on desactive l'input +
            }
        });

Pour le second problème, je t'explique, je pense que tu vas comprendre pourquoi je souhaite le retirer :

Je propose au visiteur de choisir une ou plusieurs plantes pour une recherche :



Il se peut que le visiteur décide de rechercher sur 3 plantes ou 2 plantes et donc de vouloir supprimer les clones qu'il a fait en cliquant sur le bouton.

L'idée est de par exemple pouvoir revenir à 3 plantes comme l'image ci-dessous :



Merci d'avance pour ton aide.

[Toufik83]

Bonjour,

Ce n'est pas comme ça, il faut l'écrire comme suite :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
$(document).ready(function(){
        var disable_option = function(){
                alert("dans disable");
                // enable all options 
                $('option[disabled]').prop('disabled', false);
 
                $('select').each(function(){
                    $('select').not(this).find('option[value="' + this.value + '"]').prop('disabled', true); 
                });
 
        };//fin function
       $('#countHerb').on('change', 'select',disable_option);
});//fin document.ready

Puis pour la question 1, tu peux supprimer le conteneur en cliquant sur le bouton moins "-" avec $.remove(), mais il va falloir le cibler à partir du bouton moins "-" sur lequel tu cliques.

Montre le code html d'un seul conteneur qui contient le select et le bouton "-" pour mieux t'aider...

[beegees]

Rebonjour Toufik,

Merci pour ta réponse.

Pour le problème n°1, ça fonctionne en effet beaucoup mieux, je t'en remercie.

Pour le 2e problème, supprimer une partie du site clonée, voici le code HTML généré (je dois modifier la première ligne qui est erronée) :

Code html :

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

1
2
3
4
5
6
7
<div class="form-group col-md-3 id=" btnremove"="">
<br>
<div class="" style="margin-top:9px;padding-left: 15px;"> 
<input type="button" class="btn  btn-danger remove_btn" id="her" value="-">
<br>
</div>
</div>

et ce code :

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
<div class="form-group col-md-6" id="herb_div1">
							<label class="form-check-label"><strong><h5>Plante *</h5></strong></label>
							<select name="herb[]" id="herb" class="form-control">
<option value="0" disabled="">Veuillez choisir une plante</option>
<option value="3" disabled="">Ailerer</option>
<option value="6">Audrey II</option>
<option value="7">Audrey III</option>
<option value="8" disabled="">Hibuscus</option>
<option value="9">n'importe quoi</option>
<option value="4" disabled="">Tea tree</option>`
<option value="5" disabled="">Testons pas nnnneeee</option>
</select>
 
 
                        </div>

Encore merci pour tout.

[Toufik83]

Bonjour,

D'après ce que je vois, tu as deux div sur chaque ligne, le premier contient le select et le deuxième contient le bouton "-".

Donc l'idée est de supprimer le div qui précède le parent du bouton "-" ET le parent du bouton sur lequel tu cliques (tu peux remplacer "body" par un conteneur statique):

Code :

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

1
2
3
4
5
 
$('body').on("click",'.remove_btn',function(){
   $(this).closest(".col-md-3").prev(".col-md-6").remove();//supprimer le div qui précède le parent du bouton "-"
   $(this).closest(".col-md-3").remove();//supprimer le div parent du bouton "-"
});

Fais attention aux id="btnremove" et id="her", car à chaque fois tu les clones, leurs id aussi sont clonés alors qu'un id doit être unique dans une page html.

à ta place j'utiliserai seulement des class.