0

Two html files are being included into another html file, following advice from this post: (Include another HTML file in a HTML file). A JavaScript is being used to achieve that, but one of the files loads perfectly and the other doesn't because it contains a small JavaScript. I wonder if there’s a way to fix that without having to use a method different from JavaScript for the includes. Please help me.

I have tested the JS with other includes and it works like a charm. When I remove the small JS from the include it works, but the JS needs to be in the include. Google and StackOverflow don't have a solution to the problem.

This is the include (footer.html) that is being loaded through JS, which doesn't load:

                    <p>
                        Copyright &copy;
                        <script>
                            document.write(new Date().getFullYear());
                        </script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
                    </p>

As you see there's a small JS which prevent's the file from loading.

And this is the html file where the footer.html is being loaded through JS:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>This is a Webpage</title>
    <SCRIPT src="js/jquery-3.2.1.min.js"></SCRIPT>
<script>
  $(function(){
    var includes = $('[data-include]');
    jQuery.each(includes, function(){
      var file = '/en/inc/' + $(this).data('include') + '.html';
      $(this).load(file);
    });
  });
</script>
</head>
<body>
<div data-include="menu"></div>
<BR><BR><BR>
Content goes here
<BR><BR><BR>
<div data-include="footer"></div>
</body>
</html>

The complete webpage gets blocked. That means you only see the number "2019" instead of the webpage.

Ramon D Marin
  • 83
  • 10
  • 1
    NEVER document.write after load – mplungjan Aug 24 '19 at 18:16
  • _This question was caused by a problem that can no longer be reproduced or a simple typographical error. While similar questions may be on-topic here, this one was resolved in a manner unlikely to help future readers._ – mplungjan Aug 24 '19 at 18:17
  • add your javascript code in `$(document).load(function(){ })` after include jquery and another advice don't add script tag in the head but it at the end of your body – Joseph Aug 24 '19 at 18:24
  • "add your javascript code in $(document).load(function(){ }) after include jquery" The former advice I don't understand @mplungjan – Ramon D Marin Aug 24 '19 at 18:52
  • I had the script tag at the end of body and the script didn't work; then I put it in the `head` and it did @mplungjan – Ramon D Marin Aug 24 '19 at 18:55
  • _This question was caused by a problem that can no longer be reproduced or a simple typographical error. While similar questions may be on-topic here, this one was resolved in a manner unlikely to help future readers_. Do you think I should rephrase the question, @mplungjan? – Ramon D Marin Aug 24 '19 at 19:14
  • @mplungjan, I think this question does help future readers because there are lots of beginners like me out there consulting StackOverflow – Ramon D Marin Aug 24 '19 at 20:52

1 Answers1

1

The other page will be inserted after the script completes and the document is loaded, so the document.write will replace the current page.

Don't use document.write - use DOM methods to select and insert text instead, for example:

<p id="rights"></p>
<script>
  document.querySelector('#rights').innerHTML = `Copyright &copy; ${new Date().getFullYear()}
  All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>`;
</script>

(if all pages which include this subpage also use jQuery, you can use it instead of document.querySelector)

CertainPerformance
  • 356,069
  • 52
  • 309
  • 320
  • The problem was solved. Thank you so much guys. However, by using this script, I was trying to solve the problem I explained in this post (https://stackoverflow.com/questions/57595521/rule-transform-translatey-in-menu-doesn-t-work-properly-when-menu-is-loaded-i). My problem didn’t get solved. Can any of you guys help me, please? – Ramon D Marin Aug 24 '19 at 20:43