Javascript dynamically load html into another html file

Question

I have one main html file which looks like this:

    <head>
css here
    </head>

    <body>

    <div class="nav">
    ....
    </div>

<div id="mainpage-load">

    <div id="loading">
        <img src="./img/loading-white.gif">
    </div>

</div>

<script> jquery </script>
<script> slider.js </script>
<script> ... </script>
<script> APP.JS </script>

i want to dynamically load content into the div "mainpage-load". but when i load the content with jquery/ajax .load into the div, the javascript file for a slider for example is not effecting the new content.

app.js to load content:

$(function(){
    var $loading = $('#loading').hide();
    $(document)
      .ajaxStart(function () {
        $loading.show();
      })
      .ajaxStop(function () {
        $loading.hide();
      });

    $('#load-it').on('click', function(e){
      e.preventDefault();
      $( "#mainpage-load" ).load( "pages/main.html" );
    })
});

2nd html file (pages/main.html):

<div class="new content">
new content here
</div>

i tried putting app.js and jquery into the but still not working or putting the slider.js in the pages/main.html

thanks in advance !

before I write an answer do you call script like I am seeing in your main html page? Script files should be called like this <script src="jquery.js"></script> — mohessaid
– mohessaid, Commented Dec 18, 2016 at 10:53

Karthick Nagarajan · Accepted Answer · 2016-12-18 10:28:56Z

5

You just try this.

jQuery:

$("#y").load("home.html");

javascript:

function load_home() {
     document.getElementById("content").innerHTML='<object type="text/html" data="home.html" ></object>';
}

answered Dec 18, 2016 at 10:28

Karthick Nagarajan

1,3462 gold badges15 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Karthick Nagarajan Over a year ago

you there @Karl Husten

golimar Over a year ago

If there are JS functions defined in home.html (or in .js files linked from home.html), are those functions accesible from the parent HTML page?

mohessaid · Accepted Answer · 2020-09-22 13:44:27Z

I wrote a simple example and hope it will help you: you can find a demo here and the solution files here

html part :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="nav">

  </div>

  <div id="mainpage-load">
    
    <div id="loading" >
       <img src="./img/loading-white.gif">
    </div>

  </div>
  <button id="loadcontent">Load Content</button>


  <script     src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

JavaScript app.js :

(function($){
  $(document).ready(function(){
   
     $(document).on("click", "#loadcontent", function(){
        $(document).load( "pages/main.html", function(resp, status, xhr){
            $("#loading").show();
            if (status == "success" && xhr.status == 200)
              $("#mainpage-load").prepend(resp);
            else{
                console.log("something wrong happend!");
            }
            $("#loading").hide();
        });
       
     });
    
  });
})(window.jQuery);

Collectives™ on Stack Overflow

Javascript dynamically load html into another html file

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related