Symfony 2的Twig模板中的JavaScript元素问题
[英]JavaScript element issue in Twig template with Symfony 2
问题描述
I have an issue with Javascript elements in my twig template. 
我的树枝模板中的Javascript元素有问题。
JS carousel element on top of the page is not loading when href path when site menu is changed from a id style reference (eg href = "#terms") to link to a different page (eg href={{ path('terms') }}. 当网站菜单从id样式引用（例如href =“ #terms”）更改为链接到其他页面（例如href = {{path（'terms' ）}}。
This is my part of index.html.twig 这是我的index.html.twig部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> {% block title %} Test Script {% endblock %}</title>
<link rel="shortcut icon" href="{{ asset('favicon.ico') }}"/>
{% block stylesheets %}
{% stylesheets 'bundles/useruser/css/*' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}" type="text/css"/>
{% endstylesheets %}
{% endblock %}
<script type="text/javascript" charset="utf-8" src="//code.jquery.com/jquery-2.1.4.min.js"></script>
{% block javascripts %}
{% javascripts '@UserUserBundle/Resources/public/js/*' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
</head>
<body>
{% block body %}
<div id="sTop" class="site-main">
<div class="site-header">
<div class="main-header">
<div class="container">
<div id="menu-wrapper">
<div class="row">
<div class="logo-wrapper col-md-4 col-sm-2 col-xs-8">
<h1>
<a>Travel Flex</a>
</h1>
</div>
<div class="col-md-8 col-sm-10 col-xs-4 main-menu text-left">
<ul class="menu-first hidden-sm hidden-xs">
<li class="active"><a href="#">{{ 'About' }}</a></li>
<li><a href="terms">{{ 'Terms & Conditions' }}</a></li>
<li><a href="privacy">{{ 'Privacy Policy' }}</a></li>
<li><a href="#contact">{{ 'Subscribe' }}</a></li>
<li><a href="unsubscribe">{{ 'Unsubscribe' }}</a></li>
</ul>
<a href="#" class="toggle-menu visible-sm visible-xs"><i class="fa fa-bars"></i></a>
</div>
</div>
</div>
<div class="menu-responsive hidden-md hidden-lg">
<ul>
<li class="active"><a href="#">{{ 'About' }}</a></li>
<li><a href="terms">{{ 'Terms & Conditions' }}</a></li>
<li><a href="privacy">{{ 'Privacy Policy' }}</a></li>
<li><a href="#contact">{{ 'Subscribe' }}</a></li>
<li><a href="unsubscribe">{{ 'Unsubscribe' }}</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="site-slider">
<div class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<div class="overlay"></div>
<img src="{{ asset('bundles/useruser/images/slide1.jpg') }}" alt="">
<div class="slider-caption visible-md visible-lg">
<h2>test text 1</h2>
<p>test text 1</p>
</div>
</li>
<li>
<div class="overlay"></div>
<img src="{{ asset('bundles/useruser/images/slide2.jpg') }}" alt="">
<div class="slider-caption visible-md visible-lg">
<h2>test text2</h2>
<p>test text 2</p>
</div>
</li>
<li>
<div class="overlay"></div>
<img src="{{ asset('bundles/useruser/images/slide3.jpg') }}" alt="">
<div class="slider-caption visible-md visible-lg">
<h2>test text 3</h2>
<p>test text 3</p>
</div>
</li>
</ul>
</div> <!-- /.flexslider -->
</div> <!-- /.slider -->
</div> <!-- /.site-slider -->
</div> <!-- /.site-main -->
Carousel element is loading fine when i use href = "#terms". 当我使用href =“ #terms”时，轮播元素加载正常。 However link does not work as it should (links in red rectangular not redirecting to a different page).
但是，链接无法正常工作（红色矩形中的链接无法重定向到其他页面）。
When i use href={{ path('terms') }} link works as it should, however carousel element is not loaded. 当我使用href = {{path（'terms'）}}链接时，链接应该可以正常工作，但是轮播元素未加载。 Looks like there is an issue with how i include js files into index.html.twig however i am not sure how to fir it.
我如何将js文件包含到index.html.twig中似乎存在问题，但是我不确定如何触发它。 Below is the error from browser console: 以下是来自浏览器控制台的错误：
Any assistance is appriciated 寻求任何帮助
1 个解决方案
解决方案1
0 2015-12-26 20:26:15
Replace the Include jQuery Library Code Snippet like below 替换如下的“包括jQuery库代码段”
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Checkout other jQuery CDN or save the file to your server. 签出其他jQuery CDN或将文件保存到服务器。
http://www.w3schools.com/jquery/jquery_get_started.asp http://www.w3schools.com/jquery/jquery_get_started.asp
Add Absolute URL for your Slider images 为滑块图像添加绝对URL
{{ absolute_url(asset('bundles/useruser/images/slide1.jpg')) }}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.