Spring boot not recognizing the Javascript files

Question

I am using spring boot and I have a jsp file which is:

<%@ include file="common/header.jsp" %>
    <%@ include file="common/navigation.jsp" %>
        <div class="container">
            <p>page to add new employee</p>
            <div class="container">

                <form>
                    <label>iNumber</label>
                    <input name="iNumber" name="iNumber" type="text" class="form-control" required="required" />

                    <label>Joined Date</label>
                    <input name="joinedDate" id="joinedDate" type="text" class="form-control" required="required" />

                    <label>Position</label>
                    <input name="position" id="position" type="text" class="form-control" required="required" />

                    <label>Reports To</label>
                    <input name="reportsTo" id="reportsTo" type="text" class="form-control" required="required" />

                    <label>Cubicle No</label>
                    <input name="cubicleNo" id="cubicleNo" type="text" class="form-control" required="required" />

                    <label>Job type</label>
                    <input name="jobType" id="jobType" type="text" class="form-control" required="required" />

                    <button type="submit" id="btn-add" class="btn btn-primary btn-lg">Add Employee
                    </button>
                </form>
            </div>

        </div>
        <%@ include file="common/footer.jsp" %>
        <script type="text/javascript" src="js/main.js"></script>

After the footer,I am adding n JS file,but this JS file is not called when I click the "Add" button.I tried to debug using alert and console but,the alert is not happening when i press the "Add" button in jsp.

$(document).ready(function () {

    $("#btn-add").submit(function (event) {
       alert();
        //stop submit the form, we will post it manually.
        event.preventDefault();
         console.log("hitted");
        fire_ajax_submit();

    });

});

function fire_ajax_submit() {

var jsonData={
      "iNumber":$("#iNumber").val(),
       "fullName":$("#fullName").val(),
       "joinedDate":$("#joinedDate").val(),
         "position":$("#position").val(),
       "reportsTo":$("#reportsTo").val(),
        "cubicleNo":$("#cubicleNo").val(),
      "jobType":$("#jobType").val()
};

    console.log(jsonData);
}

And when I also press the "Add" in JSP then I am seeing my url is sending data like:

http://localhost:8080/add-employee?iNumber=i12312&joinedDate=10%2F12%2F2019&position=SE&reportsTo=ASDD&cubicleNo=23&jobType=ASAS

I am trying to send the Post request through AJAX,but my JS file is not recognized when I click the Add button.

My header is:

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>

<html>

<head>
<title>First Web Application</title>
<link href="webjars/bootstrap/4.3.1/css/bootstrap.min.css"
    rel="stylesheet">

</head>

<body>

My footer is:

<script src="webjars/jquery/3.4.0/jquery.min.js"></script>
 <script src="webjars/bootstrap/4.3.1/js/bootstrap.min.js"></script>
 <script
        src="webjars/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>

        <script>
                $('#joinedDate').datepicker({
                    format : 'dd/mm/yyyy'
                });
            </script>
</body>

            </html>

my pom.xml is:

<?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.2.1.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.ashwin</groupId>
    <artifactId>vemployee</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>vemployee</name>
    <description>Demo project for Spring Boot for offc</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>

        <!-- https://mvnrepository.com/artifact/jstl/jstl -->
        <dependency>
            <groupId>jstl</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>

        <!-- needed for jsp -->
        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
            <version>9.0.27</version>
        </dependency>

        <!--bootsrap and jquery-->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
            <version>4.3.1</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.4.0</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/org.webjars/bootstrap-datepicker -->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap-datepicker</artifactId>
            <version>1.7.1</version>
        </dependency>

        <!--        <dependency>-->
<!--            <groupId>com.oracle.ojdbc</groupId>-->
<!--            <artifactId>ojdbc8</artifactId>-->
<!--            <scope>runtime</scope>-->
<!--        </dependency>-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
    </dependencies>

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

</project>

The JS file i have put inside in resources/static/js folder.

Troley · Accepted Answer · 2019-12-01 09:20:51Z

1

$("#btn-add").submit(function (event) { with this line you are trying to submit a button and not a form. Change the .submit to .click, so that you get: $("#btn-add").click(function (event) {

answered Dec 1, 2019 at 9:20

Troley

1,7182 gold badges15 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Spring boot not recognizing the Javascript files

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related