1

Java Script and CSS is not loading when we navigate from home page.

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://java.sun.com/xml/ns/javaee"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
    id="WebApp_ID" version="3.0">

    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>

    <servlet-mapping>
        <servlet-name>solutionpages</servlet-name>
        <url-pattern>/solution/*</url-pattern>
    </servlet-mapping>
    <servlet>
        <servlet-name>solutionpages</servlet-name>
        <jsp-file>/solution.html</jsp-file>
    </servlet>
</web-app>

index.html

<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="This Site Provides Interview Puzzles">
<meta name="author" content="Satish Pahuja">
<title>Portfolio Dedicated for Interview Puzzles</title>



<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<!-- Custom CSS -->
<link href="css/1-col-portfolio.css" rel="stylesheet" type="text/css">
</head>

<body ng-app="puzzle">

    <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span> <span
                        class="icon-bar"></span> <span class="icon-bar"></span> <span
                        class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">PUZZLERAYSE</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse"
                id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

    <!-- Page Content -->
    <div class="container">

        <!-- Page Heading -->

        <!-- /.row -->

        <!-- Project One -->
        <div ng-controller="PuzzleList">

            <div ng-repeat="puzzle in puzzlesList">
                <div class="row">
                    <div class="col-md-7">
                        <h4>
                            <a href="{{puzzle.puzzleURL}}">{{puzzle.heading}}</a>
                        </h4>
                    </div>
                    <div class="col-md-5"></div>
                </div>

                <div class="row">
                    <div class="col-md-7">{{puzzle.question}}</div>
                    <div class="col-md-5">
                        <!-- <h3>Project One</h3>
                    <h4>Subheading</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        Laudantium veniam exercitationem expedita laborum at voluptate.
                        Labore, voluptates totam at aut nemo deserunt rem magni pariatur
                        quos perspiciatis atque eveniet unde.</p>
                    <a class="btn btn-primary" href="#">View Project <span
                        class="glyphicon glyphicon-chevron-right"></span></a> -->
                    </div>
                </div>
                <hr>
            </div>
        </div>
        <!-- /.row -->

        <!-- Pagination -->
        <div class="row text-center">
            <div class="col-lg-12">
                <ul class="pagination">
                    <li><a href="#">&laquo;</a></li>
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">&raquo;</a></li>
                </ul>
            </div>
        </div>
        <!-- /.row -->

        <hr>
        <!-- Footer -->
        <footer>
            <div class="row">
                <div class="col-lg-12">
                    <p>Copyright &copy; Puzzlerayse 2017</p>
                </div>
            </div>
            <!-- /.row -->
        </footer>

    </div>
    <!-- /.container -->

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.js"></script>

    <script src="js/angular.min.js"></script>


    <script>
    angular.module('puzzle', [])
    .controller('PuzzleList', function($scope, $http) {
        $http.get('http://localhost:8081/foodorderingrestapp/getallpuzzles/').
            then(function(response) {
                $scope.puzzlesList = response.data;
            });
    });
    </script>
</body>
</html>

solution.html

<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="This Site Provides Interview Puzzles">
<meta name="author" content="Satish Pahuja">
<title>Portfolio Dedicated for Interview Puzzles</title>



<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<!-- Custom CSS -->
<link href="css/1-col-portfolio.css" rel="stylesheet" type="text/css">
</head>

<body ng-app="puzzle">

    <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span> <span
                        class="icon-bar"></span> <span class="icon-bar"></span> <span
                        class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">PUZZLERAYSE_SOLUTION</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse"
                id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

    <!-- Page Content -->
    <div class="container">

        <!-- Page Heading -->

        <!-- /.row -->

        <!-- Project One -->
        <div ng-controller="PuzzleList">

            <div ng-repeat="puzzle in puzzlesList">
                <div class="row">
                    <div class="col-md-7">
                        <h4>
                            <a href="{{puzzle.puzzleURL}}">{{puzzle.heading}}</a>
                        </h4>
                    </div>
                    <div class="col-md-5"></div>
                </div>

                <div class="row">
                    <div class="col-md-7">{{puzzle.question}}</div>
                    <div class="col-md-5">
                        <!-- <h3>Project One</h3>
                    <h4>Subheading</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                        Laudantium veniam exercitationem expedita laborum at voluptate.
                        Labore, voluptates totam at aut nemo deserunt rem magni pariatur
                        quos perspiciatis atque eveniet unde.</p>
                    <a class="btn btn-primary" href="#">View Project <span
                        class="glyphicon glyphicon-chevron-right"></span></a> -->
                    </div>
                </div>
                <hr>
            </div>
        </div>
        <!-- /.row -->

        <!-- Pagination -->
        <div class="row text-center">
            <div class="col-lg-12">
                <ul class="pagination">
                    <li><a href="#">&laquo;</a></li>
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">&raquo;</a></li>
                </ul>
            </div>
        </div>
        <!-- /.row -->

        <hr>
        <!-- Footer -->
        <footer>
            <div class="row">
                <div class="col-lg-12">
                    <p>Copyright &copy; Puzzlerayse 2017</p>
                </div>
            </div>
            <!-- /.row -->
        </footer>

    </div>
    <!-- /.container -->

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.js"></script>

    <script src="js/angular.min.js"></script>


    <script>
    angular.module('puzzle', [])
    .controller('PuzzleList', function($scope, $http) {
        $http.get('http://localhost:8081/foodorderingrestapp/getallpuzzles/').
            then(function(response) {
                $scope.puzzlesList = response.data;
            });
    });
    </script>
</body>
</html>

I am using bootstrap with angular js but when I get landed to home page using below URL it is working fine.

http://localhost:8081/puzzleworld/

but when I am navigate from home page and using URL like below 

http://localhost:8081/puzzleworld/solution/xyz

CSS and Java Script is not loading.Please help me.

This is directory structure

Note:- No Java Servlet is defined only html files are present.

Using Chrome Debugger I am getting below error

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8081/puzzleworld/solution/css/bootstrap.css"

Satish Pahuja
  • 209
  • 1
  • 6
  • 20

1 Answers1

0

It is to do with the link paths, so it looks like, if one page is working and the other isnt...

Try changing this;

  <link href="css/1-col-portfolio.css" rel="stylesheet" type="text/css">

To this;

<link href="/css/1-col-portfolio.css" rel="stylesheet" type="text/css">
Sanspoof
  • 71
  • 5
  • I lost css and js in first page itself – Satish Pahuja Jun 21 '17 at 12:35
  • Reading your new comment, it looks like it is something to do with headers... This could help you... https://stackoverflow.com/questions/22631158/resource-interpreted-as-stylesheet-but-transferred-with-mime-type-text-html-see – Sanspoof Jun 21 '17 at 15:05