Include script from external file into html

Question

I have a thymeleaf template for form input where I use a js script. When in template it works fine but when I try to exclude it to external file it stops working. Probably I don't import it correctly but don't know what to change here because everything seems normal. Here are template and script (langSelect.js) files

<!DOCTYPE HTML>
<html xmlns:th="https://www.thymeleaf.org">
<header>
    <title th:text="#{input.form.title}"></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</header>
<body>
<h1 th:text="#{input.form}"></h1>
<div class="col-md-6">
    <form action="#" th:action="@{/register}" th:object="${userForm}" method="post">
        <div class="form-row">
            <div class="form-group col">
                <label th:text="#{first.name}"></label>
                <input type="text" th:unless="${#fields.hasErrors('firstName')}" class="form-control"
                       th:placeholder="#{first.name}" th:field="*{firstName}">
                <input type="text" th:if="${#fields.hasErrors('firstName')}" class="form-control alert-danger"
                       th:placeholder="#{first.name}" th:field="*{firstName}">
                <span th:if="${#fields.hasErrors('firstName')}" th:errors="*{firstName}"></span>
            </div>
            <div class="form-group col">
                <label th:text="#{last.name}"></label>
                <input type="text" th:unless="${#fields.hasErrors('lastName')}" class="form-control"
                       th:placeholder="#{last.name}" th:field="*{lastName}">
                <input type="text" th:if="${#fields.hasErrors('lastName')}" class="form-control alert-danger"
                       th:placeholder="#{last.name}" th:field="*{lastName}">
                <span th:if="${#fields.hasErrors('lastName')}" th:errors="*{lastName}"></span>
            </div>
        </div>
        <div class="form-group">
            <label th:text="#{email}"></label>
            <input type="text" th:unless="${#fields.hasErrors('email')}" class="form-control"
                   th:placeholder="#{email}" th:field="*{email}">
            <input type="text" th:if="${#fields.hasErrors('email')}" class="form-control alert-danger"
                   th:placeholder="#{email}" th:field="*{email}">
            <span th:if="${#fields.hasErrors('email')}" th:errors="*{email}"></span>
        </div>
        <div class="form-group">
            <label th:text="#{password}"></label>
            <input type="text" th:unless="${#fields.hasErrors('passwordsEqual')}" class="form-control"
                   th:placeholder="#{password}" th:field="*{password}">
            <input type="text" th:if="${#fields.hasErrors('passwordsEqual')}" class="form-control alert-danger"
                   th:placeholder="#{password}" th:field="*{password}">
            <span th:if="${#fields.hasErrors('passwordsEqual')}" th:errors="*{password}"></span>
        </div>
        <div class="form-group">
            <label th:text="#{password.repeat}"></label>
            <input type="text" th:unless="${#fields.hasErrors('passwordsEqual')}" class="form-control"
                   th:placeholder="#{password.repeat}" th:field="*{passwordRepeat}">
            <input type="text" th:if="${#fields.hasErrors('passwordsEqual')}" class="form-control alert-danger"
                   th:placeholder="#{password.repeat}" th:field="*{passwordRepeat}">
            <span class="error" th:if="${#fields.hasErrors('passwordsEqual')}" th:errors="*{passwordsEqual}"></span>
        </div>
        <input class="btn-primary" type="submit" value="Submit"/> <input class="btn-primary" type="reset"
                                                                         value="Reset"/>
    </form>
    <p></p>
    <p></p>
    <p></p>
    <span th:text="#{lang.change}"></span>
    <select id="locales">
        <option value=""></option>
        <option value="en" th:text="#{lang.eng}"></option>
        <option value="ru" th:text="#{lang.ru}"></option>
        <script type="javascript" src="langSelect.js"></script>
    </select>

</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"></script>
</body>
</html>

$(document).ready(function () {
    $("#locales").change(function () {
        var selectedOption = $('#locales').val();
        var queryString = window.location.search;
        var urlParams = new URLSearchParams(queryString);
        if (selectedOption !== '') {
            var newUrl;
            if (urlParams.has('lang')) {
                var reExp = /lang=\w+/;
                newUrl = queryString.replace(reExp, "lang=" + selectedOption);
            } else {
                if (queryString.includes('?')) {
                    newUrl = queryString.concat("&lang=" + selectedOption);
                } else {
                    newUrl = queryString.concat("?lang=" + selectedOption);
                }
            }
            window.location.replace(newUrl);
        }
    });
});

Petar Bivolarski · Accepted Answer · 2020-03-09 14:27:41Z

1

Please use th:src like this:

 <script th:src="@{/js/langSelect.js}"></script>

Assuming you have your file inside the js folder, which is in your static folder - because the static folder is assumed to be the root path.

If you have your file directly under the static folder, try this:

<script th:src="@{langSelect.js}"></script>

Also, note that you don`t have to import your script on the exact place it is needed.

Your script will run automatically, when your page has completed loading - so it basically does not matter where you put it, but usually before the closing body tag is considered a good practice (so there together with the other scripts).

edited Mar 9, 2020 at 14:27

answered Mar 6, 2020 at 20:03

Petar Bivolarski

1,76713 silver badges20 bronze badges

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

1 Comment

Johnny B. Goode Over a year ago

totally missed the static feature ><

Collectives™ on Stack Overflow

Include script from external file into html

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related