TechQA.

Apache tiles - css and javascript files not visible to child pages

2.7k views Asked by At

i'm working on a jsp application developed with Apache Tiles. In short i'm trying to minimize the number of files that get downloaded on navigating to a new page, i've moved all css and javascript to the root jsp (a template in tiles.xml) and i haven't changed any cache setting (it should cache resources by default if i remember correctly).
The problem is that now child pages doesn't render correctly, as if pages weren't able to find some files. if i put our application script file inside an intermediate template then everything works fine but it get downloaded on each page i navigate.
How could i solve this problem or find any helpfull hint ? till now web searching hasn't provided anything useful.

the code below is the tiles templates configuration and how pages are structured; please note that inner html fragments are load via jquery load function :

<definition name="root" template="/WEB-INF/jsp/tiles/layouts/root.jsp"></definition>
<definition name="HomeDOM" template="/WEB-INF/jsp/tiles/layouts/HomeDom.jsp">
<put-attribute name="menu" value="/WEB-INF/jsp/home/menu.jsp"></put-attribute>
</definition>
<definition name="partialDOM" template="/WEB-INF/jsp/tiles/layouts/partialDOM.jsp">
    <put-attribute name="submenu" value="/WEB-INF/jsp/tiles/common/empty.jsp" />
    <put-attribute name="stockHeader" value="/WEB-INF/jsp/tiles/common/empty.jsp" />
    <put-attribute name="main" value="/WEB-INF/jsp/tiles/common/empty.jsp" />
    <put-attribute name="footer" value="/WEB-INF/jsp/common/footer.jsp" />
    </definition>

    <definition name="home" extends="partialDOM">
    <put-attribute name="submenu" value="/WEB-INF/jsp/search/submenu.jsp" />
    <put-attribute name="main" value="/WEB-INF/jsp/home/Home.jsp" />
    </definition>

    <definition name="widgetop" template="/WEB-INF/jsp/tiles/layouts/widgetDOM.jsp">
    <put-attribute name="widget" value="/WEB-INF/jsp/home/widget.jsp" />
    </definition>

    <definition name="SimpleSearch" extends="partialDOM">
    <put-attribute name="submenu" value="/WEB-INF/jsp/search/submenu.jsp" />
    <put-attribute name="main" value="/WEB-INF/jsp/search/SimpleSearch.jsp" />
    </definition>

    <definition name="detail" template="/WEB-INF/jsp/tiles/layouts/widgetDOM.jsp">  
    <put-attribute name="widget" value="/WEB-INF/jsp/details/detail.jsp" />
    </definition>

root.jsp

<html>
<head>
... all css and js
includes myapp.js 
</head>
<body>
    <div class="modal-backdrop fade1 in" id="hide"></div>   
    <!-- "container" -->
        <div class="container">
            <div id="HomeDOM" >
                <!-- dinamically loaded by JQuery at document ready-->
            </div>
        </div>  
    <!-- End"container" -->

...some scripts... 

...some divs for modal windows...

</body>
</html>

HomeDom.jsp :

    <tiles:insertAttribute name="menu" />
    <div id="blocco">
            <div id="partialDOM">
            <!-- dinamically loaded by JQuery at document ready--> 
            </div>
    </div>
...some scripts...

I have to put myapp.js file in the following page too (partialDom) :

<script src="${root}/javascript/js/myapp.js"></script>


<tiles:insertAttribute name="submenu" />
<tiles:insertAttribute name="Header" />
<tiles:insertAttribute name="main" />
<tiles:insertAttribute name="footer" />

<script type="text/javascript" charset="utf-8">
    $j(document).ready(function($j) and other stuff     
</script>

EDIT : i've tried the solution described in the following post, i still see some downloads , should i replace all the jQuery.load with an ajax call? How do I stop jquery appending a unique id to scripts called via ajax?

jquery tiles cache-control
Original Q&A
1

There are 1 answers

0
QGA On

I suggest you to use <c:url> instead of jquery

Please see code below for your understanding

I have created a default tiles definition with a global css and js file. yourpage.jsp extends this definition and add two files to it: yourpage.js and yourpage.css

tiles.xml

<tiles-definitions>
    <definition name="app.base" template="/path/to/your/layout.jsp">
        <put-attribute name="title" value="Not Found" />
        <put-attribute name="header" value="/WEB-INF/tiles/header.jsp" />
        <put-attribute name="body" value="/WEB-INF/tiles/body.jsp" />
        <put-attribute name="footer" value="/WEB-INF/tiles/footer.jsp" />
        <put-list-attribute name="stylesheets">
            <add-attribute value="/static/resources/css/bootstrap.min.css" />           
            <add-attribute value="/static/resources/css/global.css" />
        </put-list-attribute>
        <put-list-attribute name="javascripts">
            <add-attribute value="/static/resources/js/jquery-2.1.4.min.js" />
            <add-attribute value="/static/resources/js/global.js" />
        </put-list-attribute>
    </definition>
    <definition name="yourpage" extends="app.base">
        <put-attribute name="title" value="Your Page" />
        <put-attribute name="body" value="/path/to/your/yourpage.jsp" />
        <put-list-attribute name="stylesheets" inherit="true">
            <add-attribute value="/static/resources/css/yourpage.css" />
        </put-list-attribute>
        <put-list-attribute name="javascripts" inherit="true">
            <add-attribute value="/static/resources/js/yourpage.js" />
        </put-list-attribute>
    </definition>
</tiles-definitions>

tiles.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
<tiles:importAttribute name="stylesheets"/>
<tiles:importAttribute name="javascripts"/>

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        <tiles:insertAttribute name="title">
        </tiles:insertAttribute>
    </title>

    <!-- stylesheets-->
    <c:forEach var="css" items="${stylesheets}">
       <link rel="stylesheet" type="text/css" href="<c:url value="${css}"/>">
    </c:forEach>
</head>

<body>
    <header>
        <tiles:insertAttribute name="header" />
    </header>
    <div class="body">
        <tiles:insertAttribute name="body" />
    </div>
    <footer>
        <tiles:insertAttribute name="footer" />
    </footer>

    <!-- scripts-->
    <c:forEach var="script" items="${javascripts}">
        <script src="<c:url value="${script}"/>"></script>
    </c:forEach> 
</body>
</html>

Hope this may be of help

Related Questions in JQUERY

Related Questions in TILES

Related Questions in CACHE-CONTROL

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions