Comment charger des données distantes dans les modaux Bootstrap 4 ?

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 au spécifié URL.

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!