Bootstrap-4 mit remote-Modal

Kann ich nicht machen, der Modal-arbeiten Sie im remote-Modus mit der neuen Twitter Bootstrap Version : Bootstrap-4 alpha. Es funktioniert einwandfrei mit Bootstrap 3. Mit bootstrap-4, erhalte ich das popup-Fenster, aber das Modell Körper nicht immer geladen. Es ist kein remote-Aufruf zum myRemoteURL.do um das Modell zu laden Körper.

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>

InformationsquelleAutor Zeeshan | 2016-01-13

42

Das problem gefunden: Sie haben entfernt die remote-option in der bootstrap-4

remote : Diese option ist veraltet, da v3.3.0 werden entfernt, in v4. Wir empfehlen stattdessen die Verwendung von client-side templating oder ein data binding framework, oder der Aufruf von jQuery.laden Sie sich selbst.

Ich verwendet JQuery, um die Implementierung dieses feature entfernt.
```
$('body').on('click', '[data-toggle="modal"]', function(){
        $($(this).data("target")+' .modal-body').load($(this).data("remote"));
    });  
```
Von Ihnen positiv bewertet werden. Es funktioniert, nur um zu klären, wird es zu laden von data-remote="your_own_url" und auf "modal-body" data-target="#myModel", müssen Sie möglicherweise zu ändern "Modell-Körper" auf, die auch Ort, den Sie möchten, legen Sie die Daten, z.B. "modal-content"
In meinem Fall habe ich .load($(this).attr('href')).
für mich, da hatte ich mehrere modals ich verwendet $('body').on('click.modal.data-api', '[data-toggle="modal"]', function(){ $($(this).data("target")+' .modal-content').load($(this).attr('href')); });
die beste Antwort

InformationsquelleAutor Zeeshan

Laut offizieller Dokumentation, können wir die Folgen(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)
})

So, ich glaube, das ist die beste Methode:

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

An Ihre Bedürfnisse anpassen

funktioniert wie ein Charme, kann dir +10 😉
Wie man benutzerdefinierte Daten-attribute (data('whatever')), wenn es nicht eine Taste, sondern anchor-tag ? Ich habe $(event.relatedTarget).data('whatever') undefiniert.
Dieser arbeitete für mich: $(event.relatedTarget).attr('data-whatever')

InformationsquelleAutor Marcelo Bonus

Als einige der anderen Antworten und Bootstrap docs zeigen, Bootstrap-4 erfordert die Handhabung der show.bs.modal Veranstaltung zum laden von Inhalt in dem modal. Dies kann verwendet werden, um entweder das laden von Inhalten aus einem HTML-string, oder von einer remote-url. Hier ist ein Beispiel arbeiten...

$('#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"));

});

Bootstrap-4 Remote-URL-Demo

Andere option ist zum öffnen des modalen Daten, die zurückgegeben wird von einem Ajax-call...

  $.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 Laden aus Modal Ajax-Demo

Ich möchte laden Sie ein pop-up-Formular, das geht an eine andere Seite Beispiel register.html nach dem Klick auf "Registrieren" gist.github.com/anonymous/5b4d764ad2edbe213344bdd7320754ef

InformationsquelleAutor Zim

In Asp.NET MVC, das funktioniert für mich

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>

Aktion

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

InformationsquelleAutor Muflix

0

Wenn Sie die Jquery-slim-version (wie in allen Bootstrap-4 docs und Beispiele) mit der load-Funktion wird fehlschlagen

Müssen Sie die volle version von Jquery

InformationsquelleAutor David Sims

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.