Load HTML file into a Bootstrap Modal
Question
I'm trying to make a modal with dynamically loaded content. This is my 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);
});
}
And here is 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>
I tried also without html tags, but nothing. The text content appears, not the player . And if I open remote.html directly from the browser everything is fine. Maybe my code is wrong.
2 answers
solution1
3 ACCPTED 2015-07-25 18:15:16
As i see in your solution i can notice that you are not loading your boostrap.js file,unless this block of code is not your snippet in its totality.
Here is a simple solution that worked for me :
<!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">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</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');
// use `.html(content)` or `.text(content)` if you want to the html content
// or text content respectively.
$(modal1).find('.modal-title').html(content.title);
$(modal1).find('.modal-body').html(content.body);
// show the modal
$(modal1).modal();
})();
</script>
</body>
</html>
the modal used in this example is from the bootstrap official website : http://getbootstrap.com/javascript/#modals
Don't forget to load jquery first , because bootstrap depends on it. Secondly load your bootstrap.js without forgetting bootstrap.css in the head section .
solution2
-1 2015-07-25 17:43:37
Here is a highly cross-browser compatible solution. It uses the XMLHttpRequest Object's open method to open your "remote.html" file using HTTP GET method. The third parameter true is to mark that the request as asynchronous.
When loaded without errors (with an HTTP OK response), fill the listenTrack div with the HTML content of "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();
I repeat, this is highly cross-compatible (except few older versions of IE, which is now - no more) and doesn't even require jQuery or any other javascript library.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.