HAML未捕獲ReferenceError：未定義$

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：未定義$”，因此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

您的視圖上有此代碼依賴於jquery（因為它使用$）

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

並且出現“ Uncaught ReferenceError：$未定義”，因為您的視圖正在嘗試在加載jquery文件之前執行此javascript，這發生在文檔末尾的這一行：

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

因此，您有兩種選擇，要么將對jquery庫的請求移到文檔的上（不是最佳選擇，因為頁面在下載文件時會被阻止），或者您可以將自定義javascript放在jquery庫的下方，在<script>標記或獨立文件中。