Discussion :

[splifferwolf]

Bonjour à tous,

Je viens vers vous car j'ai un souci de propagation, je vous explique.
J'utilise un éditeur bbcode "SCEditor" là pas de souci, j'ai ajouter un bbcode permettant d'uploader une image, là pas de souci non plus, mon image est uploader en 5 model (de taille différente).

Maintenant ce que j'aimerai c'est pouvoir choisir un endroit (catégorie qui est un dossier), pas de souci pour un petit select afin de choisir le dossier cible de l'upload, et l'upload fonctionne aussi, mon problème ce situe lors de la création d'un nouveau dossier pouvant lui même ce trouver dans un dossier(sous-dossier quoi).

Donc j'ai un select qui permet de choisir la catégorie principale (ou non si c'est une nouvelle évidament). si la catégorie sélectionnez contient elle même des sous-catégorie un nouveau select apparait juste à coter avec une petite croix pour le supprimer.

et c'est là que ca coince, ca fonctionne la première fois, si je supprime cette sous-catégorie et que je resélection sa catégorie parent il m'insert 2 fois le même select, si je supprime la prochaine sélection en insert 3 et ainsi de suite.

Voici le petit plugin que j'ai fait à cet éffet, n'hésitez à me dire si vous trouvez que c'est trop lourd ou autre, je vous affiche un screen plus bas

Code javascript :

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
(function($)
{
    $.fn.selectServerSide = function(opts){
 
        // Retourne le nombre d'entrée d'un tableau JSON
        function lengthJson(t){ nb = 0;for(var i=0;i<t.length;i++){ nb++; } return nb; }
 
        this.each(function() {
        // Fusion et remplacement des paramètre par défaut et personnel
        var prm = $.extend({ css: {}, // Tableau des css
                             cls: 'cat-selectable', // class de style
                            file: 'liblive.php', // fichier sur le serveur
                            data: 'data=selectable-picture-subcat', // Chaîne data
                          method: 'get', // Méthode d'envoi de requête
                        nullText: 'Aucunes données...' // Text si aucun résultat
        },opts);
 
        var $$ = $(this); // Mise en variable de l'objet courant
        var divs = $('<div style="display:inline-block;"></div>');
        var close = $('<span class="ui-icon ui-icon-close closer" style="float:right;margin-top:7px;"></span>');
 
 
 
        $$.change(function(event){
            event.stopPropagation();
            var ids = $$.val();
            if(ids > 0){
                $.ajax({
                    type: prm.method,
                    url: prm.file,
                    data: prm.data+'&idp='+ids,
                    dataType: 'json',
                    async: false,
                    success : function(j){
                        if(j != ''){
                            var sel = $('<select></select>');
                            sel.attr({ name:$$.attr('name')+'_'+ids,
                                       id:$$.attr('name')+'_'+ids,
                                       'class': prm.cls
                            });
                            sel.css(prm.css);
 
                            for(l in j){
                                sel.append('<option value="'+l+'">'+j[l]+'</option>');
                            }
 
                            //sel.selectServerSide();
                            divs.append(sel);
                            divs.append(close);
 
                            $$.parent().append(divs);
 
                            $$.parent().find('.closer').click(function(){
                                $(this).parent().remove();
                            });
                        }
                    }
                });
            }
            else{
                $(".cat-selectable").remove();
            }
 
        });
    });
 
    };
})(jQuery);

Donc ici l'objectif, je choisi une option de mon select, si il existe des sous-catégorie pour cette sélection hop un autre select apparait juste à coter avec la possibilité de le supprimer si besoin, la server-side renvoi un json contenant les id en clés et les noms en valeur.
L'initialisation ce fait de la sorte

Code php :

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
// Catégorie 1
echo '  <div style="'.$cssd.'">'
   . '    <label style="'.$cssl.'">Catégorie parent</label>'
   . '    <select name="firstcat" id="firstcat" class="cat-select">'
   . '      <option value="0">Aucune</option>'
   . '      <option value="1">Illustration</option>'
   . '      <option value="2">Ateliers</option>'
   . '      <option value="3">Divers</option>'
   . '    </select>'
   . '  </div>';
 
echo "<script type=\"text/javascript\">"
   . "$(document).ready(function(){"
   . "    $('#firstcat').selectServerSide();"
   . "});"
   . "</script>";

J'initialise le select à ce moment ci- car ce formulaire est charger par ajax et sinon il ne le prend pas (j'ai essayer le sélecteur de class, d'id, mais il ne le prend que de cette facon, ce qui me semble logique puisque la page est déjà charger quand on appel le formulaire).

J'obtient donc ceci lors du premier affichage

Je sélectionne la catégorie qui contient des sous-catégorie et j’obtiens

Et là je me dit je me suis tromper je supprime en cliquant sur la croix et je sélectionne a nouveau la catégorie et là on obtient

Si je supprime de nouveau et que je sélectionne j’obtiens 3 champ select etc...

et je ne comprend pas pourquoi, j'ai tenter un stop propagation mais ca ne change rien.

Existe-t'il peut être déjà un plugin qui fait ca, sinon votre aide est bienvenue xD

D'avance merci pour votre participation.
Bien à vous
Spliffer

[splifferwolf]

J'ai utiliser une autre approche xD

Problème résolut.