CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Anna Klein
Anna Klein

Reputation: 2171

onClick with Bootstrap is not working

I want to achieve that after a click on a button (Bootstrap 3.3.7.1) it is marked as active. For that I actually just copy paste a code I found here on stackoverflow. But still, when I test it, the button doesn't show any behavior.

Here is my code:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head th:replace="template :: head">
</head>
<body>

<div class="container">
    <form method="post" action="specifyDetails">
        <h2>Chose what you want to trade</h2>
        <label>
            <select th:name="Products" class="selectpicker" multiple="multiple">
                <!--/*@thymesVar id="productList" type="java.util.List"*/-->
                <option th:each="product : ${productList}"><a th:text="${product}"></a></option>
            </select>
        </label>
        <button th:type="submit" class="btn btn-info">Send</button>
    </form>
    <form><a th:href="'orderview/'" href="#" class="btn btn-default btn-sm" role="button">Orderview only</a>
    </form>
    <input type="button" class="btn btn-info" value="Input Button"/>

    <script>$('.btn-info').click(function(e) {
        e.preventDefault();
        $(this).addClass('active');
    })</script>
</div>


<div th:replace="template :: footer"></div>
</body>
</html>

And here the template.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head">
    <meta charset="UTF-8"/>
    <!--/*@thymesVar id="title" type="String"*/-->
    <title th:text="${title}">Library trader</title>
</head>

<footer th:fragment="footer">
    <script th:src="@{/webjars/jquery/3.2.1/jquery.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js}"></script>
    <script th:src="@{/webjars/bootstrap-select/1.12.2/js/bootstrap-select.min.js}"></script>

    <link th:href="@{/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/webjars/bootstrap/3.3.7-1/css/bootstrap-theme.min.css}" rel="stylesheet"/>
    <link th:href="@{/webjars/bootstrap-select/1.12.2/css/bootstrap-select.min.css}" rel="stylesheet"/>
</footer>
</html>

Thank you very much!

Upvotes: 0

Views: 2339

Answers (3)

Suresh M Sidy
Suresh M Sidy

Reputation: 113

I think this the issue. You are finding the element with btn-info CSS Class.

Since there are two elements with the same CSS class name, it's failing to apply on-click event to each element.

So below code works as I'm iterating the $('.btn-info') so that every button with the class has on-click event.

/*$('.btn-info').click(function(e) {
        e.preventDefault();
        $(this).addClass('active');
    })*/

$('.btn-info').each(function( index ) {
  $(this).click(function(e) {
        e.preventDefault();
        $(this).addClass('active');
        alert("class Added")
    })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head th:replace="template :: head">
</head>
<body>

<div class="container">
    <form method="post" action="specifyDetails">
        <h2>Chose what you want to trade</h2>
        <label>
            <select th:name="Products" class="selectpicker" multiple="multiple">
                <!--/*@thymesVar id="productList" type="java.util.List"*/-->
                <option th:each="product : ${productList}"><a th:text="${product}"></a></option>
            </select>
        </label>
        <button th:type="submit" class="btn btn-info">Send</button>
    </form>
    <form><a th:href="'orderview/'" href="#" class="btn btn-default btn-sm" role="button">Orderview only</a>
    </form>
    <input type="button" class="btn btn-info" value="Input Button"/>

</div>


<div th:replace="template :: footer"></div>
</body>
</html>

I hope this might help. Thank you!!

Upvotes: 0

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

Add the ready function to your script :

<script>
    $(function(){
        $('.btn-info').click(function(e) {
            e.preventDefault();

            $(this).addClass('active');
        });
    });
</script>

Hope this helps.

Upvotes: 0

brk
brk

Reputation: 50346

Place click event handler in the footer because you are loading jquery after loading DOM

in footer

like

<footer th:fragment="footer">
    <script th:src="@{/webjars/jquery/3.2.1/jquery.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js}"></script>
    <script th:src="@{/webjars/bootstrap-select/1.12.2/js/bootstrap-select.min.js}"></script>
    <script>$('.btn-info').click(function(e) {
            e.preventDefault();
            $(this).addClass('active');
        })</script>

    //rest of the code
</footer>

Upvotes: 1

Related Questions