У меня проблема с очень простым popover. поэтому я решил протестировать с примером страницы начальной загрузки, и без symfony проблем нет, но с symfony и twig кнопка ничего не делает.Symfony2 bootstrap popover не работает
До этого я тестировал с помощью jQuery mobile, а popover - это полная страница, а не всплывающее окно.
Я не знаю, где проблема заблаговременно за помощь :).
Исходный код в Firefox кажется ОК и код без symfony, это то же самое, когда я смотрю в исходном коде браузера: x.
с нуля без SF:
<html>
<head>
\t <title>popover</title>
\t <link rel="stylesheet" href="bootstrap.min.css">
\t <script src="jquery-2.1.4.min.js"></script>
\t <script src="bootstrap.min.js"></script>
</head>
<body>
\t <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
//here all it's ok
<script>
\t $(function() {
$('[data-toggle="popover"]').popover()
})
</script>
</body>
</html>
и SF-ти:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Sebastien Caumes</title>
<link rel="stylesheet" href="/sebastiencaumes/web/bundles/scsebastiencaumes/css/bootstrap.min.css">
<link rel="stylesheet" href="/sebastiencaumes/web/bundles/scsebastiencaumes/css/global.css">
<link rel="icon" type="image/x-icon" href="/sebastiencaumes/web/favicon.ico" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 header">
<button type="button" class="btn btn-primary btn-circle btn-xl"><i class="glyphicon glyphicon-list"></i>
</button>
HEADER
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-6">
DESCRIPTIF COMPETENCES ETC
</div>
<div class="col-md-6">
<div class="test-box">projet1
<a href="/sebastiencaumes/web/app_dev.php/work/3">clic</a>
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
<script>
$(function() {
$('[data-toggle="popover"]').popover()
})
</script>
</div>
<div class="test-box">projet2</div>
<div class="test-box">projet3</div>
<div class="test-box">projet4</div>
<div class="test-box">projet5</div>
<div class="test-box">projet6</div>
<div class="test-box">projet7</div>
<div class="test-box">projet8</div>
<div class="test-box">projet9</div>
<div class="test-box">projet10</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 footer">
FOOTER
<div class="pull-right">
<i class="glyphicon glyphicon-blackboard"></i>
<i class="glyphicon glyphicon-blackboard"></i>
<i class="glyphicon glyphicon-blackboard"></i>
</div>
</div>
</div>
</div>
<script src="/sebastiencaumes/web/bundles/scsebastiencaumes/js/jquery-2.1.4.min.js"></script>
<script src="/sebastiencaumes/web/bundles/scsebastiencaumes/js/bootstrap.min.js"></script>
<script src="/sebastiencaumes/web/bundles/scsebastiencaumes/js/global.js"></script>
</body>
</html>
и SF страницы ти функции Jquery:
{% extends'SCSebastienCaumesBundle::layout.html.twig' %}
{% block portfolio %}
<div class="test-box">projet1
<a href="{{ path('sc_sebastien_caumes_work_detail', {id : 3}) }}">clic</a>
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing
content. It's very engaging. Right?">Click to toggle popover</button>
<script>
$(function() {
$('[data-toggle="popover"]').popover()
})
</script>
</div>
<div class="test-box">projet2</div>
<div class="test-box">projet3</div>
<div class="test-box">projet4</div>
<div class="test-box">projet5</div>
<div class="test-box">projet6</div>
<div class="test-box">projet7</div>
<div class="test-box">projet8</div>
<div class="test-box">projet9</div>
<div class="test-box">projet10</div>
{% endblock %}
Я думаю, что это очень простая проблема, но я ее не вижу.
Пожалуйста, отредактируйте свои примеры, они, кажется, смешаны вместе – DelightedD0D