bootstrap not loading on a specific url in my spring boot project

467 views Asked by At

iam using bootstrap in my project,
to do that iam including it and jquery in my pom.xml, and i add

 href="webjars/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" 
 src="webjars/jquery/1.9.1/jquery.min.js"
 script src="webjars/bootstrap/3.3.6/js/bootstrap.min.js"

in my jsp, and all of them seem to run bootstrap fine, only one, which is at directory "/student/{Cid}", just wont load bootstrap, it looks like plane html with no css.

here is my student controller:

@Controller
@RequestMapping(value = "/student")
public class StudentController {

@Autowired
private StudentDao dao;

@RequestMapping(method = RequestMethod.GET)
public String showStudentPage(ModelMap model, HttpServletRequest request) {
    String UserID = SecurityContextHolder.getContext().getAuthentication().getName();

    Student currentStudent = dao.getStudent(Integer.parseInt(UserID));
    model.put("name", currentStudent.getName());
    ArrayList<CourseMark> list =  dao.getStudentCourses(currentStudent.getId());
    model.put("StudentCourse",list);

    return "studentPage";
}
@RequestMapping(method = RequestMethod.POST)
public String test(@RequestParam String Cid) {
    return "redirect:/student/"+Cid;
}

@RequestMapping(value = "/{Cid}", method = RequestMethod.GET)
public String showMarkDetails(ModelMap model,@PathVariable String Cid) {
    String UserID = SecurityContextHolder.getContext().getAuthentication().getName();

    List<Float> marks = dao.getCourseMarks(Cid);
    CourseMark CM=dao.getStudentCourse(Integer.parseInt(UserID),Cid);

    double max = Collections.max(marks);
    double min = Collections.min(marks);
    double avg = marks.stream().mapToDouble(d -> d).sum() / marks.size();
    Collections.sort(marks);
    double mid = marks.size() % 2 != 0 ? marks.get(marks.size() / 2) :
            (marks.get(marks.size() / 2) + marks.get(marks.size() / 2 - 1)) / 2;
    model.put("ID",Cid);
    model.put("Mark",CM.getMark());
    model.put("min",String.format("%.1f",min));
    model.put("max",String.format("%.1f",max));
    model.put("avg",String.format("%.1f",avg));
    model.put("mid",String.format("%.1f",mid));
    model.put("Cname",CM.getCourseName());

    return "markDetails";
}

}

my pom :

   <?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven- 
 4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.6.7</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.gradingSystem</groupId>
    <artifactId>spring-grading-system</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>war</packaging>
    <name>spring-grading-system</name>
    <description>part 3 of the webApp assignment</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-security</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-tomcat</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.security</groupId>
            <artifactId>spring-security-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
            <version>2.5.0</version>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.25</version>
        </dependency>
        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
        </dependency>
        <dependency>
            <groupId>org.apache.taglibs</groupId>
            <artifactId>taglibs-standard-spec</artifactId>
            <version>1.2.5</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
            <version>3.3.6</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>1.9.1</version>
        </dependency>
        <dependency>
        <groupId>org.apache.taglibs</groupId>
        <artifactId>taglibs-standard-impl</artifactId>
        <version>1.2.5</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

the jsp im trying to use bootstrap on :

<html>
<head>
    <title>Details of ${Cname}</title>
    <link href="webjars/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h1 style="margin:50px;margin-top:30px;">Details of ${Cname}</h1>
    <table class="table">
        <thead>
            <tr>
                  <th>ID</th>
                  <th>Your Mark</th>
                  <th>Course Minimum</th>
                  <th>Course Maximum</th>
                  <th>Course average</th>
                  <th>Course median</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td >${ID}</td>
                <td >${Mark}</td>
                <td >${min}</td>
                <td >${max}</td>
                <td >${avg}</td>
                <td >${mid}</td>
            </tr>
        </tbody>
    </table>
    <form action="/student" method="GET">
        <input type="submit" value="Back" class="btn btn-primary" style="width: 100px;">
    </form>
    </div>
    <script src="webjars/jquery/1.9.1/jquery.min.js"></script>
    <script src="webjars/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

i cant figure out what the problem is ive tried turning off security and it didnt work. the bootstrap seems to run everywhere else. but when i get into that url, it just wont load.

1

There are 1 answers

0
Grim Ranger On

it was because im using a relative path, my solution was to add"../" to the start of the link and it fixed it ! href="../webjars/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" thanks to @HopeyOne