将Jquery与细枝一起使用_Jquery_Twig

将Jquery与细枝一起使用

jquery twig

将Jquery与细枝一起使用,jquery,twig,Jquery,Twig,我正在尝试将jquery与tiwg结合使用，并且有一些文件需要包含到html模板中。我有一个base.html模板，然后被其他模板扩展，如下所示。每次我添加对所需JQuery脚本的引用时，页面都不会加载。我一定是做错了什么谢谢 {% extends "base.html" %} {% block content %}  {% endblock %} {% block javascripts %}

我正在尝试将jquery与tiwg结合使用，并且有一些文件需要包含到html模板中。我有一个base.html模板，然后被其他模板扩展，如下所示。每次我添加对所需JQuery脚本的引用时，页面都不会加载。我一定是做错了什么

谢谢

 {% extends "base.html" %}

    {% block content %}
    <!-- page content -->

    {% endblock %}
    {% block javascripts %}
        <script type="text/javascript" src="{{ assets('js/jquery.min.js') }}"></script>
        <script type="text/javascript" src="{{ assets('js/wizard/jquery.smartWizard.js') }}"></script>

    {% endblock %}

{%extends“base.html”%}
{%block content%}
{%endblock%}
{%block javascripts%}
{%endblock%}

我已经将jquery添加到页面的顶部而不是底部，我仍然无法让jquery智能向导工作，这是我的代码。对jquery的引用位于base.html中

{% extends "base.html" %}

{% block content %}
<!-- page content -->

<div class="row">
 <div id="wizard" class="swMain">
  <ul>
    <li><a href="#step-1">
          <label class="stepNumber">1</label>
          <span class="stepDesc">
             Step 1<br />
             <small>Step 1 description</small>
          </span>
      </a></li>
    <li><a href="#step-2">
          <label class="stepNumber">2</label>
          <span class="stepDesc">
             Step 2<br />
             <small>Step 2 description</small>
          </span>
      </a></li>
    <li><a href="#step-3">
          <label class="stepNumber">3</label>
          <span class="stepDesc">
             Step 3<br />
             <small>Step 3 description</small>
          </span>                   
       </a></li>
    <li><a href="#step-4">
          <label class="stepNumber">4</label>
          <span class="stepDesc">
             Step 4<br />
             <small>Step 4 description</small>
          </span>                   
      </a></li>
  </ul>
  <div id="step-1">   
      <h2 class="StepTitle">Step 1 Content</h2>
       <!-- step content -->
  </div>
  <div id="step-2">
      <h2 class="StepTitle">Step 2 Content</h2> 
       <!-- step content -->
  </div>                      
  <div id="step-3">
      <h2 class="StepTitle">Step 3 Title</h2>   
       <!-- step content -->
  </div>
  <div id="step-4">
      <h2 class="StepTitle">Step 4 Title</h2>   
       <!-- step content -->                         
  </div>
</div>                   

 </div>
{% endblock %}
{% block javascripts %}
<script type="text/javascript" src="assets/js/wizard/jquery.smartWizard.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
      // Initialize Smart Wizard
        $('#wizard').smartWizard();
  }); 
</script>


