Jquery mobile, rails, collapsibles - extra labels appearing - ruby-on-rails

I'm trying to display a simple collapsible set from a rails app. It works perfectly the first time, giving me the output below.
However, when I go back to the page (via the "Save changes" form submit), additional labels are appearing, and I can't work out why:
My index.html.erb file is as follows:
<div data-role="page" data-url="<%= request.path %>">
<div data-role="header">
<h1> CB </h1>
</div>
<div data-role="content">
<div data-role="collapsible-set">
<% #gr.each do |g| %>
<div id=" <%= g %>" data-role="collapsible">
<h3> <%= g %> </h3>
<p>
<%=form_tag "/checkboxen", method: :get do %>
<% #gr2.each do |g2| %>
<%= check_box_tag "#{g}_#{g2}" %>
<%= label_tag "#{g}_#{g2}",g2 %>
<% end %>
<%= submit_tag %>
<% end %>
</p>
</div>
<% end %>
</div>
</div>
While my (very simple) checkboxen_controller.rb is this:
class CheckboxenController < ApplicationController
def index
#gr=["one","two","three"]
#gr2=["a","b","c"]
end
end
As you can probably guess, I'm a newbie to this, and can't work out why it's happening (if it matters, I've turned turbolinks off, and have no unusual javascript in the system).

I've found a work-around: instead of using <%= label_tag %> I explicitly enclosed the check_box_tag in a <label> ... </label>. Why the original didn't work is something I still haven't figured out.

Related

I'm trying to render two columns of information in my rails app

So, I have an app that is trying render 2 (or maybe more if needed) columns using a loop. It does one column and looks pretty good, but I want the option of 2 or even more. I know about "in_groups.of()", but I can't quite figure it out to work with my
<% #vendors.each do |vendor| %>
<%= link_to vendor do %>
<div class="row">
<div class="col-md-6">
<div class="card-container">
<div class="col-md-6">
<div class="card">
<%= image_tag attachment_url(vendor, :background_image), class: 'card-img-top' %>
<div class="card-block">
<h4 class="card-title"><%= vendor.Company %>. </h4>
<p class="card-text"><%= vendor.Description.html_safe.first(25) %></p>
<div class="card-standing"><strong><%= vendor.FinancialStanding %></strong></div>
</div>
</div>
</div>
</div>
</div>
</div>
<% end %>
<% end %>
Not sure why you needed this, because everything can be managed with css and html. But you can make changes like this:
<% #vendors.to_a.in_groups_of(2).each do |vendor| %> # #vendors.to_a cover AR to array
<% vendor.each do |v| %> # becuase vendor is array here.
..........your code..............
<% end %>
<% end %>

How to group and dry common view code in Rails

I have two models Episode and Playlist with the following two views:
For Episode:
<div class="name">
<%= link_to episode.name, episode_path(episode) %>
</div>
<div class="description">
<%= link_to episode.description episode_path(episode) %>
</div>
For Playlist:
<div class="name">
<%= link_to playlist.name, playlist_path(playlist) %>
</div>
<div class="description">
<span>Some special span</span>
<%= raw(playlist.description) %>
</div>
The common things between this two views are the
<div class="name">. <div class="description">
but the content of this two divss is different for each view.
Question: How could I extract this two common divs into another view, called _section?
What have I tried:
Cells -> they give me a nice view model with properties, but I could not find a way to added additional HTML elements between the places where the properties will be put.
Yield and Content_for-> I have tried to create a separate _section layout with:
_section.html.erb
<div class="name">
<%= yield :name %>
</div>
<div class="description">
<%= yield :description %>
</div>
and then two views. The Episode view will render the following
<% render layout: "section" do %>
<% content_for :name do %>
<%= link_to episode.name, episode_path(episode) %>
<% end %>
<% content_for :description do %>
<%= link_to episode.description episode_path(episode) %>
<% end %>
<% end %>
This kind of works until you get to caching (they said content_for does not work with caching and I need to cache this) and the other problem I had was that you should include an additional empty not named yield.
I ended up with moving all the logic for playlist and episode views into a single view - called section that basically does the following:
<div class="name">
<%= link_to object.name, polymorphic_path(object) %>
</div>
<div class="description">
<% if is_episode? %>
<h1>Some special h1 for episode</h1>
<% elsif is_playlist? %>
<h2>Some special other html for playlist for episode</h2>
<% end %>
<%= raw(playlist.description) %>
</div>
Wow those "ifs" are ugly. I am not sure if I understood the problem correctly, but it is surprising I could not find a cleaner solution.

Ruby on Rails View Rendering DB Info On Page

I am working on a project and currently working on one of the views which is a page of different categories. Everything is rendering correctly however it's also putting the db info in the page.
Here is the code of my view
<div class="categories">
<div class="container blurbs">
<div class="cards row">
<%= #categories.each do |c| %>
<div class="card col-xs-4" %>
<%= image_tag c.image, :class => "cat" %>
<h4 class="title"><%= c.title %></h4>
</div>
<% end %>
</div>
</div>
</div>
Here is a link to a
screenshot of rendered page
Yes, fix is:
<div class="categories">
<div class="container blurbs">
<div class="cards row">
<% #categories.each do |c| %>
<div class="card col-xs-4" %>
<%= image_tag c.image, :class => "cat" %>
<h4 class="title"><%= c.title %></h4>
</div>
<% end %>
</div>
</div>
</div>
Look I removed = from this <%=.. In the below line :
<% #categories.each do |c| %>
#each method returns the collection after it completed its iterations. And due to this <%=, the return value of each which is #categories printed back. But if you use <%.. only, all above things will happen, but it wouldn't print back the object #categories.
when you use the tags <%= ... %> whatever is within the tags gets displayed on the page. In your current view you have
<%= #categories.each do |c| %>
<div class="card col-xs-4" %>
<%= image_tag c.image, :class => "cat" %>
<h4 class="title"><%= c.title %></h4>
</div>
<% end %>
Which displays the entirety of whatever the loop returns which is where you're getting the display. Change the tags to be <% #categories.each do |c| %> and you'll be good to go.

