javascript - HAML 未捕获引用错误 : $ is not defined

Question

我有以下看法:

/views/admin/home/index.html.haml

= render partial: 'general_tab_partial'

.box.boxtab
  %article
    %h2= _('Global Reporting')
    .clearfix
    = form_tag '#', :method => :get, id: "filter_form" do
      %select{ id: "select_filter"}
        %option{value: "all"} All
        %option{value: "adults"} Adults
        %option{value: "kis"} Kids
        %option{value: "teachers"} Teachers 
    .clearfix
    %table.table.table-hover
      %thead
        %tr
          %th= _('Registered users')
          %th= _('Activated users')
          %th= _('Minutes talked')
          %th= _('Nb of calls (nativos diferentes)')
          %th= _('Nb of conversations (salas)')
          %th= _('Nb of messages')
          %th= _('Nb of conversations')
          %th= _('Nb of messages')
          %th= _('Nb of videos watched')
          %th= _('Nb of posts')
          %th= _('Average foreign friends per user')
      %tbody
        %tr
          %td= @registred_users
          %td= @actived_users
          %td= @minutes_talked
          %td= @nb_calls
          %td 
          %td 
          %td
          %td
          %td
          %td= @nb_posts
          %td= number_with_precision(@av_foreign, precision: 3)

:javascript
  $('select_filter').change(function() {
    $(this).parents('form').submit();
  });

但我收到此错误“Uncaught ReferenceError: $ is not defined”，因此 javascript 不起作用。如果我检查 html 代码，我在末尾有以下几行:

