Environment: Rails 3.2.3
I am editing this question to include the helper module's source code, and the suggestions here:
This is my first attempt at doing a dropdown menu in a Rails application. I tried looking for help on the topic, but what complicated things is that the term dropdown menu is used for actual dropdown menu (page menu), as well as what is dropdown lists, form options, form selections, etc. in questions,and forums, making it difficult to find the information I'm looking for.
I found a pointer to https://github.com/dkeskar/rails-jquery-dropdown, (source code at end of post) and following the instructions, I downloaded jquery_dropdown_helper.rb: ) and placed it in /lib
In my Gemfile, I have the following:
gem 'jquery-rails'
In _header.html.erb, I have the following:
<% require 'jquery_dropdown_helper' %>
....
<%= hidden_field_tag :sort_criteria %>
<%= dropdown_tags :sort_criteria, 'Select Criteria',
%w(Category Status Amount-High Amount-Low) %>
But this is not working. Here's the error code I'm getting:
undefined method `gsub' for :sort_criteria:Symbol
I looked at the trace, and it seems as if this line in jquery_dropdown_helper.rb is the issue:
id = options[:id] || "#{field.gsub(/[[]\s]/, '-')}-selector"
Any ideas?
SOLUTION TO THE DROPDOWN MENU ISSUE
I was looking for a way to have dropdown menus in my rails applications, but could not get an answer to this question. Following a couple of days of research, I did find a solution, using the Twitter gem 'twitter-bootstrap-rails'.
Add the following to your Gemfile:
gem 'twitter-bootstrap-rails'
Add the following to your app/assets/javascripts/application.js
Make sure it's in this exact order:
//= require jquery
//= require jquery_ujs
//= require_tree .
//= require bootstrap
Then, where you want the dropdown menu, add the following:
<ul class="nav nav-pills">
<li class="dropdown" id="admin_menu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#admin_menu">
ADMIN
</a>
<ul class="dropdown-menu">
<% Admin_menu.each do |menu_text,menu_action| %>
<li><%= menu_text %></li>
<% end %>
</ul>
</li>
</ul>
Note that I have the following hash:
Admin_menu = Hash.new
Admin_menu["Events"] = "events#index"
Admin_menu["Categories"] = "categories#index"
Admin_menu["Panels"] = "panels#index"
Assuming that you have scaffolding for the following: events, categories, and panels, it should all work
jquery_dropdown_helper.rb does not provide a method called sort_criteria. I think the example should be:
<% require 'jquery_dropdown_helper' %>
....
<%= hidden_field_tag :sort_criteria %>
<%= dropdown_tags :sort_criteria, 'Select Criteria',
%w(Category Status Amount-High Amount-Low) %>
:sort_criteria is just the name of the form element and can be a symbol or a string (i.e. :sort_criteria or 'sort_criteria')
Related
How can I edit the following below in the index page? I would like to be able to inline edit and update the following the view has the index action
<% #request.each do |s| %>
<%= s.message %>
<%= s.date %>
<% end %>
Tried the gem best in place but i doesnt seem to work so whenever i tried
<%= best_in_place #request, :message %> it throws an error of unknown method :message. Isnt this <%= best_in_place #request, :message %> the same with this <%= s.message %>
Does best in place work in rails version 5.1.4 and how can I make the inline edit to work ?
Does best in place work in rails version 5.1.4 and how can I make the
inline edit to work ?
Yes, it works, you need jQuery and to add the gem and JS libraries.
For jQuery:
$ yarn add jquery
Then in your application.js file:
//= require jquery
For best_in_place, add the gem in the Gemfile:
gem 'best_in_place', '~> 3.0.1'
Then the library in your application.js file:
//= require jquery
//= require best_in_place
...
$(document).ready(function() {
/* Activating Best In Place */
jQuery(".best_in_place").best_in_place();
});
You see the best_in_place js right after jquery, and the initialization in the same file - you must add //= require_tree . for initializing in the same file.
Then in your view you need to pass the object and the attribute:
<% #request.each do |request| %>
<%= best_in_place request, :message %>
...
<% end %>
I wanted to add some pagination to my rails project.
I've already added Kaminari and I've managed to display only 10 records per page. But I'm already missing the next/prev arrow and the page indicator.
I'm using Kaminari.paginate_array(#array).page(params[:page]).per(10)
This is the only thing I've added until now.
I don't know if it's important, but in my view I have #array.to_json
What should I add to display the arrows?
View code:
<% content_for :create_button do %>
<%= create_button(new_battery_reset_path) %>
<% end %>
<div class="tab-content">
<%= paginate #battery_resets %>
<div class="tab-pane active" id="battery-resets" role="tabpanel"
data-battery-resets='<%= #battery_resets.to_json %>'>
</div>
<div class="tab-pane" id="profile" role="tabpanel">...</div>
<div class="tab-pane" id="messages" role="tabpanel">...</div>
</div>
controller code:
def index
#battery_resets = Kaminari.paginate_array(BatteryResetDecorator.build_collection(
::Filters::BatteryReset.new(
current_account.battery_resets.includes({ device: :account },
:device_inspection)
).apply(permited_params[:q])
)).page(params[:page]).per(10)
respond_with(#battery_resets)
end
You might want to put <%= paginate #array %> in your rails view.
Also try to read gem's wiki first before asking any questions.( kaminari wiki )
Per the docs:
Just call the paginate helper:
<%= paginate #battery_resets %>
This will render several ?page=N pagination links surrounded by an
HTML5 <nav> tag.
This is the same pattern for will_paginate (another gem) also.
--
In regards your fa_icon error, that's caused by the font-awesome-rails gem; it means the helper is not available.
The way to fix it is to make sure you're only using the bundled files with Kaminari. If you've changed _next_page.html.erb in any way, the error is likely coming back now.
--
The quick fix for the fa_icon error is to add font-awesome-rails to your Gemfile:
#Gemfile
gem "font-awesome-rails"
I am trying out react and Rails. I have a very simple rails app with one Model called "Story".
I installed the react-rails gem:
gem 'react-rails', '~> 1.0'
and followed the suggested installation procedure.
I have scaffolded the story model and made the the 'new' method to root in my routes.rb file. All works fine.
I have added a #stories instance to my 'new' method in storiescontroller that holds all records from the database:
# GET /stories/new -- file: stories_controller.rb
def new
#stories = Story.all
#story = Story.new
end
and in my view I added this line of code
# -- file: new.html.erb
<%= react_component('Story', { :data => #stories }) %>
and in my javascript file I have this code:
# -- file:assets/javascripts/components/story.js.jsx
var Story = React.createClass({
displayName: 'Story',
propTypes: {
title: React.PropTypes.string,
description: React.PropTypes.node
},
render: function() {
return (
<div>
<div>Title: {this.props.title}</div>
<div>Description: {this.props.description}</div>
</div>
);
}
});
I thought this should work. But it don't. When I replace the code in the view page with this:
<%= react_component('Story', { :title => "my title", :description=> "my description" }) %>
Then both the 'title' and 'description' are rendered correctly.
It seems that the #stories instance from my view is not parsed correctly to the react component. Then I tried the old-fashion way with
<% #stories.each do |story| %>
<div class="panel">
<h3><%= story.title %></h3>
<p><%= story.description %></p>
</div>
<% end %>
and that works OK. So no problems with the #stories instance. It holds all records and is accessible form the new.htm.erb file.
I am loading the react files after turbolinks in application.js. And settled with this code
# -- file: application.js
//= require jquery
//= require jquery_ujs
//= require foundation
//= require turbolinks
//= require react
//= require react_ujs
//= require components
//= require_tree .
$(function(){ $(document).foundation(); });
I can't find the answer on the internet so i hope someone can help me with my first attempt to get react running in my rails environment.
If #stories is an array and passed like this
<%= react_component('Story', { :data => #stories }) %>
then that array will be available on a prop named data, ie., this.props.data will be the array of stories. There is no magic unpacking going on here which will allow you to access each storys properties.
<% #stories.each do |story| %>
<%= react_component('Story', { :story => story }) %>
<% end %>
will allow you to access your data like so this.props.story.title and also render a div for each story you have in your array
I understand Kaminari perform well with Rails3 reading this article: Rails 3 pagination, will_paginate vs. Kaminari, but how about with Rails4? Also, when stylizing them with Bootstrap3, which gem is easier solution?
In my experience, there is very little difference between Kaminari & Will Paginate - it's mainly a personal choice as to which you use (rather like Paperclip / Carrierwave or Mac / Windows)
In terms of compatibility, both gems work natively with Rails 4
Bootstrap
In reference to Bootstrap, I think you're asking the wrong question
Bootstrap is a CSS framework, which has no bearing on the backend functionality of your app
Bottom line is you're going to have to call the pagination methods from your controller, and so the differences of the systems will only be cosmetic. If you use Bootstrap to stylize them, you'll have to do the same with either gem
So the choice is yours!
It is pretty easy to implement twitter bootstrap pagination with Kaminari. Just follow the steps below:
Add gem 'kaminari' to your GemFile. Run bundle install and restart rails server
Check the Kaminary themes - in your case you need the bootstrap3 theme
Run rails g kaminari:views bootstrap3
That's it.
Kaminari works fine for me with Rails 4.1.5
You can get it working with Bootstrap 3 by changing one line of code in the generated Bootstrap theme for Kaminari
In Views/Kaminari/_paginator.html.erb
Change this line: <div class="pagination"><ul>
To this: <ul class="pagination pagination-lg">
..and get rid of the div; just use the ul above --works fine for me.
Here is the code for the whole partial:
<%= paginator.render do %>
<ul class="pagination pagination-lg">
<%= first_page_tag unless current_page.first? %>
<%= prev_page_tag unless current_page.first? %>
<% each_page do |page| %>
<% if page.left_outer? || page.right_outer? || page.inside_window? %>
<%= page_tag page %>
<% elsif !page.was_truncated? %>
<%= gap_tag %>
<% end %>
<% end %>
<%= next_page_tag unless current_page.last? %>
<%= last_page_tag unless current_page.last? %>
</ul>
<% end %>
I have added the pjax javascript.
In my view I have:
<div data-pjax-container>
<%= yield %>
</div>
But still onclick the hole page updates.
Be sure you have included this line in app/assets/javascript/applications.js:
//= require jquery.pjax
Add an id attribute to the div:
<div id="target_pjax_container" data-pjax-container>
<%= yield %>
</div>
And make an explicit call to a pjax div from a link in your views:
<%= link_to 'user', user_path, :'data-pjax' => '#target_pjax_container' %>
Note:
The gem used is 'pjax_rails'. Always check that javascript isn't broken (with firebug or equivalent - You can also use it to sniff the network and view the pjax request).
Maybe you forget to add the line:
//= require pjax
to app/assets/application.js?