web-dev-qa-db-fra.com

Bootstrap 4 avec Modal distant

Je ne parviens pas à faire fonctionner Modal en mode distant avec la nouvelle version de Twitter Bootstrap: Bootstrap 4 alpha. Cela fonctionne parfaitement avec Bootstrap 3. Avec bootstrap 4, la fenêtre contextuelle s’ouvre, mais le corps du modèle ne se charge pas. myRemoteURL.do n'est pas appelé à distance pour charger le corps du modèle.

Code:

<button type="button" data-toggle="modal" data-remote="myRemoteURL.do" data-target="#myModel">Open Model</button>

<!-- Model -->
<div class="modal fade" id="myModel" tabindex="-1"
    role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h3 class="modal-title" id="myModalLabel">Model Title</h3>
            </div>
            <div class="modal-body">
                <p>
                    <img alt="loading" src="resources/img/ajax-loader.gif">
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Submit</button>
            </div>
        </div>
    </div>
</div>
jquerycsstwitter-bootstrapbootstrap-4
21
Zeeshan

Trouvé le problème: Ils ont supprimé l'option à distance dans bootstrap 4

remote: cette option est obsolète depuis la v3.3.0 et sera supprimée dans la v4. Nous vous recommandons plutôt d'utiliser des modèles côté client ou un cadre de liaison de données, ou d'appeler jQuery.load vous-même.

J'ai utilisé JQuery pour implémenter cette fonctionnalité supprimée.

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

Selon la documentation officielle, nous pouvons procéder comme suit ( https://getbootstrap.com/docs/4.1/components/modal )

$('#exampleModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget) // Button that triggered the modal
    var recipient = button.data('whatever') // Extract info from data-* attributes
    // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
    // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
    var modal = $(this)
    modal.find('.modal-title').text('New message to ' + recipient)
    modal.find('.modal-body input').val(recipient)
})

Donc, je crois que c'est la meilleure approche:

$('#modal_frame').on('show.bs.modal', function (e) {
    $(this).find('.modal-content').load(e.relatedTarget.href);
});

S'adapter à vos besoins

19
Marcelo Bonus

Comme d'autres réponses et Documents Bootstrap indiquent, Bootstrap 4 nécessite la gestion de l'événement show.bs.modal pour charger le contenu dans le modal. Cela peut être utilisé pour charger du contenu depuis une chaîne HTML ou depuis une URL distante. Voici un exemple de travail ...

$('#theModal').on('show.bs.modal', function (e) {

    var button = $(e.relatedTarget);
    var modal = $(this);

    // load content from HTML string
    //modal.find('.modal-body').html("Nice modal body baby...");

    // or, load content from value of data-remote url
    modal.find('.modal-body').load(button.data("remote"));

});

Démonstration d'URL distante de Bootstrap 4

Une autre option consiste à ouvrir le modal une fois les données renvoyées par un appel Ajax ...

  $.ajax({
       url: "http://someapiurl",
       dataType: 'json',
       success: function(res) {

           // get the ajax response data
           var data = res.body;
           // update modal content
           $('.modal-body').text(data.someval);
           // show modal
           $('#myModal').modal('show');

       },
       error:function(request, status, error) {
           console.log("ajax call went wrong:" + request.responseText);
       }
  });

Bootstrap 4 Load Modal d'Ajax Demo

2
Zim

Dans Asp.NET MVC, cela fonctionne pour moi

html 

<a href="#" onclick="Edit(1)">Edit item</a>
<div class="modal" id="modalPartialView" />

jquery 

<script type="text/javascript">
        function Edit(id)
        {
            $.ajax({
                url: "@Url.Action("ActionName","ControllerName")",
                type: 'GET',
                cache: false,
                data: {id: id},
            }).done(function(result){
                $('#modalPartialView').html(result)
                $('#modalPartialView').modal('show') //part of bootstrap.min.js
            });
        }
<script>

Action 

public PartialViewResult ActionName(int id)
{
   // var model = ...
   return PartialView("_Modal", model);
}
0
Muflix

Si vous utilisez la version Jquery Slim (comme dans tous les documents et exemples Bootstrap 4), la fonction de chargement échouera.

Vous devez utiliser la version complète de Jquery

0
David Sims

Ce processus charge la dynamique en cours. data remote = "remoteContent.html"

<!-- Link trigger modal -->
<a href="javascript:void(0);" data-remote="remoteContent.html" data-toggle="modal" data-target="#myModal" data-remote="true" class="btn btn-default">
    Launch Modal
</a>
This trick :  data-remote="remoteContent.html"
<!-- Default bootstrap modal example -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

0
user1520762