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=".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.
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./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.
- 1 everythings is right in this code! more information required ! do you check developer console ? do you try to print data variable with console.log(data) – Kourosh Raoufi Commented Jul 25, 2015 at 18:09
2 Answers
Reset to default 3As 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./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./jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./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./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.
Here is a highly cross-browser patible 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-patible (except few older versions of IE, which is now - no more) and doesn't even require jQuery or any other javascript library.