Laden Sie die HTML-Datei in ein Bootstrap Modal

Ich versuche, mich ein modal mit dynamisch geladenen Inhalten. Das ist mein JavaScript code:

function track(id,title) {
    $('#listenTrack').modal('show');
    $('#listenTrack').find('.modal-title').html(title);
    $.get("remote.html", function(data) {

        $('#listenTrack').find('.modal-body').html(data);

    });
}

Und hier ist remote.html

<html>
<head>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
</head>
<script type="text/javascript">var zippywww="26";var zippyfile="9k9lOOtw";var zippytext="#C9302C";var zippyback="#161617";var zippyplay="#ff6600";var zippywidth=320;var zippyauto=false;var zippyvol=80;var zippywave = "#C9302C";var zippyborder = "#cccccc";</script>
<script type="text/javascript" src="https://api.zippyshare.com/api/embed_new.js"></script>
</html>

Versuchte ich auch, ohne html-tags, aber nichts. Die text-Inhalt angezeigt wird, nicht der Spieler. Und wenn ich offen remote.html direkt aus dem browser alles in Ordnung ist.
Vielleicht ist mein code falsch ist.

everythings Recht in diesem code! mehr information erforderlich ! wollen Sie überprüfen, Entwickler-Konsole ? tun Sie versuchen, zu drucken, Daten-variable mit Konsole.log(Daten)

InformationsquelleAutor bystefu | 2015-07-25

  1. 3

    Als sehe ich in deiner Lösung kann ich feststellen, dass Sie nicht laden Sie Ihre boostrap.js - Datei,es sei denn, dieser block von code ist nicht dein snippet in seiner Gesamtheit.

    Hier ist eine einfache Lösung, die für mich gearbeitet :

    <!DOCTYPE html>
<html>
<head>
    <title>title </title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>



<div class="modal fade" id="modal1">
  <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">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</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">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>




<script>
(function(){
    //1 :the content that we want to inject inside our modal 
    // this content can be loaded from another external file, this is just an example 
    var content = {title:"this is the title ",body:"this is the body content"};

    //reference my modal 
    var modal1=$('#modal1');
    $(modal1).find('.modal-title').html(content.title);
    $(modal1).find('.modal-body').html(content.body);

    //show the modal 
    $(modal1).modal();


})();   

</script>
</body>
</html>

    den modal verwendet in diesem Beispiel wird von der bootstrap-offizielle website : http://getbootstrap.com/javascript/#modals

    Vergessen Sie nicht, laden ersten jquery, weil bootstrap hängt davon ab,
    zweite Ladung Ihre bootstrap.js ohne zu vergessen bootstrap.css im head-Bereich.

    InformationsquelleAutor ismnoiet

  2. -1

    Hier ist ein sehr cross-browser-kompatible Lösung. Es verwendet das XMLHttpRequest-Objekt die Methode open öffnen Sie Ihre "remote.html" Datei mithilfe von HTTP-GET-Methode. Der Dritte parameter wahr ist um zu markieren, dass die Anfrage asynchron.

    Wenn geladen, ohne Fehler (mit einem HTTP-OK-Antwort), füllen Sie die listenTrack div mit der HTML-Inhalt "remote.html".

    var xhr= new XMLHttpRequest();
xhr.open('GET', 'remote.html', true);
xhr.onreadystatechange= function() {
    if (this.readyState!==4) return;
    if (this.status!==200) return;
    document.getElementById('listenTrack').innerHTML= this.responseText;
};
xhr.send();

    Ich wiederhole, das ist sehr kompatibel (außer paar ältere IE-Versionen, die jetzt nicht mehr) und erfordert nicht einmal jQuery oder andere javascript-Bibliothek.

    sollte eine Erklärung geben, warum dein code funktionieren würde, vs OP-code als auch, was Ihr code tut und wo es verwendet werden würde. Try this ist nicht eine richtige Erklärung
    Entschuldigung. ich habe die Erklärung nun die Antwort. Fühlen Sie sich frei, einen Kommentar weiter explation oder irgend etwas anderes benötigt wird. Danke für den Hinweis it out.

    InformationsquelleAutor Narendran Parivallal

Schreibe einen Kommentar