{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript" src="{{ asset('js/wizard/jquery.smartWizard.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            // Initialize Smart Wizard
            $('#wizard').smartWizard();
        }); 
    </script>
{% endblock %}

{%extends“base.html”%}
{%block content%}






第1步内容
第2步内容
步骤3标题
步骤4标题
{%endblock%}
{%block javascripts%}
$（文档）.ready（函数（）{
//初始化智能向导
$（“#向导”）.smartWizard（）；
}); 
{%endblock%}

使用symfony和twig渲染模板时，这是一个众所周知的问题：

请注意，您的内容是在javascript块之前呈现的您的base.html文件应如下所示：

<!DOCTYPE>
<html>
   <head>
     <!-- Here your css files and jQuery-->
     <script type="text/javascript" src="{{ assets('js/jquery.min.js') }}"></script>
   </head>
   <body>
     {% block content %}
     {# 
        The content of other files will be rendered here !
        That means you need to include jQuery before this point
        in your base.html
      #}

     {% endblock %}
    </body>
{% block javascripts %}
    {#if you include jquery here, the scripts that need jquery will fail because jquery exists since this point !#}
    <script type="text/javascript" src="{{ assets('js/wizard/jquery.smartWizard.js') }}"></script>

{% endblock %}
</html>


{%block content%}
{# 
其他文件的内容将在此处呈现！
这意味着您需要在这一点之前包含jQuery
在base.html中
#}
{%endblock%}
{%block javascripts%}
{#如果您在这里包括jquery，那么需要jquery的脚本将失败，因为从这一点开始jquery就存在了！#
{%endblock%}

然后在任何扩展文件中都可以执行jQuery

注意：如果base.html.twig文件中存在javascript块，则无法在扩展视图中创建另一个javascript块，因为内容将被替换（请使用{parent（）}}解决此问题，请阅读）

使用symfony和twig渲染模板时，这是一个已知问题：

请注意，您的内容是在javascript块之前呈现的您的base.html文件应如下所示：

<!DOCTYPE>
<html>
   <head>
     <!-- Here your css files and jQuery-->
     <script type="text/javascript" src="{{ assets('js/jquery.min.js') }}"></script>
   </head>
   <body>
     {% block content %}
     {# 
        The content of other files will be rendered here !
        That means you need to include jQuery before this point
        in your base.html
      #}

     {% endblock %}
    </body>
{% block javascripts %}
    {#if you include jquery here, the scripts that need jquery will fail because jquery exists since this point !#}
    <script type="text/javascript" src="{{ assets('js/wizard/jquery.smartWizard.js') }}"></script>

{% endblock %}
</html>


{%block content%}
{# 
其他文件的内容将在此处呈现！
这意味着您需要在这一点之前包含jQuery
在base.html中
#}
{%endblock%}
{%block javascripts%}
{#如果您在这里包括jquery，那么需要jquery的脚本将失败，因为从这一点开始jquery就存在了！#
{%endblock%}

然后在任何扩展文件中都可以执行jQuery

注意：如果base.html.twig文件中存在javascript块，则无法在扩展视图中创建另一个javascript块，因为内容将被替换（使用{parent（）}解决此问题，请阅读）
更新我认为主要错误在于资产调用中有一个“s”
它应该是没有“s的资产
而不是

{{ assets('js/jquery.min.js') }}

假设jquery是在base.html.twig中调用的，那么当您在模板中重写它时，可以使用{{parent（）}}来获取块javascripts的初始内容
因此，您的base.html如下所示

{% block javascripts %} <script type="text/javascript" src="{{ asset('js/jquery.min.js') }}"></script> {% endblock %}

{%block javascripts%} {%endblock%}
以及扩展base.html的模板

{% extends "base.html" %} {% block content %}  <div class="row"> <div id="wizard" class="swMain"> <ul> <li><a href="#step-1"> <label class="stepNumber">1</label> <span class="stepDesc"> Step 1<br /> <small>Step 1 description</small> </span> </a></li> <li><a href="#step-2"> <label class="stepNumber">2</label> <span class="stepDesc"> Step 2<br /> <small>Step 2 description</small> </span> </a></li> <li><a href="#step-3"> <label class="stepNumber">3</label> <span class="stepDesc"> Step 3<br /> <small>Step 3 description</small> </span> </a></li> <li><a href="#step-4"> <label class="stepNumber">4</label> <span class="stepDesc"> Step 4<br /> <small>Step 4 description</small> </span> </a></li> </ul> <div id="step-1"> <h2 class="StepTitle">Step 1 Content</h2>  </div> <div id="step-2"> <h2 class="StepTitle">Step 2 Content</h2>  </div> <div id="step-3"> <h2 class="StepTitle">Step 3 Title</h2>  </div> <div id="step-4"> <h2 class="StepTitle">Step 4 Title</h2>  </div> </div> </div> {% endblock %} {% block javascripts %} <script type="text/javascript" src="assets/js/wizard/jquery.smartWizard.js"></script> <script type="text/javascript"> $(document).ready(function() { // Initialize Smart Wizard $('#wizard').smartWizard(); }); </script> {% endblock %}

{% block javascripts %} {{ parent() }} <script type="text/javascript" src="{{ asset('js/wizard/jquery.smartWizard.js') }}"></script> <script type="text/javascript"> $(document).ready(function() { // Initialize Smart Wizard $('#wizard').smartWizard(); }); </script> {% endblock %}

{%block javascripts%} {{parent（）}} $（文档）.ready（函数（）{ //初始化智能向导 $（“#向导”）.smartWizard（）； }); {%endblock%}
更新我认为主要错误在于资产调用中有一个“s”
它应该是没有“s的资产
而不是

{{ assets('js/jquery.min.js') }}

假设jquery是在base.html.twig中调用的，那么当您在模板中重写它时，可以使用{{parent（）}}来获取块javascripts的初始内容
因此，您的base.html如下所示

{% block javascripts %} <script type="text/javascript" src="{{ asset('js/jquery.min.js') }}"></script> {% endblock %}

{%block javascripts%} {%endblock%}
以及扩展base.html的模板

{% extends "base.html" %} {% block content %}  <div class="row"> <div id="wizard" class="swMain"> <ul> <li><a href="#step-1"> <label class="stepNumber">1</label> <span class="stepDesc"> Step 1<br /> <small>Step 1 description</small> </span> </a></li> <li><a href="#step-2"> <label class="stepNumber">2</label> <span class="stepDesc"> Step 2<br /> <small>Step 2 description</small> </span> </a></li> <li><a href="#step-3"> <label class="stepNumber">3</label> <span class="stepDesc"> Step 3<br /> <small>Step 3 description</small> </span> </a></li> <li><a href="#step-4"> <label class="stepNumber">4</label> <span class="stepDesc"> Step 4<br /> <small>Step 4 description</small> </span> </a></li> </ul> <div id="step-1"> <h2 class="StepTitle">Step 1 Content</h2>  </div> <div id="step-2"> <h2 class="StepTitle">Step 2 Content</h2>  </div> <div id="step-3"> <h2 class="StepTitle">Step 3 Title</h2>  </div> <div id="step-4"> <h2 class="StepTitle">Step 4 Title</h2>  </div> </div> </div> {% endblock %} {% block javascripts %} <script type="text/javascript" src="assets/js/wizard/jquery.smartWizard.js"></script> <script type="text/javascript"> $(document).ready(function() { // Initialize Smart Wizard $('#wizard').smartWizard(); }); </script> {% endblock %}

{% block javascripts %} {{ parent() }} <script type="text/javascript" src="{{ asset('js/wizard/jquery.smartWizard.js') }}"></script> <script type="text/javascript"> $(document).ready(function() { // Initialize Smart Wizard $('#wizard').smartWizard(); }); </script> {% endblock %}

{%block javascripts%} {{parent（）}} $（文档）.ready（函数（）{ //初始化智能向导 $（“#向导”）.smartWizard（）； }); {%endblock%}
您是否尝试过逐个添加jQuery脚本，以确定它是否在脚本中？你在使用Symfony吗？我已经试过了，只有当所有脚本都被删除后，页面才会加载。我刚刚开始使用Twig，所以我确定我引用了一些错误的东西。好的，在浏览器控制台面板（F12）中是否有错误？如果是这样的“jQuery/$不是一个函数”，那么，按照Carlos的回答。。。首先测试如果是细枝问题或jQuery问题，请尝试在内容块（忽略javascript块）中包含脚本标记和javascript代码，并查看控制台中发生了什么您是否尝试逐个添加jQuery脚本以确定它是否在脚本中？你在使用Symfony吗？我已经试过了，只有当所有脚本都被删除后，页面才会加载。我刚刚开始使用Twig，所以我确定我引用了一些错误的东西。好的，在浏览器控制台面板（F12）中是否有错误？如果是这样的“jQuery/$不是一个函数”，那么，按照Carlos的回答。。。第一个测试如果是细枝问题或jQuery问题，请尝试在内容块（忽略javascript块）中包含脚本标记和javascript代码，并查看控制台中发生的情况。在“注释”部分，可以使用
{{parent（）}在扩展视图中，将/S代码保存在父模板中，然后添加新的JScript。我已经尝试将jQuery添加到HTML模板的顶部，但是我仍然无法获得任何脚本。