Discussion :

[AxelStep]

Bonjour,

Nouveau sur le forum je ne suis pas parvenu à trouver solution en fouillant sur le net. J'espère donc pouvoir trouver un peu d'aide parmi vous sur un problème d'affichage d'une balise <select multiple> après l'avoir mise à jour par AJAX.

Sur une base de données, j'enregistre des fiches contenant différentes informations donc différents champs. Parmi ces champs se trouve la ou les "catégorie(s) de la fiche", sélectionnée(s) par le biais d'une balise <select multiple >.

Pour créer la fiche tout va bien et voilà à quoi ressemble le <select multiple> une fois les catégories sélectionnées :



Mon problème survient lors de l'édition d'une fiche pour modification via l'affichage d'un <DIV> préalablement chargé et caché sur la page HTML principale où sont listées toutes les fiches.

Toutes les données sont bien récupérées et tout fonctionne correctement mais l'affichage du <select multiple ="multiple"> devient cela :



Mon problème est que je ne parviens pas à afficher le <select multiple> avec les vignettes de chaque catégories comme sur la première image :



Avez vous une solution à proposer svp ?

DIV où est injecté le code du <select multiple> (il est contenu dans le DIV initialement caché utilisé comme fenêtre d'édition)

Code html :

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

<div id="div-categ"></div>

Script php appelé par ajax

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
<?php
    $response = array('status' => 0);
    
    $sql = "SELECT * from categories";                
    $rs = $conn->execute($sql);
    if ( $conn->Affected_Rows()) {
        $toutes_categories = $rs->getrows();
        $response['toutes_categories'] = $toutes_categories;
    }
    
    $sql = "SELECT * from f_categories WHERE FID = " .$conn->qStr($fid); 
    $rs = $conn->execute($sql);
    if ( $conn->Affected_Rows()) {
        $fiches = $rs->getrows();
        $fiche_categories = array();
        $i=0;
        foreach ($fiches as $key => $value){
            $fiche_categories[$i]=$value;
            $i++;
        }
        $response['fiche_categories'] = $fiche_categories;
    }
    
    echo json_encode($response);
    die();
?>

Script ajax appelé par un bouton

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
$(document).ready(function(){
    $("body").on('click', "a[id*='edit_fiche_']", function(event) {
        event.preventDefault();
        var id = $(this).attr('id');
        var split = id.split('_');
        var fiche_id = split[2];
 
        $.post(base_url + '/ajax/admin_get_fiche', { fiche_id: fiche_id },
            function (response) {
                if (response.status) {
 
                    //Réinitialiser les erreurs
                    $('.form-control').each(function(){
                        $(this).removeClass('error');
                    });
 
                    //Charger les données fiche
                    var fichecategories    = new Array();    
                    var toutescategories    = new Array();
                    fichecategories        = response.fiche_categories;
                    toutescategories    = response.toutes_categories;
                    out = '<select id="edit-category" name="edit-category[]" multiple style="width:100%";>';
                    for (var i in toutescategories) {
                        objall = Object.values(toutescategories[i]);
                        var match = 0;
                        for (var j in fichecategories) {
                            var objvid = Object.values(fichecategories[j]);
                            if (objall[0] == objvid[1]){
                                match = 1;
                            }
                        }
                        if (match != 0){
                            out += '<option value="'+ objall[0] + '" selected="selected">'+ objall[1] +'</option>';    
                        } else {
                            out += '<option value="'+ objall[0] + '">'+ objall[1] +'</option>';
                        }
                    }
                    out += '</select>';
                    $('#div-categ').html(out);
 
                    //Ajuste la marge de gauche à une valeur entière - Centre
                    var modal_ml = parseInt(($(window).width()-$('#editModalDialog').width())/2);                    
                    $('#editModal').modal('show');
                    if ($(window).width()>768) {
                        $('#editModalDialog').css('margin-left',Math.floor(modal_ml)+'px');
                    }
                } else {
                    Messenger().post({
                        message: 'Fiche <b>ID ' + fiche_id + '</b>: Echec d\'obtention des détails de la fiche !',
                        type: 'error'
                    });
                }                
        }, "json");         
    });
});

[Toufik83]

Bonjour,

Utilises-tu un plugin jQuery qui gère les multiSelect ? si oui, il va falloir l'initialiser encore une fois dans le callback de succès :

Code :

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

1
2
3
4
5
6
7
8
 
....
out += '</select>';
$('#div-categ')
.html(out)//là tu remplies les données
.find("select")//cibler les select dedans
.NomPlugin()//réinitialise le plugin pour les <select>
....

[AxelStep]

Bonjour et merci pour cette réponse.

Je n'utilise pas de plugin jQuery qui gère le multiSelect.

Y-a-t-il une possibilité de faire autrement ? Si non possible de m'éclairer un peu plus car je n'excelle pas sur le sujet ?

[Toufik83]

La première image dans ton post montre bien les vignettes "Catégorie2" et "Catégorie4", comment sont-elles générées ?

D'après ce que je vois, elles sont générées via un Plugin jQuery comme chosen par exemple.

[AxelStep]

Oui effectivement après recherche j'utilise bien chosen.

Du coup si je reprends ton code de départ ça donnerait cela ?

Code :

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

1
2
3
4
$('#div-categ')
  .html(out)
  .find("select")
  .chosen();

[Toufik83]

Eh ben voilà, c'est bien le plugin chosen que t'utilises, et normalement le code que tu viens de poster fonctionnera sans soucis.

[AxelStep]

Malheureusement ça ne fonctionne pas et ça bloque le script (le DIV d'édition de s'affiche pas)

[Toufik83]

Des erreurs qui s'affichent dans la console du navigateur ? Non ?...

[AxelStep]

C'est tout bon j'ai trouvé !

J'ai la bébête select2 qui se baladait pas loin

Du coup ça donne cela et tout fonctionne

Code :

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

1
2
3
4
$('#div-categ')
  .html(out)
  .find("select")
  .select2();

Merci beaucoup Toufic83 tu m'ôtes une belle épine du pied !

[Toufik83]

C'est select2 que t'utilises et pas chosen