Discussion :

[karpe]

Bonjour à tous,

Je génère une liste de sous catégories. Je souhaite masquer la div conteneur de catégorie lorsque je fais une action sur le bouton de suppression.

Dans mon exemple ci-dessous, je souhaite masquer la div <div id="SSCform-group" rel="271">.
lorsque je clique sur le bouton

Code html :

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

<button type="button" class="btn btn-primary removeSousCategoriesBtn" id="271" data-loading-text="Loading..." onclick="removeSousCategories('271')"> <i class="glyphicon glyphicon-ok-sign"></i> Supprimer</button>

je tâche de récupérer l'identifiant de ma div souhaité par le "REL". Dans la console, je vois bien l'identifiant souhaité. Le problème est que la DIV "SSCform-groupe" masqué est toujours la première de ma liste est non celle correspondant à son identifiant.

Quelqu'un verrait-il ce qui cloche dans ma fonction ?

Ma structure HTML

Code html :

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

1
2
3
4
5
6
7
<div id="AffSSCat" name="AffSSCat">
 
<div id="SSCform-group" rel="271"><div class="form-group"><label for="editSousCategoriesName" class="col-sm-4 control-label">Sous-catégorie 1</label><label class="col-sm-1 control-label">: </label><div class="col-sm-6"><input class="form-control" id="editSousCategoriesName[271]" name="editSousCategoriesName[271]" placeholder="SousTestH16" value="SousTestH16" type="text"><input name="editSousCategoriesId[271]" id="editSousCategoriesId[271]" value="271" type="hidden"></div><div class="col-sm-1"><a type="button" class="btn btn-default DelSSC" onclick="AffConfSupp('ConfSousCat271')"><i class="glyphicon glyphicon-trash"></i></a></div></div><!-- /form-group-->
 
<div id="ConfSousCat271" class="contentDiv" style=""><div class="col-sm-3"></div><div class="col-sm-9"><p>Voulez-vous supprimer cette sous-catégorie ? <a type="button" class="btn btn-default DelSSC" onclick="AffConfSupp('ConfSousCat271')"><i class="glyphicon glyphicon-remove-sign">Annuler</i>   </a>  <button type="button" class="btn btn-primary removeSousCategoriesBtn" id="271" data-loading-text="Loading..." onclick="removeSousCategories('271')"> <i class="glyphicon glyphicon-ok-sign"></i> Supprimer</button></p></div></div></div>
 
</div>

