I am using Ruby on Rails 3.1.1 and the jquery-rails 1.0.16 gem. I have an issue on using a form with :remote => true.
In my view file I have:
<%= form_for(#user, :url => user_path(#user), :remote => true) do |f| %>
...
<%= f.submit "Update" %>
<% end %>
When I click on the Update button and I inspect the Firebug Console, I see that two AJAX HTTP requests are performed instead of one as well as it should be. The same problem happens for all forms in my application that are using :remote => true.
What could be the problem? How to fix it?
Note: If I inspect the DOM it seems that in the current page I do not have duplicate of HTML\CSS id values.
P.S. I: I tried to use different browsers and clear them cache but the problem still occurs.
P.S. II: The problem occurs in development mode in localhost (on my local machine). I have not tried yet if it happens in production mode on the remote machine.
UPDATE I
In my application.js file I had
//= require jquery
//= require jquery_ujs
//= require jquery-ui
I tried to remove the require jquery_ujs line and now it seems to work until I run the bundle exec rake assets:precompile command and restart the server. Exactly: if I remove the require jquery_ujs line and I do not run the bundle command it works as well as expected; but if then I run the bundle command the AJAX form submission doesn't work "at all"\"anymore".
Maybe the problem is related to the bundle command that generates fingerprinted files... could be that?
UPDATE II
My filesystem related to JavaScript files is:
app/assets/javascripts/
app/assets/javascripts/application.js
lib/assets/javascripts/
vendor/assets/javascripts/
vendor/assets/javascripts/vendor.js
vendor/assets/javascripts/jquery_plugins/plugin1.js
vendor/assets/javascripts/jquery_plugins/plugin2.js
vendor/assets/javascripts/jquery_plugins/....js
In my app/assets/javascripts/application.js file I have:
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//
//= require_tree .
//
//= require vendor
In my vendor/assets/javascripts/vendor.js file I have:
//= require_directory ./jquery_plugins
If I run the following command
$ bundle exec rake assets:precompile
/<MY_USER_PATH>/.rvm/rubies/ruby-1.9.2-p290/bin/ruby /<MY_USER_PATH>/.rvm/gems/ruby-1.9.2-p290/bin/rake assets:precompile:all RAILS_ENV=production RAILS_GROUPS=assets
/<MY_USER_PATH>/.rvm/rubies/ruby-1.9.2-p290/bin/ruby /U<MY_USER_PATH>/.rvm/gems/ruby-1.9.2-p290/bin/rake assets:precompile:nondigest RAILS_ENV=production RAILS_GROUPS=assets
in the public/assets/ directory it creates those files
application-b63d5946eebe0c8d46e078ef32299fc5.js
application-b63d5946eebe0c8d46e078ef32299fc5.js.gz
application.js
application.js.gz
manifest.yml
...
If I inspect the page HTML code, I can see the following:
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery-ui.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_plugins/plugin1.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_plugins/plugin2.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_plugins/....js?body=1" type="text/javascript"></script>
<script src="/assets/vendor.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
Prior to Rails 3.1, you would include jQuery-ujs by manually adding rails.js to your public/javascripts folder.
With Rails 3.1, you now have a gem 'jquery-rails' line in your Gemfile and a require jquery_ujs line in your app/assets/javascripts/application.js file; there is no need for manually adding the rails.js file because it's already bundled with the gem.
If you upgraded a non-3.1 app to 3.1, you may still have rails.js sitting around, so the UJS stuff is getting run twice. Rather than removing the require line from your application.js file, you should probably just delete the rails.js file instead. (You also may still have the actual jQuery JS file sitting in there too; same thing, it's included automatically by the jquery-rails gem and you can delete it).
UPDATE
I just realized you're precompiling your assets. You don't want to do this in development mode, as when you request /assets/application.js it's probably serving up /public/assets/application.js which includes all the other JS files inside of it. To fix, clear out the public/assets folder and only precompile your assets in production. (See Rails 3.1 remote requests submitting twice)
Related
Rails comes with the jquery-ujs gem. In the src of this gem, there is a file called rails.js, which contains the functionality of the ajax. I have the gem loaded in my app and it works. I have the following in application.js:
//= require jquery
//= require jquery_nested_form
//= require jquery_ujs
However, in the Network tab in chrome, I see all the javascript files of my app. But when I search for rails.js, it does not appear. How could this be possible? Is the files of the gem precompiled by default? Is in a file with another name?
I think the rails.js is compiled and merged on application.js. Try open application.js on network and with ctrl + f find this jquery-ujs has already been loaded!
[edit]
I create a new rails project with version 5, and I can see the rails ujs on network tab:
see the image here
Change this on your enverioment file:
config.assets.debug = true
[edit 2]
Image with rails 4
I'm deploying a website with Heroku, though really struggling to get the jQuery firing when it goes live. Locally, all works fine.
I've had a play and haven't found any solution - it's all loading in the asset pipeline, shows as a source on the live page (albeit without working) and I've tried all of the solutions I've found on the web.
I've performed rake assets:precompile, have config.assets.compile = true and, thinking it might be a problem due to Turbolinks, installed the jquery-turbolinks gem.
With every change I thought I'd have this running, though nothing has affected the site's behaviour yet. Here's some code:
Gemfile
...
gem 'bootstrap-will_paginate'
gem 'bootstrap-sass'
# Use jquery as the JavaScript library
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'jquery-turbolinks'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
...
Application.js
...
//= require bootstrap
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery-ui
//= require turbolinks
//= require_tree .
...
Application.html.erb
<head>
<link href='http://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
Home.js
var validBox = function(x, y){
...
});
};
var main = function(){
$('.toggle').click(function(){
$('.about-me').toggle();
});
//Carosel
$('.arrow-next').click(function(){
...
});
$('.arrow-prev').click(function(){
...
});
//Comments
$('.btn').click(function() {
...
});
$('.status-box').keyup(validBox('.status-box', '.name-box'));
$('.name-box').keyup(validBox('.name-box', '.status-box'));
$('.btn').addClass('disabled');
}
$(document).ready(main);
Could it be a problem with the $(document).ready(main); line? I've a feeling I've read somewhere jQuery doesn't always respond as the page isn't loading from scratch / 'ready' when using Turbolinks, though thought the addition of the relevant Gem would resolve this. I've also tried $(document).on('ready', 'page:change')(main); to run the function at other points, but to no avail.
Alternatively, I seem to remember there being some command line functions to better ensure the assets run when live though can't find anything relevant.
Any help would be GREATLY appreciated as I'm stumped with this one. I'm pretty new to this, so apologies if there are any glaring, amateur errors in amongst this (though that might mean a simple solution!).
Thanks in advance, Steve.
In my case, I found the answer here:
Bootstrap won't detect jQuery 1.11.0 - Uncaught Error: Bootstrap's JavaScript requires jQuery
The Java console was throwing up the error mentioned there, and after lord knows how much hunting, simply changing the order the js files were loaded made the difference.
Bootstrap after jQuery, everything works perfectly!!
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require_tree .
I am working on a Rails 3.2.13 app, and encountering the following problem:
The Javascript files I wrote in the app/assets/javascripts/ directory don't seem to be run.
I have JS code in a file called menu_list.js in the app/assets/javascripts/ directory, but it does not do anything. Whereas when I put the same code on the view page in a tag, it works.
<script>$("#sortable").sortable();</script>
Here's my application.js file:
//= require jquery
//= require jquery_ujs
//= require jquery.purr
//= require jquery-ui
//= require best_in_place
//= require bootstrap
//= require bootstrap-switch
//= require_tree .
my menu_list.js file:
$(function() {
$("#sortable").sortable();
});
It does not make sense to me, as I thought //= require_tree . would include all the javascript files in the directory. I tried other javascript files too, but they don't seem to have any effects.
$("#sortable").sortable();
If this truly is all you have in app/assets/javascripts/menu_list.js it will run as soon as the script is loaded, which is not what you want. You want to run the above code at least after the DOM has fully loaded into the page and not before.
$(function() {
$("#sortable").sortable();
});
If the environment you're running in is :development, and you properly have the following in your layout
<%= javascript_include_tag "application" %>
you will see a separate <script> tag for every Javascript file Sprockets is loading. The //= require_tree . will pick up your app/assets/javascripts/menu_list.js file.
I suggest also making sure you don't have any precompiled version of your assets in place by running the following in shell
rake assets:clean
You can also force debug mode (individual <script> tags for each file) by adding a :debug option to the above include tag
<%= javascript_include_tag "application", debug: true %>
Most common cause for this is that the call to javascript_include_tag that is on the default layout, then you create another layout, forget to add the include there and then nothing works in controllers where you use this new layout.
I should probably first mention that I do not have precompiling on.
I have 8 different Js files (7, excluding Application.js) and when I use <%= javascript_include_tag 'application' %> it prints out:
<script src="/assets/admin.js?body=1" type="text/javascript"></script>
<script src="/assets/brand.js?body=1" type="text/javascript"></script>
<script src="/assets/category.js?body=1" type="text/javascript"></script>
<script src="/assets/home.js?body=1" type="text/javascript"></script>
<script src="/assets/product.js?body=1" type="text/javascript"></script>
<script src="/assets/setting.js?body=1" type="text/javascript"></script>
<script src="/assets/user.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
Because of this, some of my jQuery (which uses Toggles) do not work because they are being executed multiple times.
How do I get it to simply use application.js?
My Application.js file:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
//= require jquery.ui.all
//= require_tree .
In addition to removing //= require_tree . as Mike said. Try the following command:
$ rake tmp:clear tmp:create assets:clean
This will clear your temporary files & cached asset files.
Further, if you simply want single application.js instead of 7 .js include script tags. set the following option config/environments/development.rb
# Expands the lines which load the assets
config.assets.debug = false
Hope it helps
//= require_tree . loads everything in the same directory as that manifest (.).
Simply remove that line if you want to include your javascripts manually. If you're including all your javascript on every page, however, leave that line in there and remove your includes.
your problèm is that application.js load all js files in the current directory because of the line "//= require_tree ." and probably you use the same names (of id and class) for your html elements in different pages , so one solution is to continue to use "//= require_tree ." in your application.js and give unique name for each elements in your pages, the other solution is to delete the "// = require_tree ." from your application.js and use this :
<%= javascript_include_tag "application", controller_name %>
here when you generate a new controller, rails will create a javascript file with the name of the controller automatically for you, and when you add "controller_name" option for javascript_include_tag, js file for the current controller we'll be added, finally you place your javascript instructions in these file switch controller and here we go.
i find this method verry good but there are other solutions you can find here some other answers in this subject :
Rails 3.1 asset pipeline: how to load controller-specific scripts?
good luck ;)
I had the same problem. Check if you aren't adding on application.html.erb other js files. because if you have the //= require_tree .On the application.js it adds everything, so if you add it on application.html.erb they will repeat.
I'm porting a Rails 3.0.9 app to Rails 3.1.rc5. My application.js is exactly the same as one generated by Rails 3.1 itself:
// This is a manifest file ...
//
//= require jquery
//= require jquery_ujs
//= require_tree .
But when I run my app and look at the application.js in Firebug or Chrome Developer Tools, all I see is:
// This is a manifest file ...
//
The directives are gone, so it would seem that the file has been processed by Sprockets, but the directives have not been replaced by the contents of jquery et al. There are no errors appearing on the server console or in the logs.
Curiously, when I run a blog app (you know, the canonical tutorial app) it works fine (that is, when I examine application.js in Firebug, it contains the text of jQuery.) This would seem to indicate that something in my app is somehow interfering with Sprockets. Has anyone out there heard of such an issue (and hopefully a workaround)?
Here's my setup:
$ gem list jquery
*** LOCAL GEMS ***
jquery-rails (1.0.12)
$ ruby -v
ruby 1.9.2p290 (2011-07-09) [i386-mingw32]
$ rails -v
Rails 3.1.0.rc5
I'm at a loss as to what might be wrong. I've triple checked my Gemfile; I've run and re-run bundle install and bundle update; I've tried rc3, rc4 and now rc5; I'm running Ruby 1.9.2p290. Any ideas?
One workaround: include JavaScript files with the old-skool tag. For example, in my (Haml) layout:
= javascript_include_tag '/assets/jquery.js'
= javascript_include_tag '/assets/jquery_ujs.js'
= javascript_tag 'jQuery.noConflict();'
The /assets/ prefix tells Rails 3.1.x to look on the asset path, which includes gems, so you'll get the same files as with Sprockets directives. But you won't get concatenation or any other Sprockets preprocessing.
Still looking for better solutions.