jQuery не загружается при первой попытке

Я использую jHipster для разработки моего приложения (JAVA + Angular JS).jQuery не загружается при первой попытке

В моем html у меня есть следующий код для вкладок пользовательского интерфейса jquery.

Когда я запускаю приложение и перехожу на соответствующую страницу, я не вижу ожидаемого стиля, а также нажатие на кнопку не работает.

Когда я вернусь на предыдущую страницу и вернусь на ту же загруженную страницу jquery, он работает на этот раз.

Почему это происходит?

Примечание: Я разместил класс стиля и импорт файлов js в том же файле html. Если я изменяю эти записи в свой файл index.html, это не работает во второй попытке.

Пробовал, включая скрипт в отдельном файле. Тот же результат, что и выше, не работает даже во второй попытке.

Любой, пожалуйста, предложите мне.

Кроме того, если кто-то работал на вкладках в jhipster, скажите, пожалуйста, как это сделать.

<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>

источник

2016-10-20 Smart Developer

У вас есть ошибки в консоли yout? –

никаких ошибок в помощнике консоли –

Вы проверили мой обновленный ответ? –

-1

Вы не должны комбинировать угловые и jQuery (это угловой антифокус). Если вы действительно хотите пройти этот путь, вам нужно переместить код вкладок на ваш угловой контроллер.

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

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

Возможно, вам стоит подумать о создании специальной вкладки.

E.g. как здесь: https://thinkster.io/angular-tabs-directive

Приветствиях

источник

2016-10-20 17:02:18

Это контент для комментария, а не ответ. – 1252748

@Stefan, спасибо, но есть ли у вас какой-нибудь пример того, как вы сказали? –

Да, но я не могу комментировать с менее чем 50 rep. И я также ответил на его вопрос: «вам нужно переместить код вкладок на ваш угловой контроллер» –

Попробуйте переместить стиль и JS в заголовке тега.

<!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>

источник

2016-10-20 17:35:28

dogan, я пробовал это, добавив к тегу в индексе .html –

Все еще получаю ту же самую проблему –

Я обновил полный html-код. Скопируйте и пропустите его в новом файле, и вы увидите, что он будет работать, как показано на изображении. –

Как я уже сказал, был простой способ сделать это с помощью углового самозагрузки ...

я достиг с помощью вкладок в моем приложении с приведенным ниже кодом.

<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>

источник

2016-10-21 16:30:12

jQuery не загружается при первой попытке

ответ

Смежные вопросы