I have a fixed header for every page on my rails app. Is there any way that when I click every link_to to whatever source only refresh the yield part?
<html>
<body>
<%= render 'layouts/header' %>
<div class="row">
<div>
<%= yield %>
</div>
</div>
The current code make each link refresh whole page including the header
Related
I'm trying to implement lightbox2 into a rather simple rails 5 app and seem to be getting the following error:
ActionController::RoutingError (No route matches [GET] "/images/lightbox/bpo.jpg"):
Ive been following steps from: https://lokeshdhakar.com/projects/lightbox2/ & https://github.com/gavinkflam/lightbox2-rails
All images for the Lightbox are located within "images/lightbox" folder & images are properly displayed on the page however upon clicking on an image to enlarge and bring up the Lightbox modal the above routing error is displayed in the logs & no image appears.
gallery_controller.rb
def index
#images = Dir.chdir(Rails.root.join('app/assets/images')) do
Dir.glob('lightbox/*.jpg')
end
end
index.html.erb
<div class="jumbotron jumbotron-fluid">
<div class="container">
<div class="row">
<% #images.each do |image| %>
<div class="col-md-3">
<a href='<%= "images/#{image}" %>' class="img-fluid" data-lightbox="my-images">
<%= image_tag image, class: "img-fluid" %>
</a>
</div>
<% end %>
</div>
</div>
</div>
The following has been added to my application.html.erb file
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> just before the closing body tag.
Any help is greatly appreciated as I'm confused on how to proceed.
Jus try this code snippet.
<div class="jumbotron jumbotron-fluid">
<div class="container">
<div class="row">
<% #images.each do |image| %>
<div class="col-md-3">
<a href='<%= image_path(image) %>' class="img-fluid" data-lightbox="my-images">
<%= image_tag image, class: "img-fluid" %>
</a>
</div>
<% end %>
</div>
</div>
</div>
You need to use image_path helper method for href because assets are coming from through asset pipeline.
I've never used lightbox2 before
but if it's me, I would take 3 different solutions
change "a" into "div"
remove href from "a"
overwrite event handler of lightbox to preventDefault
hope any of those can solve your problem
Can anyone tell me whats wrong with this section of code? I recently got this to work, but found out soon after the functionality for the Fancybox gallery stopped working. The a link element is only a sliver compared to the over all element. Im not sure if thats it. I know the most recent edit I made was to fix the surrounding row from .row-fluid to .row since that broke my layout. Below is the code:
<body id="portfolio">
<div class="container-fluid" id="particles-js"></div>
<%= render 'layouts/altmenu_gallery' %>
<h1>Portfolio</h1>
<div id="gallery" class="container-fluid">
<% #photos.each_slice(4) do |group| %>
<div class="row ">
<% group.compact.each do |photo| %>
<div class= "col-md-3">
<a class="fancybox" data-fancybox="gallery" href="<%=image_path photo.file_url %>" data-caption="<%= photo.description %>">
<%= image_tag photo.file_url, class:' img-fluid img-thumbnail' if photo.file.present? %>
</a>
</div>
<% end %>
</div>
<% end %>
<br class="clear">
</div>
<%= link_to 'New Photo', new_photo_path %>
</body>
Sorry, but it is not possible to tell without seeing the actual html code or, preferably, live demo. Maybe this issue arises because you have not escaped photo.description and that breaks html code, but, as I said, I can not be sure.
Having looked around for hours, reading blogs and many other SO questions with no success, I finally got to ask for help.
I believe I still lack some understanding about the Rails layout/render/yield mechanisms.
Therefore this maybe a stupid question. I beg your pardon.
Is it possible to prevent partials from being rendered on every page request? I mean, every time I click a link on my app the layouts and partials are reloaded.
My goal is to have a somehow static side bar, populate it once by rendering the partial "the first time application.html.erb is loaded", and then update it using ajax only.
Here is my app layout:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= content_for?(:title) ? yield(:title) : "GEN" %></title>
<meta name="description" content="<%= content_for?(:description) ? yield(:description) : "GEN" %>">
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body class="darkbody">
<header class="navbar navbar-fixed-top navbar-inverse">
<nav class="navbar-inner">
<div class="container-fluid">
<%= render 'layouts/navigation' %>
</div>
</nav>
</header>
<main role="main">
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<%= render partial: 'charts/dashboard', layout: false %>
</div>
<div class="span9">
<div class="well well-small">
<%= render 'layouts/messages' %>
<%= yield %>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
The "dashboard" partial should load once and never be rendered again.
In other words, navigating the app would change/refresh content in the yield section but not in the main layout "partials".
The motivation? The dashboard uses a helper method to show a value that is computed and never updated throughout the user session. If I get many reloads this helper runs on every user click and stresses the app server even if returning the same result, what happens indeed.
Is this too crazy or stupid?
Best regards,
AD
Actually, it will render HTML from this template on each request, but if data which is displayed in template doesn't need to be actual all the time, you can try action or fragment caching, like this:
<div class="span3">
<% cache 'dashboard' do %>
<%= render partial: 'charts/dashboard', layout: false %>
<% end %>
</div>
You can read more details in rails guides (http://guides.rubyonrails.org/caching_with_rails.html#fragment-caching)
I created a controller for "products" to be added into my app that is utilizing the Refinery CMS.
Hhere is the code for the page in show.html.erb
<div>
<h3>Feedback Sought</h3>
<p>
<%=raw #product.description %>
</p>
</div>
But this is what is actually produced in the live page.
For the meantime I can implement a digsuting hack of removing the margin by targeting the element, like
.productFeedbackDescription p { margin: 0; }
and then doing inline css along the lines of
<p style="margin-bottom: 12px;">
<%=raw #product.description %>
</p>
By default Refinery adds <p> tags in the template.
And by default, using the WYSIWYG editor also adds <p> tags. So I manually removed the <p> tags from the template.
For reference, this was the default code generated by refinery when I create the controller
<section>
<h1>Product Summary</h1>
<p>
<%=raw #product.product %>
</p>
</section>
Now my code is
<div>
<h3>Product Summary</h3>
<%=raw #product.product %>
</div>
Here is a screenshot of the code now generated as live in page.
playing around with rails and got a little problem with the layout.
I have a simple home mvc.
Content of the home view is just
<h3>Home</h3>
<p>content</p>
I have my application view for overall design with some partials and so on.
<section>
<header>
<div class="pull-right">
<a class="btn btn-small">Edit</a>
<a class="btn btn-small">Blurm</a>
</div>
<h3>Head goes here</h3>
</header>
<%= yield %>
</section>
Now I come to my main Part for displaying the different pages with yield.
How should i split up the template? Should I put the complete application part to the home view to display the Heading in the right place? Or is there a possibilty to get the Heading different from the yield?
Any Suggestions?
P.S.: If someone have a nice tutorial or website for explaining How to structure and plan the views. A comment below would be nice.
best regards
dennym
I think that you are asking about using named yields.
From your structure, we add a yield named header
<section>
<header>
<div class="pull-right">
<a class="btn btn-small">Edit</a>
<a class="btn btn-small">Blurm</a>
</div>
<h3><%= yield :header %></h3>
</header>
<%= yield %>
</section>
And then we set the content for that named yield:
<% content_for :header do %>
My header
<% end %>
<p> Rest of page ...</p>
If you are just trying to change you header periodically I would suggest either you have different layouts that have different headers which you could specify in your controller by
layout :layout_name, or dynamically change header content using js.