<!--
      Javascripts
      ==================================================
    -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="/assets/jquery.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.ui.core.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.ui.widget.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.ui.accordion.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.ui.position.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.ui.menu.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.ui.autocomplete.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.ui.button.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.ui.datepicker.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.ui.mouse.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.ui.draggable.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.ui.resizable.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.ui.dialog.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.ui.droppable.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.ui.effect.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.ui.effect-blind.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.ui.effect-bounce.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.ui.effect-clip.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.ui.effect-drop.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.ui.effect-explode.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.ui.effect-fade.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.ui.effect-fold.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.ui.effect-highlight.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.ui.effect-pulsate.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.ui.effect-scale.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.ui.effect-shake.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.ui.effect-slide.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.ui.effect-transfer.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.ui.progressbar.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.ui.selectable.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.ui.slider.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.ui.sortable.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.ui.spinner.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.ui.tabs.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.ui.tooltip.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.ui.all.js?body=1" type="text/javascript"></script>
    <script src="/assets/twitter/bootstrap/bootstrap-transition.js?body=1" type="text/javascript"></script>
    <script src="/assets/twitter/bootstrap/bootstrap-alert.js?body=1" type="text/javascript"></script>
    <script src="/assets/twitter/bootstrap/bootstrap-modal.js?body=1" type="text/javascript"></script>
    <script src="/assets/twitter/bootstrap/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
    <script src="/assets/twitter/bootstrap/bootstrap-scrollspy.js?body=1" type="text/javascript"></script>
    <script src="/assets/twitter/bootstrap/bootstrap-tab.js?body=1" type="text/javascript"></script>
    <script src="/assets/twitter/bootstrap/bootstrap-tooltip.js?body=1" type="text/javascript"></script>
    <script src="/assets/twitter/bootstrap/bootstrap-popover.js?body=1" type="text/javascript"></script>
    <script src="/assets/twitter/bootstrap/bootstrap-button.js?body=1" type="text/javascript"></script>
    <script src="/assets/twitter/bootstrap/bootstrap-collapse.js?body=1" type="text/javascript"></script>
    <script src="/assets/twitter/bootstrap/bootstrap-carousel.js?body=1" type="text/javascript"></script>
    <script src="/assets/twitter/bootstrap/bootstrap-typeahead.js?body=1" type="text/javascript"></script>
    <script src="/assets/twitter/bootstrap/bootstrap-affix.js?body=1" type="text/javascript"></script>
    <script src="/assets/twitter/bootstrap.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.fancybox.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.fancybox-buttons.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.fancybox-thumbs.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.fancybox-media.js?body=1" type="text/javascript"></script>
    <script src="/assets/fancybox.js?body=1" type="text/javascript"></script>
    <script src="/assets/zeroclipboard/ZeroClipboard.js?body=1" type="text/javascript"></script>
    <script src="/assets/zeroclipboard/asset-path.js?body=1" type="text/javascript"></script>
    <script src="/assets/zeroclipboard.js?body=1" type="text/javascript"></script>
    <script src="/assets/Placeholders.min.js?body=1" type="text/javascript"></script>
    <script src="/assets/admin/automatic_calls.js?body=1" type="text/javascript"></script>
    <script src="/assets/admin/bootstrap-rowlink.min.js?body=1" type="text/javascript"></script>
    <script src="/assets/admin/calls.js?body=1" type="text/javascript"></script>
    <script src="/assets/admin/categories.js?body=1" type="text/javascript"></script>
    <script src="/assets/admin/courses.js?body=1" type="text/javascript"></script>
    <script src="/assets/admin/draws.js?body=1" type="text/javascript"></script>
    <script src="/assets/admin/home.js?body=1" type="text/javascript"></script>
    <script src="/assets/admin/kids_contact.js?body=1" type="text/javascript"></script>
    <script src="/assets/admin/languages.js?body=1" type="text/javascript"></script>
    <script src="/assets/admin/likes.js?body=1" type="text/javascript"></script>
    <script src="/assets/admin/schools.js?body=1" type="text/javascript"></script>
    <script src="/assets/admin/schools_contacts.js?body=1" type="text/javascript"></script>
    <script src="/assets/admin/teachers.js?body=1" type="text/javascript"></script>
    <script src="/assets/admin/video_answers.js?body=1" type="text/javascript"></script>
    <script src="/assets/admin/video_questions.js?body=1" type="text/javascript"></script>
    <script src="/assets/admin/videos.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
    <script src="/assets/dashboard/activity_posts.js?body=1" type="text/javascript"></script>
    <script src="/assets/dashboard/calls.js?body=1" type="text/javascript"></script>
    <script src="/assets/dashboard/courses.js?body=1" type="text/javascript"></script>
    <script src="/assets/dashboard/draws.js?body=1" type="text/javascript"></script>
    <script src="/assets/dashboard/events.js?body=1" type="text/javascript"></script>
    <script src="/assets/dashboard/friends.js?body=1" type="text/javascript"></script>
    <script src="/assets/dashboard/home.js?body=1" type="text/javascript"></script>
    <script src="/assets/dashboard/invitation_email.js?body=1" type="text/javascript"></script>
    <script src="/assets/dashboard/kid_conversation_messages.js?body=1" type="text/javascript"></script>
    <script src="/assets/dashboard/kid_conversations.js?body=1" type="text/javascript"></script>
    <script src="/assets/dashboard/kid_video_answers.js?body=1" type="text/javascript"></script>
    <script src="/assets/dashboard/kids.js?body=1" type="text/javascript"></script>
    <script src="/assets/dashboard/points.js?body=1" type="text/javascript"></script>
    <script src="/assets/dashboard/post_comments.js?body=1" type="text/javascript"></script>
    <script src="/assets/dashboard/registrations.js?body=1" type="text/javascript"></script>
    <script src="/assets/dashboard/schedules.js?body=1" type="text/javascript"></script>
    <script src="/assets/dashboard/search.js?body=1" type="text/javascript"></script>
    <script src="/assets/dashboard/sessions.js?body=1" type="text/javascript"></script>
    <script src="/assets/dashboard/videos.js?body=1" type="text/javascript"></script>
    <script src="/assets/date.format.js?body=1" type="text/javascript"></script>
    <script src="/assets/errors.js?body=1" type="text/javascript"></script>
    <script src="/assets/uservoice.js?body=1" type="text/javascript"></script>
    <script src="/assets/frontend.js?body=1" type="text/javascript"></script>
    <script src="/assets/frontend/confirmations.js?body=1" type="text/javascript"></script>
    <script src="/assets/frontend/facebook.js?body=1" type="text/javascript"></script>
    <script src="/assets/frontend/home.js?body=1" type="text/javascript"></script>
    <script src="/assets/frontend/kids.js?body=1" type="text/javascript"></script>
    <script src="/assets/frontend/registrations.js?body=1" type="text/javascript"></script>
    <script src="/assets/frontend/sessions.js?body=1" type="text/javascript"></script>
    <script src="/assets/frontend/static_pages.js?body=1" type="text/javascript"></script>
    <script src="/assets/frontend/teachers.js?body=1" type="text/javascript"></script>
    <script src="/assets/frontend/tutors.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery-ui-timepicker-addon.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.jcountdown1.4.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.locationpicker.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.mp3.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery.titlealert.min.js?body=1" type="text/javascript"></script>
    <script src="/assets/jstz-1.0.4.min.js?body=1" type="text/javascript"></script>
    <script src="/assets/prefixfree.min.js?body=1" type="text/javascript"></script>
    <script src="/assets/respond.min.js?body=1" type="text/javascript"></script>
    <script src="/assets/teachers/contacts.js?body=1" type="text/javascript"></script>
    <script src="/assets/teachers/courses.js?body=1" type="text/javascript"></script>
    <script src="/assets/teachers/friends.js?body=1" type="text/javascript"></script>
    <script src="/assets/teachers/home.js?body=1" type="text/javascript"></script>
    <script src="/assets/teachers/jquery-ui-timepicker-addon.js?body=1" type="text/javascript"></script>
    <script src="/assets/teachers/search.js?body=1" type="text/javascript"></script>
    <script src="/assets/teachers/sessions.js?body=1" type="text/javascript"></script>
    <script src="/assets/teachers/teachers.js?body=1" type="text/javascript"></script>
    <script src="/assets/teachers/application.js?body=1" type="text/javascript"></script>
    <script src="/assets/tutor/home.js?body=1" type="text/javascript"></script>
    <script src="/assets/tutor/sons.js?body=1" type="text/javascript"></script>
    <script src="/assets/tutor/tutors.js?body=1" type="text/javascript"></script>
    <script src="/assets/ui.multiselect.js?body=1" type="text/javascript"></script>
    <script src="/assets/application.js?body=1" type="text/javascript"></script> 

所以我不明白为什么它不起作用。有帮助吗？？？

Answer 1

您的 View 中有这段代码依赖于 jquery(因为它使用了 $)

:javascript
$('select_filter').change(function() {
  $(this).parents('form').submit();
});

出现“Uncaught ReferenceError: $ is not defined”是因为您的 View 试图在加载 jquery 文件之前执行此 javascript，这发生在文档末尾的这一行:

<script src="/assets/jquery.js?body=1" type="text/javascript"></script>

所以你有两个选择，要么将对 jquery 库的请求移动到文档的(不是最好的选择，因为页面在下载文件时会被阻止)，要么你可以将自定义 javascript 放在jquery 库，在 <script> 中标记或在一个独立的文件中。