I'm using RSpec (v. 3.1.0) and Capybara (v. 2.4.3) to test my Rails 4 application. My user delete spec.rb contains the following code:
it "is successful when clicking the destroy link" do
visit "/users"
save_and_open_page
within "#user_#{user.id}" do
click_link "Destroy"
end
expect(page).to have_content("User was successfully destroyed.")
Capybara throws the following error:
1) Deleting User is successful when clicking the destroy link
Failure/Error: within "#user_#{user.id}" do
Capybara::ElementNotFound:
Unable to find css "#user_509"
Save_and_open_page shows FactoryGirl created a user for the test. The error message indicates the user's id is 509. My program's code (delete method) works as expected, so the problem appears to be my test code. What can I do to help Capybara find the user? Thanks for any help!
UPDATE: Here's the HTML source:
<!DOCTYPE html>
<html>
<head>
<title>Users | App </title>
<link data-turbolinks-track="true" href="/assets/appointments.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/cardio_exercises.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/custom.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/members.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/sessions.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/static_pages.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/strength_exercises.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/trainers.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/users.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/appointments.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/cardio_exercises.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/members.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/sessions.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/static_pages.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/strength_exercises.js?body=1"></script>
</script>
Home
Help
Log in
<div class="container">
<h1>Listing Users</h1>
<table>
<thead>
<tr>
<th>User Name</th>
<th>Email</th>
<th>Member</th>
<th>Trainer</th>
<th colspan="3"></th>
</tr>
</thead>
<tbody>
<tr>
<td>ColeCole</td>
<td>xx#xxx.com</td>
<td>true</td>
<td>false</td>
<td>Show</td>
<td>Edit</td>
<td><a data-confirm="Are you sure?" data-method="delete" href="/users/14" rel="nofollow">Destroy</a></td>
</tr>
</tbody>
</table>
<br>
New User
<footer class="footer">
<small>
The xxxx
by xxxx
</small>
<nav>
<ul>
<li>Contact</li>
<li>About</li>
<li>xxxx</li>
</ul>
</nav>
</footer>
<pre class="debug_dump">--- !ruby/hash:ActionController::Parameters
action: index
controller: users
</pre>
</div>
</body>
</html>
This should work if you only have one delete button on the page:
it "is successful when clicking the destroy link" do
visit "/users"
click_link "Destroy"
expect(page).to have_content("User was successfully destroyed.")
Edit: I'm going to assume you are not very familiar with CSS selectors. With Capybara, when you say:
#user_#{user.id}
You are not grabbing text such as "user_509" but rather you are grabbing a DOM element with the identity of "user_509." Thus to have Capybara find that element in your code, you would have to have something like this:
<a id="user_509" data-confirm="Are you sure?" data-method="delete" href="/users/14" rel="nofollow">Destroy</a>
Merely having a text field would not suffice as text is not part of the DOM.
Related
I'm trying to use JQuery UI slider in on of my carousel's items.
I attached JQuery UI files (css and js) and it's not showing up.
$("#slider").slider();
<div id="slider"></div>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
the link and script are at the bottom of my body tag. tried to move them to head and still not working.
The console shows:
jquery-3.3.1.slim.min.js:2 jQuery.Deferred exception: $(...).slider is not a function TypeError: $(...).slider is not a function
head tag:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/bootstrap-slider.js"></script>-->
<script src="bootstrap/js/bootstrap.js"></script>
<script src="jScripts/JavaScript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<!--<link href="Style/reset.css" rel="stylesheet" type="text/css" />-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<link href="bootstrap/css/bootstrap-reboot.css" rel="stylesheet" />
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
<link rel="shortcut icon" href="#">
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/css/bootstrap-slider.css" />-->
<link href="styles/myStyle.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Assistant" rel="stylesheet">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
You must define jquery-UI first.
When you calling $("#slider").slider();
'.slider()' function is not exist yet
Try to include jquery-UI library first.
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<div id="slider"></div>
$("#slider").slider();
I need, from a view-blade, to search a database in order to fetch data and display them in another view-blade when a link is clicked.
I made the following:
In the view-blade who will acting on database:
#foreach($pending as $p)
<tr>
<td>
Click here
</td>
</tr>
#endforeach
the connected 'route' is
Route::get("/getMyForm/{ident}", ['as' => "openMyPage", 'uses' => "BusinessController#seeMyForm"]);
the method on BusinessController has
public function seeMyForm($ident){
$myResult=DB::select(...);
return view('MyViewBlade')->with('myResult', $myResult);
}
the master template (PrincipalView.blade.php) (as was included in the view-blade to display
<!DOCTYPE html>
<html>
<head>
<meta name="csrf_token" content="{{ csrf_token() }}" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="assets/css/bootstrap-datepicker.min.css" rel="stylesheet">
<!-- <link rel="stylesheet" href="assets/js/jquery-ui/jquery-ui.css"> -->
<script src="assets/js/jquery.js"></script>
<!-- <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> -->
<script src="assets/js/bootstrap-datepicker.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="assets/js/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
<link rel="stylesheet" href="assets/js/jquery-ui-1.11.4.custom/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="assets/js/jquery-pessoal.js"></script>
<script src="assets/js/jquery-pessoal2.js"></script>
<link rel="stylesheet" href="assets/plugins/multiple-select-master/multiple-select.css"></script>
<script src="assets/plugins/multiple-select-master/multiple-select.js"></script>
<link href="assets/css/custom.css" rel="stylesheet">
</head>
...
<div class="container">
#yield("corpo")
</div>
...
the view-blade which will display (ToAproveView.blade.php)
#extends('PrincipalView')
#section('corpo')
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Cliente Principal: </label><br>
<input type="text" id="idTxtFaturamentoAprovacaoCliente"
name="namTxtFaturamentoAprovacaoCliente"
readonly value="{{$myResult[0]->clienteprincipal}}"/>
</div>
</div>
is not working. The last view-blade do not render its elements. The view opens itself not well formatted.
Other actions make all other views-blade ok.
I found out, the problem is connected with the line code
Click here
because it was created on the fly (I guess).
Looking at the console of Chrome, is there
GET http://172.16.0.30/laravel/tempo/public/pesquisar-Faturamento-verFormulario/assets/css/bootstrap-theme.min.css
29638_1472048778961_121:16 GET http://172.16.0.30/laravel/tempo/public/pesquisar-Faturamento-verFormulario/assets/css/bootstrap-datepicker.min.css
29638_1472048778961_121:18 GET http://172.16.0.30/laravel/tempo/public/pesquisar-Faturamento-verFormulario/assets/js/jquery.js
29638_1472048778961_121:13 GET http://172.16.0.30/laravel/tempo/public/pesquisar-Faturamento-verFormulario/assets/css/bootstrap.min.css
29638_1472048778961_121:22 GET http://172.16.0.30/laravel/tempo/public/pesquisar-Faturamento-verFormulario/assets/js/bootstrap-datepicker.js
29638_1472048778961_121:28 GET http://172.16.0.30/laravel/tempo/public/pesquisar-Faturamento-verFormulario/assets/js/jquery-ui-1.11.4.custom/jquery-ui.js
net::ERR_CONNECTION_RESET
29638_1472048778961_121:29 GET http://172.16.0.30/laravel/tempo/public/pesquisar-Faturamento-verFormulario/assets/js/jquery-ui-1.11.4.custom/jquery-ui.css
net::ERR_CONNECTION_RESET
29638_1472048778961_121:23 GET http://172.16.0.30/laravel/tempo/public/pesquisar-Faturamento-verFormulario/assets/js/bootstrap.min.js
net::ERR_CONNECTION_RESET
The including css and js files do not work (the names in the path are different of that I was wrote abore because I made a translation to better comprehension)
I found out where the error is.
I changed the path to .js and css files in default template and the view rendered correctly:
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
Although there is not the correct answer, since this template serves several views-blade that work perfectly, for now it is ok to me.
I am trying to write an rspec test that will;
visit the store page
select a value in the Countries select box
and test that the value exists (initially in the Countries box but I would also be testing for cities which is dependent on Country in the second test)
HTML page
<!DOCTYPE html>
<html>
<head>
<title>Ruby on Rails Tutorial Sample App</title>
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/custom.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/password_resets.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/people.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/products.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/sessions.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/static_pages.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/store.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/users.css?body=1" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/password_resets.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/people.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/products.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/sessions.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/static_pages.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/store.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/users.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="NcsV3Ve7QqLTjeLNz5MLuCxzvG8urc63NiDk7RZTGtM=" name="csrf-token" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
sample app
<nav>
<ul class="nav btn-group navbar-nav navbar-right list-inline">
<li>Home</li>
<li>Help</li>
<li>Sign in</li>
</ul>
</div>
</ul>
</nav>
</div>
</div>
</header>
<div class="container">
<h2>some text</h2>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="row">
<div class="col-md-6 col-md-offset-2">
<form accept-charset="UTF-8" action="/store/show" method="get"><div style="display:none"><input name="utf8" type="hidden" value="✓" /></div>
<label for="catalogue_country">Country</label>
<select id="countries_select" name="catalogue[country_id]"><option selected="selected" value="1">France</option>
<option value="2">Italy</option>
<option value="3">United Kingdom</option></select>
<div class="pull-right">
<input class="btn brn-large btn-primary" name="commit" type="submit" value="Add to Cart" />
</form> </div>
</div>
</div>
</div>
</div>
<footer class="footer">
<small>
Rails Tutorial
by Michael Hartl
</small>
<nav>
<ul>
<li>About</li>
<li>Contact</li>
<li>News</li>
</ul>
</nav>
</footer>
<pre class="debug_dump">--- !ruby/hash:ActionController::Parameters
controller: store
action: index
</pre>
</div>
</body>
</html>
My test
require 'spec_helper'
describe "index" do
subject { page }
before do
visit store_path
select "United Kingdom", :from => "catalogue[country_id]"
end
it { should have_select('country_id', :selected => 'United Kingdom') }
end
The failures
Failures:
1) index
Failure/Error: visit store_path
NoMethodError:
undefined method `id' for nil:NilClass
The rails console [app.store_path] verifies that store_path is '/store'
The select boxes are dynamically populated according to the directions in this blog posting
Any help is appreciated, thanks in advance
There are the routes
match '/store', to: 'store#index', as: :store, via: 'get'
get 'store/show'
match 'store/update_cities', to: 'store#update_cities', as: :update_cities, via: 'get'
match 'store/update_currencies', to: 'store#update_currencies', as: :update_currencies, via: 'get'
Its one index page (store_path) which has a countries select box.
This is the store controller
def index
#countries = Country.all
#cities = City.where("country_id = ?", Country.first.id)
#currencies = Currency.where("country_id = ?", Country.first.id)
#locations = Location.where("city_id = ?", Location.first.id)
#products = Product.where("Location_id = ?", Product.first.id)
#plugs = Plug.where("Location_id = ?", Plug.first.id)
end
def show
end
def update_cities
#cities = City.where("country_id = ?", params[:country_id])
respond_to do |format|
format.js
end
end
Are you trying to visit a specific store, or listing all the stores ?
in your case you are trying to visit a specific store which you need to pass a parameter for it in this case the store id
To know the exact path write in the console:
rake routes
you will find each path to its url, if you want to list all the stores you need to write:
stores_path
instead of:
store_path
store_path is /store/:id
I've started to look into ZURB Foundation 5 in order to build responsive websites in combination with Ruby on Rails. I have a very simple layout using the grid blocks of foundation.
Unfortunately the content does not care about boundaries of the containers. On top of that I get weird behavior (moving below the first div in the row, then disappearing) of the sidebar container, when resizing the page.
Here's the generated HTML source.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>boldMessenger</title>
<link href="/assets/application.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/foundation_and_overrides.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/scaffolds.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/users.css?body=1" media="screen" rel="stylesheet" />
<script src="/assets/vendor/modernizr.js?body=1"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="CaM8b99kos0fU8YoAb4WhnV667Gmt77DE5/kOouIN4A=" name="csrf-token" />
</head>
<body>
<div class="row">
<div class="small-12 large-10 columns">
<h1>Listing users</h1>
<table>
<thead>
<tr>
<th>Email</th>
<th>Name</th>
<th>Password digest</th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>me#you.com</td>
<td>Test User</td>
<td>$2a$10$OGESd7xm.5sUIsZCATgSfukOxtwm4BkGawsIOhR.wptD8mYbrQq9.</td>
<td>Show</td>
<td>Edit</td>
<td><a data-confirm="Are you sure?" data-method="delete" href="/users/4" rel="nofollow">Destroy</a></td>
</tr>
</tbody>
</table>
<br/>
<a class="button small radius" href="/users/new">New User</a>
</div>
<div class="hide-for-small-only large-2 columns">
<h2>Sidebar</h2>
<p>This sidebar is not visible on smaller screens, like the iPhone</p>
</div>
</div>
<script src="/assets/jquery.js?body=1"></script>
<script src="/assets/jquery_ujs.js?body=1"></script>
<script src="/assets/foundation/foundation.js?body=1"></script>
<script src="/assets/foundation/foundation.abide.js?body=1"></script>
<script src="/assets/foundation/foundation.accordion.js?body=1"></script>
<script src="/assets/foundation/foundation.alert.js?body=1"></script>
<script src="/assets/foundation/foundation.clearing.js?body=1"></script>
<script src="/assets/foundation/foundation.dropdown.js?body=1"></script>
<script src="/assets/foundation/foundation.interchange.js?body=1"></script>
<script src="/assets/foundation/foundation.joyride.js?body=1"></script>
<script src="/assets/foundation/foundation.magellan.js?body=1"></script>
<script src="/assets/foundation/foundation.offcanvas.js?body=1"></script>
<script src="/assets/foundation/foundation.orbit.js?body=1"></script>
<script src="/assets/foundation/foundation.reveal.js?body=1"></script>
<script src="/assets/foundation/foundation.tab.js?body=1"></script>
<script src="/assets/foundation/foundation.tooltip.js?body=1"></script>
<script src="/assets/foundation/foundation.topbar.js?body=1"></script>
<script src="/assets/foundation.js?body=1"></script>
<script src="/assets/turbolinks.js?body=1"></script>
<script src="/assets/users.js?body=1"></script>
<script src="/assets/application.js?body=1"></script>
</body>
</html>
The problem comes with the password field.
That long string makes the table get out of its range.
After deploying my rails app to heroku, there are no dropdown menus!
When running locally, my source looks like this :
<link href="/assets/application.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.core.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.theme.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.accordion.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.menu.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.autocomplete.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.button.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.datepicker.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.resizable.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.dialog.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.progressbar.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.selectable.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.slider.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.spinner.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.tabs.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.tooltip.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.base.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.all.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/foundation_and_overrides.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/admins.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/associates.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/custom.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/dasharea.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/database.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/members.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/sessions.css?body=1" media="screen" rel="stylesheet" />
<script src="/assets/vendor/custom.modernizr.js?body=1"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="anbyACcBlOI2Zpa9E2TImosNiBYN5KFTC8heYI1TE+I=" name="csrf-token" />
<script src="/assets/jquery.js?body=1"></script>
<script src="/assets/jquery.ui.core.js?body=1"></script>
<script src="/assets/jquery.ui.widget.js?body=1"></script>
<script src="/assets/jquery.ui.accordion.js?body=1"></script>
<script src="/assets/jquery.ui.position.js?body=1"></script>
<script src="/assets/jquery.ui.menu.js?body=1"></script>
<script src="/assets/jquery.ui.autocomplete.js?body=1"></script>
<script src="/assets/jquery.ui.button.js?body=1"></script>
<script src="/assets/jquery.ui.datepicker.js?body=1"></script>
<script src="/assets/jquery.ui.mouse.js?body=1"></script>
<script src="/assets/jquery.ui.draggable.js?body=1"></script>
<script src="/assets/jquery.ui.resizable.js?body=1"></script>
<script src="/assets/jquery.ui.dialog.js?body=1"></script>
<script src="/assets/jquery.ui.droppable.js?body=1"></script>
<script src="/assets/jquery.ui.effect.js?body=1"></script>
<script src="/assets/jquery.ui.effect-blind.js?body=1"></script>
<script src="/assets/jquery.ui.effect-bounce.js?body=1"></script>
<script src="/assets/jquery.ui.effect-clip.js?body=1"></script>
<script src="/assets/jquery.ui.effect-drop.js?body=1"></script>
<script src="/assets/jquery.ui.effect-explode.js?body=1"></script>
<script src="/assets/jquery.ui.effect-fade.js?body=1"></script>
<script src="/assets/jquery.ui.effect-fold.js?body=1"></script>
<script src="/assets/jquery.ui.effect-highlight.js?body=1"></script>
<script src="/assets/jquery.ui.effect-pulsate.js?body=1"></script>
<script src="/assets/jquery.ui.effect-scale.js?body=1"></script>
<script src="/assets/jquery.ui.effect-shake.js?body=1"></script>
<script src="/assets/jquery.ui.effect-slide.js?body=1"></script>
<script src="/assets/jquery.ui.effect-transfer.js?body=1"></script>
<script src="/assets/jquery.ui.progressbar.js?body=1"></script>
<script src="/assets/jquery.ui.selectable.js?body=1"></script>
<script src="/assets/jquery.ui.slider.js?body=1"></script>
<script src="/assets/jquery.ui.sortable.js?body=1"></script>
<script src="/assets/jquery.ui.spinner.js?body=1"></script>
<script src="/assets/jquery.ui.tabs.js?body=1"></script>
<script src="/assets/jquery.ui.tooltip.js?body=1"></script>
<script src="/assets/jquery.ui.all.js?body=1"></script>
<script src="/assets/jquery_ujs.js?body=1"></script>
In Heroku, it look like this :
<script src="/javascripts/jquery.js"></script>
<script src="/javascripts/jquery.ui.all.js"></script>
<script src="/javascripts/jquery_ujs.js"></script>
But the links in Heroku return not found!
For a special reason, I included the jquery in my head manually like this :
<%= javascript_include_tag 'jquery' %>
<%= javascript_include_tag 'jquery.ui.all' %>
<%= javascript_include_tag 'jquery_ujs' %>
Is this the reason things are failing? How to fix it without removing these from the head?
In (most) production setups, only the files in public/assets are available for use directly in link or script tags.
When you push to Heroku, it precompiles app/assets/javascripts/application.js by merging and compressing all javascript files required in application.js into a single file at public/assets/application-xxxxxx.js. Individual files, such as jquery.js, are not available. Therefore, it's recommended to use
<!-- HTML -->
javascript_include_tag 'application'
// inside app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
However, if you insist on including jquery manually without requiring it in application.js, you can add it to config.assets.precompile.
# config/environments/production.rb
config.assets.precompile += ['jquery.js', 'jquery_ujs.js']
(Note: A friend told me that Heroku doesn't read production.rb during precompilation. If that's the case, try adding the above to config/application.rb instead.)
When you push to Heroku and precompile your assets, you should see
$ rake assets:precompile
I, [] INFO -- : Writing public/assets/jquery-36fecc5eda81b43bdf4f92ce2d874df2.js
I, [] INFO -- : Writing public/assets/jquery_ujs-02181b3e64cd9e4e8548cad033516231.js
On Heroku, the script tags should now look like
<script src="/assets/jquery-36fecc5eda81b43bdf4f92ce2d874df2.js"></script>