Perte de fonctionnalité du plugin après requête Ajax

Version imprimable

14/12/2017, 10h23
runner77

Perte de fonctionnalité du plugin après requête Ajax

Bonjour à tous,

J'utilise pour une application en "Bootstrap" le plugin JQuery "Chosen" (https://harvesthq.github.io/chosen/) afin de mettre en forme mes listes déroulantes et de proposer à l'intérieur une fonction de recherche très utiles lorsque celle-ci sont longues.

Pour les mêmes besoins de facilité d'utilisation, je suis amené à rafraichir ces mêmes listes en AJAX suivant certains choix de l'utilisateur.
Or dès que je passe par l'AJAX je perds mon plugin "Chosen" et par conséquent sa fonction recherche.

On est bien d'accord que l'AJAX "rafraichi" une partie de la page source qui elle fonctionne bien avec "Chosen", j'ai même essayé de ré-inclure dans le code rafraichi la fonction permettant de mettre en forme la liste mais sans succès.

Je n'arrive pas à trouver le moyen d'appliquer la présentation de "Chosen" sur ma liste rafraichi en AJAX.

Si quelqu'un à une idée je suis grandement preneur.

Nicolas
14/12/2017, 10h48
Invité

Bonjour,

il faut... faire comme il faut.

C'est tout ce qu'on peut dire, vu que tu ne montres aucune ligne de code...

J'ai trouvé cette solution qui consiste à ajouter ce code après le rafraichissement de ma liste, mais je trouve pas cela esthétique car il faut l'action de cliquer sur la liste pour la remettre en forme.

Code:

1
2
3
$('body').on('focus', '.chosen-select', function(){
                            $(this).chosen();
                        });

Il n'y aurait pas moyen de la remettre en forme automatiquement après la modification de la liste.
J'ai essayé avec load() mais sans succès, je n'ai pas assez de connaissance en JQUERY
Ci-joint mon code complet de la fonction AJAX

Code:

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
function rafraichi_liste_recette()
            {
                var value_liste_groupe_recette      = document.getElementById( 'value_groupe_recette'                   ).value;
                var value_liste_ss_groupe_recette   = document.getElementById( 'value_ss_groupe_recette'                ).value;
                var value_liste_utilisateur         = document.getElementById( 'value_utilisateur'                      ).value;
                var value_flag_archive_recette      = document.getElementById( 'value_flag_archive_admin_recette'       ).checked;
                var value_flag_non_archive_recette  = document.getElementById( 'value_flag_non_archive_admin_recette'   ).checked;
                var value_flag_all_recette          = document.getElementById( 'value_flag_all_admin_recette'           ).checked;
 
                var xhr = getXhr();
                // On défini ce qu'on va faire quand on aura la réponse
                xhr.onreadystatechange = function()
                {
                    // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
                    if( xhr.readyState == 4 && xhr.status == 200 )
                    {
                        zone = xhr.responseText;
                        // On se sert de innerHTML pour ajouter la nouvelle zone modifiée
                        document.getElementById( 'filtre_recette' ).innerHTML = zone;
                        $('body').on('focus', '.chosen-select', function(){
                            $(this).chosen();
                        });
                    }
                }
                xhr.open( "POST", "<?php echo $ss; ?>/js/ajax/rafraichi_liste_recette_admin.php", true );
                xhr.setRequestHeader( 'Content-Type','application/x-www-form-urlencoded' );
                xhr.send(   "value_liste_groupe_recette="           + value_liste_groupe_recette 
                            + "&value_liste_ss_groupe_recette="     + value_liste_ss_groupe_recette 
                            + "&value_liste_utilisateur="           + value_liste_utilisateur 
                            + "&value_flag_archive_recette="        + value_flag_archive_recette
                            + "&value_flag_non_archive_recette="    + value_flag_non_archive_recette
                            + "&value_flag_all_recette="            + value_flag_all_recette
                        );
            }

Problème résolu, je me demande encore pourquoi je n'ai pas testé cette solution plus tôt qui est des plus logique.
Il me suffisait de remettre ma fonction qui appelle "Chosen" en fin de chargement de la page.
Si cela peu aider d'autres personnes voici mon code.

Code:

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
function rafraichi_liste_recette()
            {
                var value_liste_groupe_recette      = document.getElementById( 'value_groupe_recette'                   ).value;
                var value_liste_ss_groupe_recette   = document.getElementById( 'value_ss_groupe_recette'                ).value;
                var value_liste_utilisateur         = document.getElementById( 'value_utilisateur'                      ).value;
                var value_flag_archive_recette      = document.getElementById( 'value_flag_archive_admin_recette'       ).checked;
                var value_flag_non_archive_recette  = document.getElementById( 'value_flag_non_archive_admin_recette'   ).checked;
                var value_flag_all_recette          = document.getElementById( 'value_flag_all_admin_recette'           ).checked;
 
                var xhr = getXhr();
                // On défini ce qu'on va faire quand on aura la réponse
                xhr.onreadystatechange = function()
                {
                    // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
                    if( xhr.readyState == 4 && xhr.status == 200 )
                    {
                        zone = xhr.responseText;
                        // On se sert de innerHTML pour ajouter la nouvelle zone modifiée
                        document.getElementById( 'filtre_recette' ).innerHTML = zone;
                        var config = {
                            '.chosen-select'           : {},
                            '.chosen-select-deselect'  : {allow_single_deselect:true},
                            '.chosen-select-no-single' : {disable_search_threshold:10},
                            '.chosen-select-no-results': {no_results_text:'Aucun résultat trouvé'},
                            '.chosen-select-width'     : {width:"95%"}
                        }
                        for (var selector in config) {
                            $(selector).chosen(config[selector]);
                        }
                    }
                }
                xhr.open( "POST", "<?php echo $ss; ?>/js/ajax/rafraichi_liste_recette_admin.php", true );
                xhr.setRequestHeader( 'Content-Type','application/x-www-form-urlencoded' );
                xhr.send(   "value_liste_groupe_recette="           + value_liste_groupe_recette 
                            + "&value_liste_ss_groupe_recette="     + value_liste_ss_groupe_recette 
                            + "&value_liste_utilisateur="           + value_liste_utilisateur 
                            + "&value_flag_archive_recette="        + value_flag_archive_recette
                            + "&value_flag_non_archive_recette="    + value_flag_non_archive_recette
                            + "&value_flag_all_recette="            + value_flag_all_recette
                        );
            }

15/12/2017, 14h31
NoSmoking

Bonjour,
comme tu utilises jQuery autant se passer de document.getElementById( ou autre xhr = getXhr() ;)