Question

34

Load HTML file into a Bootstrap Modal

rated 0 times [ 40] [ 6] / answers: 1 / hits: 16762 / 9 Years ago, sat, july 25, 2015, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

bryonk

Add To Favorites

Follow

Total Points: 161

Total Questions: 116

Total Answers: 107

Location: Albania

Member since Sun, Nov 22, 2020

4 Years ago

bryonk questions

1 What is the react query queryKey typescript type

Sat, Aug 13, 22, 00:00, 2 Years ago

1 Cannot read properties of null (reading 'addEventListener') in a Javascript file (not script tag)

Sat, Jan 15, 22, 00:00, 2 Years ago

1 Pagination in React/Typescript

Sun, May 9, 21, 00:00, 3 Years ago

1 Redirect to another page with TOKEN header through Server

Tue, Mar 16, 21, 00:00, 3 Years ago

1 What JavaScript engine does Apple's Safari browser use?

Tue, Sep 29, 20, 00:00, 4 Years ago

View All

answered 9 Years ago dayana · Accepted Answer

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.