Auparavant, j'ai implémenté l'édition en ligne avec X-Editable et Bootstrap 3. Avec Bootstrap 4 cela ne semble plus fonctionner. Consultez le JsFiddle) ici.
Si je définis une simple popup comme celle-ci:
<div style="margin: 150px">
<a href="#" class="comment" data-name="comment" data-type="text" data-pk="@item.Id" data-url="/" data-title="Enter comment">comment</a>
</div>
<script>
$(document).ready(function() {
$('.comment').editable();
});
</script>
Cela fonctionne très bien en BS3 mais dès que je passe en BS4 cela ne fonctionne plus en donnant l'erreur:
Uncaught TypeError: Cannot read property 'addClass' of undefined
at Popup.show (bootstrap-editable.js:1091)
at Editable.show (bootstrap-editable.js:1802)
at Editable.toggle (bootstrap-editable.js:1824)
at Editable.<anonymous> (bootstrap-editable.js:1547)
at HTMLAnchorElement.e (jquery-3.2.1.slim.min.js:2)
Dans la console.
Qu'est-ce que je fais mal? Dois-je utiliser une bibliothèque/fork différente?
Juste pour aider quelqu'un d'autre qui a ce problème, voici comment je l'ai traité. Je suis passé en mode inline:
$(document).ready(function() {
$('.comment').editable({
mode: 'inline',
});
$('.hours').editable({
mode: 'inline',
type: 'number',
step: '1.00',
min: '0.00',
max: '24'
});
});
Cela fonctionne bien mais les boutons ne rendent aucune image car les glyphicons ne sont plus pris en charge.
J'ai ajouté font-awesome puis utilisé le CSS suivant pour récupérer les icônes:
.glyphicon-ok:before {
content: "\f00c";
}
.glyphicon-remove:before {
content: "\f00d";
}
.glyphicon {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Tout semble fonctionner comme avant. Merci à Sadhu de m'avoir pointé dans la bonne direction.
Il existe une nouvelle version qui prend en charge Bootstrap 4:
https://github.com/Talv/x-editable/tree/develop/dist/bootstrap4-editable
Il semble que ce soit un bug dans bootstrap 4. Bootstrap 4 est actuellement en version bêta.
Vérifiez le lien ci-dessous: https://github.com/vitalets/x-editable/issues/95
Exemples Bootstrap 4 avec FontAwesome 4 sur https://jsfiddle.net/frallain/h5qmord2/ et avec FontAwesome 5 sur https://jsfiddle.net/frallain/atwb19dz/
BTW le mot clé CSS before
nécessite un double :
.glyphicon-ok::before {
content: "\f00c";
}
.glyphicon-remove::before {
content: "\f00d";
}
.glyphicon {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-style: normal;
}