Bootstrap 4 Chargement modal de données à distance

Dans la dernière version de Twitter Bootstrap (v4 alpha), la possibilité de charger du contenu distant dans un modal a été supprimé. Cette fonctionnalité existait dans Bootstrap 3, mais n'est plus prise en charge.

Problème

Lors de la tentative d'utilisation de l'attribut data-remote pour charger du contenu distant dans un modal dans Bootstrap 4, le corps du modèle reste vide et aucune requête n'est envoyée à l'URL spécifiée.

Solution

Pour résoudre ce problème, vous pouvez utiliser JavaScript pour charger manuellement le contenu distant dans le corps modal. Voici un exemple :

$('body').on('click', '[data-toggle="modal"]', function(){
        $($(this).data("target") ' .modal-body').load($(this).data("remote"));
    });  

Ce code attache un écouteur d'événement à tous les éléments avec l'attribut data-toggle="modal". Lorsque l'on clique sur l'un de ces éléments, il récupère la valeur data-remote de l'élément et utilise la méthode .load() de jQuery pour charger le contenu distant dans le corps modal.

Remarque : L'option distante obsolète a été supprimée dans Bootstrap 4 et il est recommandé de l'implémenter à l'aide de modèles côté client, de cadres de liaison de données ou en appelant manuellement jQuery.load() comme démontré ci-dessus.