CODEWITHSUNDEEP
jqueryruby-on-rails-3
Nitish Upreti
Nitish Upreti

Reputation: 6550

Jquery code not executing in Rails 3 Project

I am setting up a jquery+rails application. There seems to be no problem with including jquery. The source file finally generated finally looks like --->

<!DOCTYPE html>
<html>
    <head>
        <title>CodeAliker</title>
        <link href="/assets/application.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap.css?body=1" media="screen" rel="stylesheet" type="text/css" />
        <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/application.js?body=1" type="text/javascript"></script>
        <meta content="authenticity_token" name="csrf-param" />
<meta content="EIklYq2jXM/BSsN+M0V5x9GoFA+WjwYuD0kuLBkjIUg=" name="csrf-token" />
    </head>

    <body>

        <script src="/assets/dashboard.js?body=1" type="text/javascript"></script>
<link href="/assets/dashboard.css?body=1" media="screen" rel="stylesheet" type="text/css" />

<div class="topbar">
    <div class="fill">
          <div class="container">
            <a class="brand" href="#">CodeAliker</a>
            <ul class="nav">
                <li class="active" name='useritem'>
                    <a href="#user" >+myth</a>
                </li>
                <li name='dashitem'>
                    <a href="#panel">Dashboard</a>
                </li>
                <li>
                    <a href="/about.html">About</a>
                </li>
                <li class="nav secondary">
                    <a href="/getout">SignOut</a>
                <li>
            </ul>
          </div>
    </div>
</div>

<div id="bodydiv">
  <div class="container-fluid">
    <div class="sidebar">
              <table class="bordered-table">
                <thead>
                  <tr>
                    <th>BATCH List</th> 
                  </tr>
                </thead>                        
                <tbody id='table-body'>
                  <tr>
                    <td><a href="#">samplebatch</a></th>
                  </tr>
                </tbody>    
            </table>
    </div>

    <div class="content">
               ...
    </div>
  </div>
</div>


    </body>
</html>

My Jquery code in a file dashboard.js looks like -->

$('ul.nav li').each(function(){
    console.log('Iterating');
});

$('a').bind('click', function() {  
    alert('Unobtrusive!');  
});

The code never executes ,why? However inserting a simple console.log() on the dashscript.js prints!

Upvotes: 1

Views: 269

Answers (1)

Amar Palsapure
Amar Palsapure

Reputation: 9680

I have put your code in jsFiddle.net and it works : http://jsfiddle.net/kskHX/2/

There might be issue like

  • Your dashboard.js is not getting downloaded, might be the url is incorrect or invalid. Check in fiddler, firebug, or console of chrome for errors.
  • Your browser has cached the js file, and the updated file is not getting downloaded. Change your query string for the js and try again.

Solution

The dashboard.js was getting downloaded but the functions were not getting executed , asked to shift code to $(document).ready( and it worked.

Hope this info helps you.

Upvotes: 2

Related Questions