HAML未捕获ReferenceError：未定义$

Question

I have the following view:

/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();
  });

but I'm getting this error "Uncaught ReferenceError: $ is not defined ", so the javascript does not work. If I check the html code I have the following lines at the end:

<!--
      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> 

So I don't understand why it's not working. Any help???

Answer 1

There's this code on your view that is relying on jquery (since it uses the $)

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

And the "Uncaught ReferenceError: $ is not defined" appears because your view is trying to execute this javascript before the jquery file is loaded, which happens whit this line at the end of your document:

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

So you have two options, either move the request for the jquery library to the of the document (not the best option, sice the page would be blocked while it downloads the file), or you could place your custom javascript below the jquery library, in a <script> tag or in an independent file.