Search code examples
javascriptjqueryspringspring-mvcjquery-ui-tabs

$(...).tabs() is not a function using Spring MVC and jQuery 3.1.0

I'm running a web portal locally using Spring MVC and I'm having difficulty getting the jQuery tabs to work properly. I always get the error $(...).tabs() is not a function.

Here is my jsp:

<!DOCTYPE html>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<html>
<head>
  <spring:url value="/resources/css/style.css" var="css" />
  <spring:url value="/resources/js/main.js" var="js" />
  <link rel='stylesheet' type='text/css' href="${css}">
  <script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
  <script src="${js}"></script>
  <title>Title</title>
</head>
<body> 

  <h1>Title</h1>
  <div id="tabs">
    <ul>
      <li><a href='#current-projects'>Current Projects</a></li>
      <li><a href='#our-vision'>Our Vision</a></li>
      <li><a href='#description'>About Us</a></li>
    </ul>
    <div id='current-projects' class='skill-block'>
      <h2>Current Projects</h2>
      <p class='description'>
        <div class='projects-button'>Show</div>
        <ul class='projects'>
          <li>Broadway</li>
          <li>MOVE</li>
        </ul>
      </p>
    </div>
    <div id='our-vision' class='skill-block'>
      <h2>Our Vision</h2>
      <p class='description'>
        <div class='projects-button'>Show</div>
        <ul class='projects'>
          <li>Password Validator</li>
          <li>Whale Talk</li>
        </ul>
      </p>
    </div>
    <div id='description' class='skill-block'>
      <h2>About Us</h2>
      <p class='description'>
        <div class='projects-button'>Show</div>
        <ul class='projects'>
          <li>Coming soon...</li>
        </ul>
      </p>
    </div>
  </div>

</body>

</html>

Here is my main.js (Note that all the other jQuery functionalities work, it's just the tabs() that has the error):

(function() {
    $(document).ready(function() {
        $('#tabs').tabs();
        $('.projects').hide();
        $('.projects-button').on('click', function(){   
            var button = $(this);
            button.next().slideToggle(400);
            button.toggleClass('active');
            button.text(button.hasClass('active') ? 'Hide' : 'Show');
        })
    });
})();

I've also tried downloading the jQuery file to load it locally but the same error occurs.

Solution

  • .tabs() is a jquery ui function .. you need to include jquery ui .. So after the line for include jquery insert this line

    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/j‌​query-ui.min.js"></s‌​cript>


    (function() {
    $(document).ready(function() {
        $('#tabs').tabs();
        $('.projects').hide();
        $('.projects-button').on('click', function(){   
            var button = $(this);
            button.next().slideToggle(400);
            button.toggleClass('active');
            button.text(button.hasClass('active') ? 'Hide' : 'Show');
        })
    });
})();
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
  
<h1>Title</h1>
<div id="tabs">
  <ul>
    <li><a href='#current-projects'>Current Projects</a></li>
    <li><a href='#our-vision'>Our Vision</a></li>
    <li><a href='#description'>About Us</a></li>
  </ul>
  <div id='current-projects' class='skill-block'>
    <h2>Current Projects</h2>
    <p class='description'>
      <div class='projects-button'>Show</div>
      <ul class='projects'>
        <li>Broadway</li>
        <li>MOVE</li>
      </ul>
    </p>
  </div>
  <div id='our-vision' class='skill-block'>
    <h2>Our Vision</h2>
    <p class='description'>
      <div class='projects-button'>Show</div>
      <ul class='projects'>
        <li>Password Validator</li>
        <li>Whale Talk</li>
      </ul>
    </p>
  </div>
  <div id='description' class='skill-block'>
    <h2>About Us</h2>
    <p class='description'>
      <div class='projects-button'>Show</div>
      <ul class='projects'>
        <li>Coming soon...</li>
      </ul>
    </p>
  </div>
</div>