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: assets js manifest not picking up specific js file

I can't get my prints.js file to get picked up by the manifest (I presume that is the issue.)
this is in the appliction.js manifest:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require 'main'
//= require 'cards'
//= require 'prints'
//= require_tree .
the cards.js has a console log saying hello like this :
$(document).on('turbolinks:load', function() {
console.log('cards js file executed.')
...
});
When I do the same thing for cards.js like this:
$(document).on('turbolinks:load', function() {
console.log('Prints js file executed.');
});
the console only calls out the cards.js console log statement, but not prints.
I restarted rails server, and rebooted my local machine hoping that would pick it up. but no result.
(Rails 4.2)
EDIT
I am decided to use the application.js for hosting the function I need.
Though it works, it feels 'cheap' and if anybody has any suggestions of what could make a manifest not include files, that would be greatly appreciated. But I have a temporary solution.

try without quote like following. after change please restart server
//= require main
//= require cards
//= require prints

How to organize JavaScript assets in Rails app

I am trying to transform a static website to rails. At the moment I have following javascript:
$(document).ready(function() {
$('#slider').s3Slider({
timeout: 3000
});
});
in app/views/layouts/application.html.erb placed inside head tag. The script is working fine(i.e. sliding few images).
I know this is not the right place to have javascript code.
1. Could anyone help me to place this code in the right place in the assets? and
2. Will it work as it is or I will have to make changes?
Update
In app/assets/javascripts/application.js I have the following:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require welcome
//= require_tree .
aap/assets/javascripts/welcome.js is the file that now contains the above mentioned javascript code

rails fixed header table with varied width

I'm trying to create a fixed header table in my index view. After 2 days I'm on it, I finally found the jQuery fixedheadertable addon, and I still can't use it. I guess I'm doing something wrong because it's the first time I'm using jQuery. This is what I have done:
Added the file jquery.fixedheadertable.js to \app\assets\javascripts
In application.js:
//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require jquery.fixedheadertable
..
..
In my_js_coffee_file:
$ ->
$("#id_of_my_index_table").fixheadertable({
caption : 'My header is fixed !',
height : 200
});
Also tried:
$ ->
$('#id_of_my_index_table').fixedHeaderTable('show');
No change at all...
what's wrong here?
Thanks.

Your question does not have the details to properly analyse what is wrong. However, try these and see if it helps.
Does your application.js have require_tree in it? Also, try adding your my_js_coffee_file in the end of the application.js
Ex :
//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require jquery.fixedheadertable
//= require my_js_coffee_file
Or alternatively, you can also code the same thing inside the application.js file itself. And then try running. Check your console log to see what errors pop up.

Using stickyTableHeaders JQuery plugin solved my problem.
https://github.com/jmosbech/StickyTableHeaders

rails 3 does not render jquery properly

i have https://github.com/tkrotoff/jquery-simplecolorpicker-rails and i have tried https://github.com/tkrotoff/jquery-simplecolorpicker in plain HTML and the plain HTML worked.
I had swapped the code from the HTML to the one in rails but all my jquery functions does not work at all.
The file colorselect.js
$(function(){
$('#print_colorpaper').simplecolorpicker();
});
colorpaper.html.erb
<%= f.select(:colorpaper, Print::MY_COLORS, :selected => '#fbd75b') %>
the only thing i see in rails is the drop down menu which should be transformed into a palette as i see here: http://www.taqisystems.com/fiddle/
my application.js
//= require jquery
//= require jquery_ujs
//= require jquery.simplecolorpicker.js
//= require jquery.multi-select.js
//= require twitter/bootstrap
//= require_tree .
html source of the select:
<select id="print_colorpaper" name="print[colorpaper]"><option value="#7bd148">green</option>

I have it working using the following:
Try change in your app/assets/javascripts/application.js
jQuery(document).ready(function(){
jQuery('#print_colorpaper').simplecolorpicker();
});