jQuery doesnt get loaded on first attempt

I am using jHipster to develop my application (JAVA + Angular JS).

In my html i have the following code for jquery UI tabs.

When i launch my application and go to the respective page, i cant see the expected style and also clicking on the button doesn't work.

When i go back to previous page and come back to the same jquery loaded page, it works this time.

Why is it happening so??

Note: I have placed the style class and js file imports in the same html file. If I am changing these entries to my index.html file, its not working in the second attempt though.

Tried including the script in a separate file also. Same result as above not working even in the second attempt.

Anyone please suggest me.

Also, if anyone worked on tabs in jhipster, please tell me how to do it.

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus.    Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa  lectus.</p>
  </div>
  <div id="tabs-2">
    <p>Morbi tilorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, tur lorem enim, pretium nec, feugiat nec, luctus a, lacus.  </p>
  </div>
 </div>

 <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

 <script>
$(document).ready(function() {
    alert('ready!!');
    $(function () {
        $("#tabs").tabs();
    });
});
 </script>

Answers:

Answer

Try to move style and js in header tag.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Tabs - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#tabs" ).tabs();
  } );
  </script>
</head>
<body>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus.    Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa  lectus.</p>
    </div>
    <div id="tabs-2">
        <p>Morbi tilorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
    </div>
    <div id="tabs-3">
        <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, tur lorem enim, pretium nec, feugiat nec, luctus a, lacus.  </p>
    </div>
 </div>


</body>
</html>

Working like a charm

Answer

As I already told, there was a simple way to do this using angular bootstrap...

I have achieved using tabs in my application with the below code.

<uib-tabset active="activeJustified" justified="true">
    <uib-tab index="0" heading="Incharges">
    </uib-tab>
    <uib-tab index="1" heading="News">
    </uib-tab>
    <uib-tab index="2" heading="Meetings">
    </uib-tab>
    <uib-tab index="3" heading="Gallery">content</uib-tab>
</uib-tabset>
Answer

You should not combine Angular and jQuery (it's an Angular anti pattern). If you really want to go this way, you need to move the tabs code to your Angular controller.

var myApp = angular.module('myApp',[]);

myApp.controller('GreetingController', ['$scope', function($scope) {
  $(function () {
    // angular template content loaded
    $("#tabs").tabs(); //anti pattern!!!
  });
}]);

Maybe you should think about building a custom tabs directive.

E.g. like here: https://thinkster.io/angular-tabs-directive

Cheers

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.