I added the best_in_place gem to my project and the update does NOT take effect until a page reload has happened. I can see it flash in my show view but it requires a page reload. Why is this?
My Lists controller:
respond_to :html, :xml, :js
def update
#list = List.find(params[:id])
#list.update_attributes(params[:list])
respond_with(#list, :location => list_url(#list))
end
My Lists show view-
<h2 class="page-header"><%= best_in_place #list, :name %></h2>
<h2 class="lead"><%= best_in_place #list, :description %></h2>
My gemfile-
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'best_in_place'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', :platforms => :ruby
gem 'jquery-ui-rails'
gem 'uglifier', '>= 1.0.3'
end
My application js manifest -
//= require jquery
//= require jquery_ujs
//= require jquery.ui.datepicker
//= require justgage
//= require raphael.min
//= require jquery.purr
//= require best_in_place
//= require_tree .
My lists coffee-
jQuery ->
$('#task_due_date').datepicker
dateFormat: 'mm/dd/yy'
jQuery ->
$('.best_in_place').best_in_place()
Could it be the order of my manifest js files? What am I overlooking here to get the update to take without a page reload? Thanks for your attention.
I simply forgot to add the respond_to :json at the top of my lists controller. Thanks to those that took a look.
Related
I'm working on autocomplete part in rails. I am using 'jquery-ui-rails' gem. while using $(document).ready it is working but it I use $( document ).on('turbolinks:load', function() {} it is not working because of materialize-sprockets.
If I remove //= require materialize-sprockets in application.js then it working. if I add that line then it is not working. I need materialize-sprockets for design purpose.
Gemfile
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '2.5.1'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.2.2'
# Use sqlite3 as the database for Active Record
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'materialize-sass'
gem 'sqlite3'
# Use Puma as the app server
gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# See https://github.com/rails/execjs#readme for more supported
runtimes
# gem 'mini_racer', platforms: :ruby
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# Turbolinks makes navigating your web application faster. Read
more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
gem 'jquery-turbolinks'
# Build JSON APIs with ease. Read more:
https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
application.js
//= require jquery
//= require jquery-ui
//= require rails-ujs
//= require jquery-ui/widgets/autocomplete
//= require autocomplete-rails
//= require materialize-sprockets
//= require activestorage
//= require turbolinks
//= require_tree .
_form.html.erb
<div class="field">
<%= f.label :category_id %><br />
<%= f.text_field :category_name, data: { autocomplete_source:
categories_path} %>
</div>
categories_controller.rb
def index
#categories = Category.order(:name).where("name like ?", "%#
{params[:term]}%")
render json: #categories.map(&:name)
end
product.js
$( document ).on('turbolinks:load', function() {
$("input#product_category_name").autocomplete({
source: $('#product_category_name').data('autocomplete-source')
});
})
routes.rb
resources :products
resources :categories
How to use $( document ).on('turbolinks:load') with
//= require materialize-sprockets ?
Version Rails 5 beta 3. I am using gem jquery-ui-rails 5.0.5
gemfile
................................................
gem 'jquery-rails'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-ui-rails'
application.js:
//= require turbolinks
//= require jquery
//= require jquery-ui/datepicker
//= require jquery_ujs
//= require jquery.turbolinks
//= require cocoon
//= require jquery_nested_form
//= require jquery-fileupload/basic
application.css
/**
* application.css
*
*= require jquery-ui/datepicker
*= require_self
*= require_tree ./all
freelancers/edit.html.erb
<li class="form-fields__group form-fields__group_birthdate">
<label for="freelancer_birth_date">Birthday</label>
<div class= "field">
<%= f.text_field :birthday %>
</div>
</li>
Table name: freelancers
#
# id :integer not null, primary key
# first_name :string
# last_name :string
# rate :integer
# birthday :date
javascripts/freelancer.coffee
jQuery ->
$('#freelancer_birthday').datepicker()
I click on field birthday, but dont open datepicker. Nothing happens. How can solve this problem? Thank you
I have a Rails 3.1 app that uses the foundation-rails gem and the jquery-rails gem and everything seems to be working. I tried to add the jquery-ui-rails gem to the mix and ran bundle install and everything looks good. Here is the relevant part of my gemfile:
# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'
gem 'sqlite3'
gem 'mysql2'
gem 'devise'
gem 'omniauth'
gem 'omniauth-facebook', '1.4.0'
gem 'omniauth-google-oauth2'
gem 'jquery-rails'
gem 'json'
# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem 'sass-rails', '~> 3.1.4'
gem 'coffee-rails', '~> 3.1.1'
gem 'uglifier', '>= 1.0.3'
gem 'foundation-rails'
gem 'jquery-ui-rails'
end
Here is application.js:
//= require jquery
//= require jquery_ujs
//= require jquery.ui.all
//= require foundation
//= require_tree .
$(function(){ $(document).foundation(); });
Here is application.css:
/*
* This is a manifest file that'll automatically include all the stylesheets available in this directory
* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
* the top of the compiled file, but it's generally better to create a new file per style scope.
*= require_self
*= require foundation_and_overrides
*= require_tree .
*/
/*
*= require jquery.ui.all
*/
I have a page that includes the following code:
<ul id='sortable_list'>
<% #list.items.each do |item| %>
<li><%=item.name%></li>
<%end%>
</ul>
</div>
</div>
<script>
$(function() {
$( "#sortable_list" ).sortable();
$( "#sortable_list" ).disableSelection();
});
</script>
The list is not sortable when the page loads and I get a "Uncaught ReferenceError: $ is not defined". I'm at my wits end - help, please!
OK, so the issue was the current version of Foundation (5.0.2). The documentation says that its script tag should be placed right before the closing tag. I put my script_tag for application.js there and, apparently, jQuery likes to be loaded in the head. So I moved //= require foundation out of application.js, moved <%= javascript_include_tag "application" %> back to the head, and added <%= javascript_include_tag "foundation" %> by itself at the bottom of the document. I figure this will work until they fix the bug in 5.0.2 that requires that it be loaded at the end of the body.
I tried to get rack-pjax working on my rails app according to this railscast, but I have noticed no change, nor any errors. Here are the pertinent files:
gemfile:
source 'https://rubygems.org'
gem 'rails', '3.2.13'
gem 'bootstrap-sass', '2.1'
gem 'simple_form'
gem 'rspec'
gem 'pg'
gem 'koala', '~> 1.7.0rc1'
gem 'rack-pjax'
gem 'jquery-rails'
gem 'fancybox-rails'
group :development, :test do
gem 'sqlite3'
end
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'uglifier', '>= 1.0.3'
end
config/application.rb:
require File.expand_path('../boot', __FILE__)
require 'rails/all'
if defined?(Bundler)
Bundler.require(*Rails.groups(:assets => %w(development test)))
end
module Prestongunderson
class Application < Rails::Application
config.middleware.use Rack::Pjax
config.encoding = "utf-8"
config.filter_parameters += [:password]
config.active_support.escape_html_entities_in_json = true
config.active_record.whitelist_attributes = true
config.assets.enabled = true
config.assets.version = '1.0'
end
end
app/assets/javascripts/application.js:
//= require jquery
//= require fancybox
//= require jquery_ujs
//= require jquery.pjax
//= require_tree .
app/assets/javascripts/static_pages.js.coffee:
$(document).ready ->
jQuery ->
$("a.fancybox").fancybox()
jQuery ->
$('.local-nav a').pjax('[data-pjax-container]')
app/views/layouts/application.html.erb:
<!DOCTYPE html>
<html>
<%= render 'layouts/header' %>
<%= render 'layouts/subscribe' %>
<%= render 'layouts/soundcloud' %>
<%= render 'layouts/tweet-stream' %>
<body>
<div data-pjax-container>
<%= yield %>
</div>
<%= render 'layouts/footer' %>
<%= render 'layouts/google_analytics' %>
</body>
</html>
app/views/layouts/_header.html.erb
<header>
...
<ul>
<% ["Home", "Bio", "Gallery", "Music", "Tour", "Videos", "Contact"].each do |page| %>
<li><%= link_to( page.upcase, #title == page ? "#" : "/#{page.downcase}", class: "local-nav") %></li>
<% end %>
...
</ul>
...
</header>
Is it possible for me to have conflicting code somewhere? Are there some other dependencies I'm missing?
Edit
This is supposed to use Ajax to load only the data in the div with the data-pjax-container on a link request. Instead, it loads the entire page. I test this by playing a song in the media player I have in a side bar, rendered in layout _soundcloud.html.erb, outside of the yeild. When clicking a link set up with pjax, it should only update the single div, but it loads a whole new page, and stops the music.
The jquery-pjax API that you use seems to be outdated now. According to the docs, this line
$('a.local-nav').pjax('[data-pjax-container]')
should be
$(document).pjax('a.local-nav', '[data-pjax-container]')
Btw, you should use a.local-nav selector instead of .local-nav a if you set local-nav class to the link.
I have similar experience though using pjax-rails, but the reason should be the same on JS side.
A very possible reason is it takes a bit long for your development server to response. Pjax can't wait so long by default, so it falls back to normal HTTP request.
The solution is to add time out option on JS
$('.local-nav a').pjax('[data-pjax-container]', {timeout: 2000})
pjax breaks when redirect involved in request cycle. Check it aswel.
I'm trying to use Twitter Bootstrap with the 'bootstrap-sass' gem but for some reason, the behavior is absolutely not right.
Judging by a submit button styled with class="btn" like so
<div class="actions btn">
<%= f.submit %>
</div>
The result is that there are the bootstrap styles, but they are overriden by the user-agent rules so that the result is the standard Chrome button that appears on top of the bootstrap one... Here is a link to what I get :
*http://hpics.li/9ddcb61
Also, without changing anything (all I did was try the suggestion in comments and put it back as it was), now things don't float around but are all vertical :
*http://hpics.li/f7605d0
This is what I get in Dev Tools :
*http://hpics.li/db602b0
This is the gem file
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'bootstrap-sass'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', :platforms => :ruby
gem 'uglifier', '>= 1.0.3'
end
I have a custom.css.scss file with this inside :
#import "bootstrap";
#import "_bootstrap-responsive.scss";
I also have tried adding this to the application.css.scss before the require_self and require_tree with no success
*= require _bootstrap
*= require _bootstrap-responsive
This is the js file in case it would be useful
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
I have really no idea what is going on, moreover I did the railstutorial book and everything worked fine when I was on it, but on my own app, nothing works... :(
I'm not sure I gave all information but feel free to request!
It's doing exactly what you're telling it, namely creating a "Bootstrap-styled" button and placing a non-Bootstrap-styled submit button inside it.
Try simply adding the btn class to your submit button:
<%= f.submit , :class => "btn" %>
In bootstrap buttons and button styling requires the javascript part of bootstrap to be load also. You can do this by adding this line:
//= require bootstrap
to your app/assets/javascripts/application.js file above the line
//= require_tree