Autocompletion dans un onglet dans une modale avec Materialize
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:
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:
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>
`);
}
} |