tj
Dynamic include dependencies into html blocks
Hi guys, I love using EJS but at same time I can see one feature is missing comparing with JSTL. I cannot find way how to include into parent HTML template head/body/footer areas some script or styles from the children HTML.
Let me give you example and suggestion:
index.html
<html>
<ejs:head>
<script src="jquery.js"/>
</ejs:head>
<ejs:body><% include content.html %></ejs:body>
</html>
content.html
<div><% include component1.html %></div>
<div><% include component2.html %></div>
component1.html
<ejs:head>
<script src="jquery-ui.js"/>
<link href="bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-theme.min.css" rel="stylesheet">
</ejs:head>
<div class="datefiled"></div>
component2.html
<ejs:head>
<script src="google-map-api.js"/>
<link href="googlemap.min.css" rel="stylesheet">
</ejs:head>
<div class="map"></div>
In this example i am trying dynamically include JS dependencies into parent HTML head tags.
Output
<html>
<head>
<script src="jquery.js"/>
<script src="jquery-ui.js"/>
<link href="bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-theme.min.css" rel="stylesheet">
<script src="google-map-api.js"/>
<link href="googlemap.min.css" rel="stylesheet">
</head>
<body>
<div class="datefiled"></div>
<div class="map"></div>
</body>
</html>
Defiantly I can hardcoded in main HTML but my goal in case some component I will disable (comment) I don't need to load component-dependencies JS/CSS libraries. Plus is cleaner to see what libraries or styles needs to load for specific module/component.
Please check a link how is defined in JSTL. And I hope we will get this feature soon.
https://www3.ntu.edu.sg/home/ehchua/programming/java/JavaServerFaces.html#zz-2.2
You can use jquery hide and show option. Separate div for each include and then show by clickable events