Ma fonction JS

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function removeSousCategories(souscategoriesId = null) {
 
if(souscategoriesId) {
 
		 $('#SSCform-group').each(function(index) { // A travailler pour récupérer l'identifiant []
          if ($(this).attr("rel") == souscategoriesId) {
               $(this).hide(100);
          }
          else {
               $(this).hide(2000);
          }
     });

[mathieu]

puisque vous connaissez l'identifiant "SSCform-group" de l'élément, vous n'avez pas besoin d'utiliser "each" puisqu'il n'y a qu'un élément.
à quoi sert le numéro 271 de l'exemple, comment sont construit les autres catégories ?

[karpe]

Bonjour Mathieu,

Le numero 271 est l'identifiant de la sous-catégorie que je souhaite dans l'exemple masqué.

La boucle sur les sous catégories est une structure de ce genre :

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
<div id="AffSSCat" name="AffSSCat">
 
<div id="SSCform-group" rel="271"><div class="form-group"><label for="editSousCategoriesName" class="col-sm-4 control-label">Sous-catégorie 1</label><label class="col-sm-1 control-label">: </label><div class="col-sm-6"><input class="form-control" id="editSousCategoriesName[271]" name="editSousCategoriesName[271]" placeholder="SousTestH16" value="SousTestH16" type="text"><input name="editSousCategoriesId[271]" id="editSousCategoriesId[271]" value="271" type="hidden"></div><div class="col-sm-1"><a type="button" class="btn btn-default DelSSC" onclick="AffConfSupp('ConfSousCat271')"><i class="glyphicon glyphicon-trash"></i></a></div></div><!-- /form-group-->
 
<div id="ConfSousCat271" class="contentDiv" style=""><div class="col-sm-3"></div><div class="col-sm-9"><p>Voulez-vous supprimer cette sous-catégorie ? <a type="button" class="btn btn-default DelSSC" onclick="AffConfSupp('ConfSousCat271')"><i class="glyphicon glyphicon-remove-sign">Annuler</i>   </a>  <button type="button" class="btn btn-primary removeSousCategoriesBtn" id="271" data-loading-text="Loading..." onclick="removeSousCategories('271')"> <i class="glyphicon glyphicon-ok-sign"></i> Supprimer</button></p></div></div></div>
 
 
 
<div id="SSCform-group" rel="272"><div class="form-group"><label for="editSousCategoriesName" class="col-sm-4 control-label">Sous-catégorie 1</label><label class="col-sm-1 control-label">: </label><div class="col-sm-6"><input class="form-control" id="editSousCategoriesName[272]" name="editSousCategoriesName[272]" placeholder="SousTestH17" value="SousTestH17" type="text"><input name="editSousCategoriesId[272]" id="editSousCategoriesId[272]" value="272" type="hidden"></div><div class="col-sm-1"><a type="button" class="btn btn-default DelSSC" onclick="AffConfSupp('ConfSousCat272')"><i class="glyphicon glyphicon-trash"></i></a></div></div><!-- /form-group-->
 
<div id="ConfSousCat272" class="contentDiv" style=""><div class="col-sm-3"></div><div class="col-sm-9"><p>Voulez-vous supprimer cette sous-catégorie ? <a type="button" class="btn btn-default DelSSC" onclick="AffConfSupp('ConfSousCat272')"><i class="glyphicon glyphicon-remove-sign">Annuler</i>   </a>  <button type="button" class="btn btn-primary removeSousCategoriesBtn" id="272" data-loading-text="Loading..." onclick="removeSousCategories('272')"> <i class="glyphicon glyphicon-ok-sign"></i> Supprimer</button></p></div></div></div>
 
 
 
<div id="SSCform-group" rel="273"><div class="form-group"><label for="editSousCategoriesName" class="col-sm-4 control-label">Sous-catégorie 1</label><label class="col-sm-1 control-label">: </label><div class="col-sm-6"><input class="form-control" id="editSousCategoriesName[273]" name="editSousCategoriesName[273]" placeholder="SousTestH18" value="SousTestH18" type="text"><input name="editSousCategoriesId[273]" id="editSousCategoriesId[273]" value="273" type="hidden"></div><div class="col-sm-1"><a type="button" class="btn btn-default DelSSC" onclick="AffConfSupp('ConfSousCat273')"><i class="glyphicon glyphicon-trash"></i></a></div></div><!-- /form-group-->
 
<div id="ConfSousCat273" class="contentDiv" style=""><div class="col-sm-3"></div><div class="col-sm-9"><p>Voulez-vous supprimer cette sous-catégorie ? <a type="button" class="btn btn-default DelSSC" onclick="AffConfSupp('ConfSousCat273')"><i class="glyphicon glyphicon-remove-sign">Annuler</i>   </a>  <button type="button" class="btn btn-primary removeSousCategoriesBtn" id="273" data-loading-text="Loading..." onclick="removeSousCategories('273')"> <i class="glyphicon glyphicon-ok-sign"></i> Supprimer</button></p></div></div></div>
 
<div> ...</div>
 
</div>

[NoSmoking]

Bonjour,
il te faut commencer par mettre ton code HTML en conformité

Code html :

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

1
2
3
4
5
6
<div id="SSCform-group" rel="271">
<!-- du code -->
<div id="SSCform-group" rel="272">
<!-- du code -->
<div id="SSCform-group" rel="273">
<!-- du code -->

Une ID doit être UNIQUE dans la page !

Utilise jQuery pour de bon

Code html :

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

<button type="button" class="btn btn-primary removeSousCategoriesBtn" ... onclick="removeSousCategories('272')">

Code :

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

1
2
3
$(".removeSousCategoriesBtn").on("click", function(){
    // ton code ICI, là tu peux chercher son parent !
  });

[karpe]

J'ai résolu mon problème en remplacant l'ID par une CLASS
<div class="SSCformGroup" rel="'+response.souscategories[i].souscategories_id +'" .

Mon appel
onclick="removeSousCategories('+response.souscategories[i].souscategories_id +')" .

Et ma fonction

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function removeSousCategories(souscategoriesId = null) {
 
if(souscategoriesId) {
 
		 $('.SSCformGroup').on("click", function() { // A travailler pour récupérer l'identifiant []
          if ($(this).attr("rel") == souscategoriesId) {
               $(this).hide(100);
          }
          else {
               $(this).hide(2000);
          }
 
     });

Cependant, je ne peux exécuter deux fois de suite la fonction...
Y'a t-il une syntaxe à utiliser pour faire une sorte de Reset de la fonction lorsque celle-ci a été utilisé ?

[NoSmoking]

Cependant, je ne peux exécuter deux fois de suite la fonction...

si j'ai bien compris une fois que tu as cliqué sur le bouton tu masque le conteneur dans lequel se trouve ton bouton ce qui le rend par le fait inaccessible.

Concernant ta fonction je dois admettre que j'ai un doute sur ce que tu veux réellement faire !