Can't assign jQuery result to a variable

Question

I'm developing a Ruby on Rails application and I want to use a dashboard called gentelella. This one https://github.com/puikinsh/gentelella The template works just perfectly in simple HTML format. But when I transfer everything to my Rails app it becomes uninteractive. I mean I can't click the sidebar menu items. And the problem is inside its custom.js file. It assigns sidebar-menu to a variable like so

$SIDEBAR_MENU = $('#sidebar-menu')

And then attaches a 'click' event to it like this:

$SIDEBAR_MENU.find('a').on('click', function(ev) {

     console.log('clicked - sidebar_menu');
}

The problem is that it never gets to 'clicked - sidebar_menu' console message if I leave it as is (in my Rails app), and thus the menu doesn't work at all. But if I put log trace just before:

  console.log($SIDEBAR_MENU);   
  $SIDEBAR_MENU.find('a').on('click', function(ev)

I get this in the output

jQuery.fn.init {context: document, selector: "#sidebar-menu"} context : document selector : "#sidebar-menu" proto : Object(0)

So I'm sure it is actually assigned to a variable is is definitely not null

Then I replace all $SIDEBAR_MENU occurrences by $('#sidebar-menu') to get this

$('#sidebar-menu').find('a').on('click', function(ev) {
    alert('it works now!');
}

And it starts to work just fine. It's blowing up my mind already, I just couldn't find any reasonable explanation for this. Can anybody, please, explain why it might happen?

ps I'm using Rails 5.0.2 with jQuery v1.12.4 (from Gems) Sorry if some topic like this already exists, I had searched for the answer and couldn't find it

Here are the contents of application.js

  //= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require fastclick
//= require nprogress
//= require Chart.min
//= require gauge.min
//= require bootstrap/bootstrap-progressbar
//= require icheck.min
//= require skycons
//= require jquery.flot
//= require jquery.flot.pie
//= require jquery.flot.time
//= require jquery.flot.stack
//= require jquery.flot.resize
//= require jquery.flot.orderBars
//= require jquery.flot.spline.min
//= require curvedLines
//= require date-ru-RU
//= require jquery.vmap.min
//= require jquery.vmap.world
//= require jquery.vmap.sampledata
//= require moment.min
//= require bootstrap/daterangepicker
//= require custom

Answer 1

I've just found what was the reason of such a strange behavior. After I took a detailed look at Gentelella's source I've noticed that all script tags are at the bottom of the page. So I've changed my Rails template for the page the way that it also includes them after the body

<!DOCTYPE html>
<html>
  <head>
    <title>No Matter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1, user-scalable=no">
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'dashboard', media: 'all', 'data-turbolinks-track': 'reload' %>

  </head>

  <body class="nav-md"> 
    <%= yield %>
  </body>
   <%= javascript_include_tag 'dashboard', 'data-turbolinks-track': 'reload' %>
</html>

Now it all works fine. I'm not sure why this happens though, since there is a $(document).ready() callback in Gentelella's "custom.js" which initializes everything and the whole menu is there from the very beginning, nothing's loaded dynamically. I'd be grateful if somebody could explain why, since I myself am kind of newbie in web development

Can't assign jQuery result to a variable

Question

1 answers

solution1
0 ACCPTED 2017-04-18 15:40:28

Can't assign jQuery result to a variable

Question

1 answers

solution1 0 ACCPTED 2017-04-18 15:40:28

solution1
0 ACCPTED 2017-04-18 15:40:28