CODEWITHSUNDEEP
javascriptjqueryajaxbootstrap-modal
bystefu
bystefu

Reputation: 33

Load HTML file into a Bootstrap Modal

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.

Upvotes: 1

Views: 18369

Answers (2)

ismnoiet
ismnoiet

Reputation: 4159

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">&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');
    // 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.

Upvotes: 3

Narendran Parivallal
Narendran Parivallal

Reputation: 1130

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.

Upvotes: -1

Related Questions