4

I have a part of html code which is repeating on every of my page and i want to reuse it.

There is already a very nice link: Include another HTML file in a HTML file

I have used jQuery to load the html file (separate html file which i call template).

If that html file is static everything is working fine. But if my template file includes the elements which are using class (CSS) which is using java script to load - then it's not being loaded. Even if in original html file i am referencing correct css/java scripts in head section. Any ideas ?

Thanks,

Community
  • 1
  • 1
user2913139
  • 557
  • 2
  • 5
  • 13
  • 2
    If the page is static SSI Includes may be a better option, then from the perspective of JS & CSS the page is a complete entity. – Alex K. Aug 24 '14 at 10:06
  • I agree with @AlexK. Use SSI (ServerSide Includes) and separate one file into `header.shtml` which contains `...blah blah blah ` and then one for `footer.shtml` which includdes `
    ... blah blah blah
    ` and then each document can work respectively within these bounds without worrying about CSS styling etc.     – Ohgodwhy Aug 24 '14 at 10:14
  • If you have to do it that way. Put all your page-load scripts in a function, then after you load in your content from the other HTML files using jQuery, call that function to re-execute all your jquery/javascript. – Jonathon Aug 24 '14 at 10:15
  • Any reason to do it client only? – Christian Gollhardt Aug 24 '14 at 10:25
  • I am using Tomcat (java servlet). I want to separate logic from data (MVC). I am returning just data which is rendered on jsp page (via JSTL). That is why i do not want to return any html content from the server itself. How should i do it in a correct way to not repeat the same html/rendering code on every jsp page ? – user2913139 Aug 24 '14 at 10:55

1 Answers1

-2

If you wanna include page1.html into an Div with id insert-into-me . page2.html.

Then using Jquery this will work!

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#insert-into-me").load("page1.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="insert-into-me"></div>
  </body> 
</html>

Using JSP:

    <%@include file="page2.jsp" %> 
                or
    <jsp:include page="..." />

where you want to include in page1

Raja Sekar
  • 2,062
  • 16
  • 23
  • I included a navigation element in multiple pages like this: `` But this works just for html-files in the same directory "subdir". The navigation.html cannot be reached from the index.html in the upper main directory "dir". How can I solve this issue? – peng Mar 27 '19 at 16:25