Discussion :

[sylvain257]

Bonjour,

Je cherche à intégrer un champ autocomplété dans un tab lui même dans une modale. Je travaille avec Materialize.

Je travaille sur une fonction qui est un appel Ajax à une API. Par conséquent, le contenu de la modale est écrit en javascript via ("#el").html(' ').

D'une manière générale, il semble que Materialize n'apprécie pas les fonctions spéciales tq "Tabs", "Autocomplete" à l'intérieur d'une modale.

J'ai trouvé sur internet un moyen de contourner le problème pour les tabs, mais cela semble ne pas fonctionner pour le champ autocomplété.

A ce propos, je partage la solution :

Code :

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

1
2
3
4
5
6
$(document).ready(function(){
  $('.modal').modal({
onOpenEnd: function(el) {
    	$(el).find('.tabs').tabs({ swipeable: false });
    }
})

Pour l’autocomplétion il s'agit surement de compléter le code ci-dessus, sachant que l'array demandé par l'autocomplétion doit venir d'un appel AJAX à mon API. L'array doit être généré dynamiquement.
J'ai également le sentiment qu'il pourrait s'agir d'une erreur de DOM, typiquement une fonction attribuée à un sélecteur qui n'existe pas encore.


Est ce que quelqu'un parmi la communauté voit une solution pour contourner le problème rencontré ?

Merci pour vos retours

Sylvain

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
 $.ajax({
    url: ***********,
    type:'GET',
    datatype:'json',
    complete: function(res1) {
        var record = res1.responseJSON;
 
        $('#modal_maj_profil').html(`
        <div class="modal_header"> Profil ${record.nom_profil}</div>
        <div class="modal_content">
          <div class="row">
              <div class="col s12">
                <ul class="tabs">
                  <li class="tab col s6">
                    <a id="firstTab" class="active" href="#infos">Informations</a>
                  </li>
                  <li class="tab col s6">
                    <a href="#admin">Admin</a>
                  </li>
                </ul>
              </div>
              <div id="infos" class="col s12 modal-main-panel">
 
              </div>
              <div id="admin" class="col s12 modal-main-panel">
                  <div class="input-field col s6">
                  <input type="text" class='input_fiche' id="autocomplete-input" class="autocomplete">
                  <label for="autocomplete-input">Autocomplete</label>
                </div>
              </div>
            </div>
        </div>
      `);
 
        }
      }

[sylvain257]

Je viens de trouver la solution :

Il s'agissait vraisemblablement d'une erreur de DOM. Pour contourner ce problème il s'agit de faire un second ("$el").html(), qui écrit dans la div voulue.

Voila

Bon après midi

Sylvain