CODEWITHSUNDEEP
jquerytwitter-bootstrap-3
Ghost Rider
Ghost Rider

Reputation: 775

Bootstrap toggle tab not working in jsp page

I am trying a new web applications and this is the 1st time I am using the Bootstrap and JQuery. I have included the downloaded bootstrap folder under /resources/ folder in my webapp folder of my project. I have also placed the jquery-3.2.0.min.js file like this /resources/bootstrap/js/jquery-3.2.0.min.js

The problem is that I am getting the tabs displayed with bootstrap style but when I click on the individual tab's the contents are not getting displayed correctly. Irrespective of what ever tab i click, it will always shows the 1st tab's contents only.

Is there any thing wrong in the tags that I am using or do i need to some extra scripting in jQuery?

MyJSP page:

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ page session="false" %>
<html lang="en">
<head>
    <title>Select Questions for Exams</title>
    <meta charset="utf-8">
    <meta name="viewpoint" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/resources/bootstrap/css/bootstrap.min.css">
</head>
<body>
<h2>
    Select Exam Questions
</h2>

<c:url var="addAction" value="/exam/addExam" ></c:url>

<form:form action="${addAction}" commandName="examPatternInit">
    <c:if test="${!empty questionsMap}">
        <div class="container">
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#Test">Test</a></li>
                <c:forEach items="${questionsMap}" var="subjectEntry">
                    <li class="nav-item"><a role="tab" data-toggle="tab" href='#<c:out value="${subjectEntry.key}"/>'><c:out value="${subjectEntry.key}"/></a></li>
                </c:forEach>
            </ul>
            <div class="tab-content">
                <c:set var="firstTab" value="true"/>
                <div id='Test' class="tab-pane fade in active">
                    <h4>Testing Tab</h4>
                </div>
                <c:forEach items="${questionsMap}" var="subjectEntryTab">
                    <div id='<c:out value="${subjectEntryTab.key}"/>' class="tab-pane fade" role="tabpanel">
                        <c:forEach items="${subjectEntryTab.value}" var="question">
                            ${question}<br>
                        </c:forEach>
                    </div>
                </c:forEach>
            </div>
        </div>
    </c:if>
</form:form>
<br>
<script type="text/javascript">
$(document).ready(function(){
    $(".nav-tabs a").click(function(){
    $(this).tab('show');
    });
});
</script>
<script src="<%=request.getContextPath()%>/resources/bootstrap/js/jquery-3.2.0.min.js"></script>
<script src="<%=request.getContextPath()%>/resources/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

I am also adding the source code generated for this page( right-click on displayed page and viewing source) just to confirm that the contents of all the tabs are different.

view Source:

<html lang="en">
<head>
    <title>Select Questions for Exams</title>
    <meta charset="utf-8">
    <meta name="viewpoint" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/spring-mvc-hibernate/resources/bootstrap/css/bootstrap.min.css">
</head>
<body>
    <form id="examPatternInit" action="/spring-mvc-hibernate/exam/addExam" method="post">
        <div class="container">
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#Test">Test</a></li>
                    <li class="nav-item"><a role="tab" data-toggle="tab" href='#Computer Science'>Computer Science</a></li>
                    <li class="nav-item"><a role="tab" data-toggle="tab" href='#General Knowledge'>General Knowledge</a></li>
            </ul>
            <div class="tab-content">
                <div id='Test' class="tab-pane fade in active">
                    <h4>Testing Tab</h4>
                </div>
                    <div id='Computer Science' class="tab-pane fade" role="tabpanel">
                            [Ljava.lang.Object;@1a107bd3<br>
                            [Ljava.lang.Object;@30316703<br>
                    </div>
                    <div id='General Knowledge' class="tab-pane fade" role="tabpanel">
                            [Ljava.lang.Object;@7b620eac<br>
                            [Ljava.lang.Object;@62b17d7c<br>
                    </div>
            </div>
        </div>
</form>
<br>
<script type="text/javascript">
$(document).ready(function(){
    $(".nav-tabs a").click(function(){
    $(this).tab('show');
    });
});
</script>
<script src="/spring-mvc-hibernate/resources/bootstrap/js/jquery-3.2.0.min.js"></script>
<script src="/spring-mvc-hibernate/resources/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
</body>
</html>

Result I am getting:

enter image description here

Upvotes: 0

Views: 1188

Answers (1)

Gurkan Yesilyurt
Gurkan Yesilyurt

Reputation: 2675

id='Computer Science' contain space char. Try with the id that does not contain a space character.

The value must not contain any space characters.

you can use jstl functions lib. for example;

${fn:replace(subjectEntry.key,' ', '')}

this convert into your id ComputerScience. then it might work.

Upvotes: 1

Related Questions