2017-11-23 2 views
-1

mit Symfony definiert ist, erstelle ich ein Formular und Formularvorlage für meine Sammlung:

{% block _training_versions_entry_dates_widget %} 
    ... 

    <script type="text/javascript"> 
     var datesCount = {{ form|length }}; 

     $(function() { 
      $('#add-another-email').click(function(e) { 
       ... 
      }); 
     }); 
    </script> 
{% endblock %} 

Aber ich habe diesen Fehler: Uncaught Reference: $ ist nicht definiert

ich lade jquery in meinem base.html.twig:

<body> 
    {% block body %}{% endblock %} 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
    <script src="{{ asset('/js/app.js') }}"></script> 
    {% block javascripts %}{% endblock %} 
</body> 

ich denke, weil mein Thema vor jQuery aufgerufen wird, aber ich will nicht jquery einziehen meine <head>. Kannst du mir helfen ?

+0

try jquery vor Ihrer js Codeausführung – habibun

Antwort

2

Ihr js-Code muss nach jquery loading aufgerufen werden. So können Sie so etwas wie dies in Ihrem Layout tun, einen Block für den js Code vor dem </body>-Tag hinzufügen:

layout.html.twig:

{% block javascripts_footer %} 
    <script src="{{ asset('vendor/jquery/jquery.min.js') }}">    
{% endblock %} 
    </body> 
</html> 

Dann in Ihrer Vorlage, schreiben Sie Ihre js im javascripts_footer Block, nicht in dem content ein:

{% block javascripts_footer %} 
    {{ parent() }} 
    <script> 
     $(document).ready(){ 
      var datesCount = {{ form|length }};   
      $(function() { 
       $('#add-another-email').click(function(e) { 
        ... 
       }); 
      }); 
     }); 
    </script> 
{% endblock %} 
0

müssen Sie Ihre Funktion innerhalb $(document).ready() oder $(window).load() wickeln diese versuchen:

$(document).ready(){ 
    var datesCount = {{ form|length }}; 

    $(function() { 
     $('#add-another-email').click(function(e) { 
      ... 
     }); 
    }); 
}); 
+1

Dank zu laden, aber ich habe denselben Fehler mit '$ (document) .load (function() {' oder ' $ (Dokum ent) .ready (Funktion() {' –

0

Ihre Inline JavaScript vor jQuery ausgeführt wird, laden, unter der Annahme, der Block _training_versions_entry_dates_widget ein Kind des Blocks body ist. Bewegen Sie entweder Ihr Inline-JavaScript unterhalb der jQuery-Quelle oder anders herum, wie Sie es bereits beschrieben haben, indem Sie es in den Kopf setzen.

Sie können {{ form|length }} als Datenattribut festlegen und später per JavaScript abrufen. Auf diese Weise benötigen Sie kein Inline-JavaScript.

$(function() {  
    var datesCount = $('#add-another-email').attr('data-form-length'); 
    $('#add-another-email').click(function(e) { 
     ... 
    }); 
});