Rails passing attributes to nested modals with foundation

I have the following code. In the first modal that comes up I'm listing all of the user's images. When they click on one of the images it triggers the second modal and I want the id of the image to be available to me. But it's always coming back as the id of the last image.
<div id="firstModal" class="reveal-modal" data-reveal>
<% if signed_in? %>
<h4>Your Images</h4>
<div class="dashboard-panel">
<% #assets.each do |asset| %>
<%= image_tag asset.file_name.url(:dashboard).to_s %>
<%= asset.id %>
<% end %>
</div>
<% else %>
You don't have any images.
<% end %>
<a class="close-reveal-modal">×</a>
</div>
<div id="secondModal" class="reveal-modal" data-reveal>
<h2>This is a second modal.</h2>
<p>Asset id is <%= #selected_asset.inspect %></p>
<a class="close-reveal-modal">×</a>
</div>
I think there is something wrong with my structure but I can't figure it out :(
The html of the second modal is only generated once. The value of #selected_asset will be the id of the last asset in the loop. One option is to generate a separate modal for each image, something like this:
<% #assets.each do |asset| %>
<a href="#" data-reveal-id="secondModal-<%= asset.id %>Click</a>
<div id="secondModal-<%= asset.id %>" class="reveal-modal" data-reveal>
<h2>This is a second modal.</h2>
<p>Asset id is <%= asset.id %></p>
<a class="close-reveal-modal">×</a>
</div>
<% end %>
Note the inclusion of asset.id in the id of the modal so they are all unique

How to put images into an array Ruby on Rails

I have a Ruby on Rails app that allows a user to save up to 6 images that can then be viewed in a carousel.
The images are saved as strings as image, image_2, image_3, image_4, image_5, image_6.
I want to be able to write a 'for' loop to display all of the images in my carousel.
What is the best method of combining all of these image strings into an array so that they can then be looped through and outputted by the carousel?
Further Details
I am currently calling the images like below which works but isn't particularly DRY.
<div style="position:relative">
<div id="home-carousel" class="carousel">
<div class="carousel-inner">
<div class="item active">
<%= image_tag #place.image %>
</div>
<% if #place.image_2.present? %>
<div class="item">
<%= image_tag #place.image_2 %>
</div>
<% end %>
<% if #place.image_3.present? %>
<div class="item">
<%= image_tag #place.image_3 %>
</div>
<% end %>
<% if #place.image_4.present? %>
<div class="item">
<%= image_tag #place.image_4 %>
</div>
<% end %>
<% if #place.image_5.present? %>
<div class="item">
<%= image_tag #place.image_5 %>
</div>
<% end %>
<% if #place.image_6.present? %>
<div class="item">
<%= image_tag #place.image_6 %>
</div>
<% end %>
</div>
</div>
</div>
I would like to be able to turn what I have below into a simple for loop that will go through each of the 6 image objects and return the ones that are there. Something more like this:
<div style="position:relative">
<div id="home-carousel" class="carousel">
<div class="carousel-inner">
<% #place.images.each do |image| %>
<div class="item">
<%= image_tag image %>
</div>
<% end %>
</div>
</div>
</div>
The simple solution is to add a helper. So in helpers/places_helper.rb write
module PlacesHelper
def get_carrousel_images(place)
[
#place.image_1,
#place.image_2,
#place.image_3,
#place.image_4,
#place.image_5,
#place.image_6
].select {|img| img.present? }
end
and then you can write the following in your view:
<div style="position:relative">
<div id="home-carousel" class="carousel">
<div class="carousel-inner">
<% get_carrousel_images(#place).each do |image| %>
<div class="item">
<%= image_tag image %>
</div>
<% end %>
</div>
</div>
</div>
Now having the 6 image_x fields for place looks a bit smelly, so I would prefer a nested model instead as Rich Peck proposes, although I understand having the 6 fields is easier to start with.
Images
It will all depend on how you've set up the images in the db, and how you'd like to show them in the view
If you have the images in the User model, you could call them like this:
app/controllers/users_controller.rb
Class UsersController < ApplicationController
def show
#user = User.find params[:id]
#images = #user.images
end
end
This is obviously very generalised - I would recommend you post some context to your question, so we know what you're asking specifically
--
Paperclip
If you're using Paperclip or Carrierwave, you'll basically have the images attached to various objects in your database. For example, you'll have the following:
#app/models/image.rb
Class Image < ActiveRecord::Base
has_attached_file :attachment
end
This allows you to call:
#images = Image.all
#images.each do |image|
image.attachment.url #-> image URL
end
This is the standard way to handle images / attachments in Rails, as it ties directly into ActiveRecord. Returning an array of image paths would therefore be a case of calling Model.all or Model.where

Resources