Develop Reference

Ruby on Rails Submit button only works on refreshing

Basically I have a show page for b_page and I have rendered a new partial inside (for page_posts) and the submit button for it only works if it the page is refreshed or if the link is directly opened from the browser. I've checked and there are no missing divs or unopened tags etc, hence it's not an HTML issue.
Maybe it's a Turbolinks issue cause this happens in almost all of the app and if so here's my application.js.erb:
// 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 any plugin's vendor/assets/javascripts directory 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
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery.ui.all
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap
//= require bootstrap-tagsinput
//= require sync
//= require masonry/jquery.masonry
//= require jscolor
//= require_tree .
//= require owl.carousel
//= require turbolinks
How can I fix this? Here's the link to show.html.erb.

You must be using $(document).on('ready', function(){})
Change it to $(document).on('turbolinks:load', function (){}), this forces JavaScript to load at the time page is viewed.

Rails can't require a javascript file that exists in the same folder

Just deployed a Rails 5.x application and installed a theme. The theme's contents are located within the app/assets/javascripts/theme-js and app/assets/stylesheets/theme-files folders.
Inside of the app/assets/javascripts/application.js file includes the following:
//= require jquery
//= require jquery_ujs
//= require_tree .
// Required for the SmartAdmin theme
//= require theme-js/app.config.js.erb
//= require theme-js/app.js
And inside of the app/assets/javascripts/theme-js folder are have the following files (included with the theme):
app.config.js.erb
app.js
application.js
The problem that I'm having is that inside of the application.js file contains a line that states: //= require app.config, but Rails generates me an error stating the following:
couldn't find file 'app.config' with type 'application/javascript'
Even though app.config.js.erb is in the same folder as application.js. Is there any reason why this would happen? Can't figure out why this won't work. I've even tried //= require app.config.js and //= require app.config.js.erb and neither one of them work.
I noticed that //= require ./app.config appears to work whereas //= require app,config doesn't. Something new with Rails 5.x perhaps? I'd have to modify all of the require statements to fit this unless I'm missing something.

Problem solved. Just needed to add the custom theme-js and theme-css folder to the assets pipeline so that Rails can search those folders for the appropriate files when using //= require <file>. Assuming this is what I needed to do, although I'm not sure if it's best practice.

Spree - cannot override js.coffee file

Simply followed instructions from http://guides.spreecommerce.com/developer/asset.html but it just doesn't work. New js files are included and loaded, but if I create file with the same name say product.js.coffee original file is loaded anyway. Any suggestions?
All.js
//= require jquery
//= require jquery_ujs
//= require spree/frontend
//= require_tree .

I've been tearing my hair out over this problem all morning.
In the end what worked for me is to specify every single file I wanted to overwrite in /app/assets/javascripts/spree/frontend/all.js.
E.g., if you want to overwrite cart.js.coffee and checkout/address.js.coffee, your all.js should look like:
//= require jquery
//= require jquery_ujs
//
//= require spree/frontend
//= require spree/frontend/cart
//= require spree/frontend/checkout/address
//
//= require_tree .
Don't ask me why that's necessary. My understanding is that //= require_tree . should do that automatically, but it my case, well, it wasn't.
After creating an all.js file and redundantly specifying each file, this finally worked for me. But I'm a spree/rails noob, so there's quite probably a better solution.
Edit:
Actually, to get this working I had to put the above in /vendor/assets/javascripts/spree/frontend/all.js and remove /app/assets/javascripts/spree/frontend/all.js. Still confused why this is necessary and why require_tree doesn't pick these up automatically, but happy to finally get it working.

Backporting this patch for Solidus 2.1.0 solved my issue of replacing/overwriting JS assets [1].
The problem appeared to be that there was an issue with Sprockets where using require_tree or relative require prevented JS assets in the pipeline from being overridden.
In summary
Create a new file under your project's vendor/assets with the same filename as the JS file you're going to replace in Solidus. For example, to overwrite the file solidus_backend/app/assets/javascripts/spree/backend/flash.coffee, create a replacement file in your project at your_project/{app,vendor}/assets/javascripts/spree/backend/flash.coffee. [2]
Create the files your_project/{app,vendor}/assets/javascripts/spree/backend.js and your_project/{app,vendor}/assets/javascripts/spree/backend/templates/index.js in your project.
Copy the contents for the backend.js and index.js files from solidusio/solidus#1613 into your project.
Remove any requires for files that do not exist in your Solidus version, and keep any custom requires if you already had backend.js and index.js defined. [3]
Footnotes
Includes .js, .coffee, .hbs, and any other files that compile to JavaScript during the asset pipeline compilation.
Either directory between {app,vendor}/assets in your project will work since they should both be in the asset pipeline loadpath. It's a matter of preference how you want to organise Solidus extensions and overrides.
I had to remove spree/backend/images/upload from backend.js
and spree/backend/templates/products/upload_progress from index.js since I was using an older version of Solidus and those files didn't exist yet, so I would get an FileNotFound error from Sprockets.

Bootstrap-sass gem Javascript not Working in Rails 4

when using the bootstrap-sass gem i have loaded my css files properly, however have been receiving an error when i try loading the javascript files. I have followed the procedure of loading javascript from https://github.com/twbs/bootstrap-sass however when I view my webpage on localhost I receive the error "couldn't find file 'bootstrap'"
This is what my application.js file looks like - Any help would be much appreciated!
Application.js
// 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
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
// Loads all Bootstrap javascripts
//= require bootstrap
//= require_tree .

From the Rails 4 the :assets group isn't used anymore, please remove the group from Gemfile:
Rails 4.0 removed the assets group from Gemfile. You'd need to remove that line from your Gemfile when upgrading. You should also update your application file (in config/application.rb):
Bundler.require(:default, Rails.env)

I got it to work by removing gem 'bootstrap-sass', '~> 3.0.3.0' out of the assets group in gemfile! YAY

Did you bundle install and make sure you are loading application.js (from the assets pipeline).

undefined method `pageless' using jquery.pageless in Ruby on Rails

I'm trying to implement an infinite scroll and using jquery.pageless
But I'm getting this error: undefined method 'pageless'
I include jquery.pageless.js on my application.html.erb in assets:
<%= javascript_include_tag 'jquery-1.3.2.min', 'jquery.pageless' -%>
Any suggestion about how to solve this?

I don't know why you are using the format:
<%= javascript_include_tag 'jquery-1.3.2.min', 'jquery.pageless' -%>
in application.rb.
In assets/javascript/application.js, add those files:
// 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
// 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 jqeury.pageless
//= require jquery_ujs
//= require_tree .
You need to make sure you have jquery installed:
gem install jquery-rails
then:
bundle install
Also make sure you have the jquery-pageless.js files in on of the paths mentioned in the application.js file so it gets picked up by the asset pipeline.

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
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery.pageless
//= require jquery_ujs
//= require turbolinks
//= require_tree .