Search code examples
javascriptjqueryruby-on-railsrubycloud9-ide

Can not see JQuery effects in RoR app (c9 IDE)

  1. created a new RoR app in C9 IDE (template - Ruby)
  2. rails g controller pages
  3. created index method
  4. routes.rb -> root 'pages#index'
  5. views -> index.html.erb followed this tutorial and pasted all jquery code in "application.js" http://mrbool.com/how-to-add-edit-and-delete-rows-of-a-html-table-with-jquery/26721

When I load the page jquery doesn't work.

Solution

  • The first two javascript files he imports in the HTML are the problem probably. Jquery is loaded by default so you can ignore the first line but you have to create a new function.js file inside your Assets/Javascript folder. Just make sure you have 'jquery-rails' in your gemfile.

    <head> 
  <script type="text/javascript" src="jquery-1.7.2.min.js">    // you don't need this line
  </script> <script type="text/javascript" src="functions.js"></script> // create the functions.js file in your Assets/Javascript folder
</head>

    EDIT In your functions.js file, you have to put all the javascript code he wrote. Finally make sure you are importing your tree in you application.js file

    //= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .

    EDIT 2

    The author had a typo in his HTML.

    <button id="btnAddd">New</button>

    He put 3 d's in the id name 'add' of the button. You just have to delete one of the 'd'

    <button id="btnAdd">New</button>

    The images for delete and edit (a red circle and a pencil will not load unless you include those images in your Assets and you will have to change the path for them to match your rails structure).