I'm using the acts_as_votable gem to add a Like button to my posts. I followed the instructions I found in the following StackOverflow question:
Like button Ajax in Ruby on Rails
The code works really well but I'd rather use an an image than the text link. Basically I'm trying to use an existing design template that uses the following code based on like or dislike:
Like
<span class="heart-icon" style="background-position: 0px -290px;" id="<%= #pride.id %>"></span>
Dislike
<span class="heart-icon" style="background-position: 0px -256px;" data-id="<%= #pride.id %>"></span>
I tried using a do on the link_to and it works but also applies a text overlay that I believe is coming from the JS file. I've searched though a lot of the questions on here and I can't seem to find one that fits my situation. I'm hoping someone in the community will be able to help me out.
Here is how I currently have it setup:
My view looks like this:
<% if current_user.liked? #content %>
<%= link_to "Dislike", dislike_content_path(#content), class: 'vote', method: :put, remote: true, data: { toggle_text: 'Like', toggle_href: like_content_path(#content), id: #content.id } %>
<% else %>
<%= link_to "Like", like_content_path(#content), class: 'vote', method: :put, remote: true, data: { toggle_text: 'Dislike', toggle_href: dislike_content_path(#content), id: #content.id } %>
<% end %>
My CoffeeScript looks like this:
$(document).on 'ajax:success', 'a.vote', (status,data,xhr)->
# update counter
$(".votes-count[data-id=#{data.id}]").text data.count
# toggle links
$("a.vote[data-id=#{data.id}]").each ->
$a = $(this)
href = $a.attr 'href'
text = $a.text()
$a.text($a.data('toggle-text')).attr 'href', $a.data('toggle-href')
$a.data('toggle-text', text).data 'toggle-href', href
return
return
This is how I want my view configured but it keeps writing the Like/Dislike text over the image and I can't figure out where to change it.
<% if current_user.liked? #content %>
<%= link_to "Dislike", dislike_content_path(#content), class: 'vote', method: :put, remote: true, data: { toggle_text: 'Like', toggle_href: like_content_path(#content), id: #content.id } do %>
<span class="heart-icon" style="background-position: 0px -290px;" id="<%= #content.id %>"></span>
<% end %>
<% else %>
<%= link_to "Like", like_content_path(#content), class: 'vote', method: :put, remote: true, data: { toggle_text: 'Dislike', toggle_href: dislike_content_path(#content), id: #content.id } do %>
<span class="heart-icon" style="background-position: 0px -256px;" data-id="<%= #content.id %>"></span>
<% end %>
<% end %>
I found this awesome repository on GitHub that helped me out. Special thanks to the author.
https://github.com/shihabullal/soquestion6482354
Related
I have a simple_form form setup and it will show inline errors fine. I have had problems with some users not seeing these errors and have had requests for a clear enumeration at the top of the very long form. I've used the code setup from the Rails Tutorial:
<% if object.errors.any? %>
<div id="error_explanation">
<div class="alert alert-error">
The form contains <%= pluralize(object.errors.count, "error") %>.
</div>
<ul>
<% object.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
Which is called as a partial (loaded from app/views/application) onto the form (object = f.object). It does not render, but I'll see the failure in the rails console in development. Any ideas why this won't show errors in this fashion? Is this some failure related to Turbo/Hotwire (there is a controller watching the text area to resize if content overflows)?
A much shorter form that also uses the same error partial (and exhibits the same behavior):
<%= simple_form_for [:admin, #annotation] do |f| %>
<%= render 'error_messages', object: f.object %>
<%= f.input :abbreviation,
input_html: { minlength: 1 } %>
<%= f.input :name,
input_html: { minlength: 1 } %>
<%= f.input :description,
as: :text,
input_html: { data: { controller: "textarea-autogrow"} },
input_html: { minlength: 1 } %>
<fieldset>
<legend>Used For</legend>
<%= f.input :oa,
as: :boolean,
label: "OA (Lodge, Chapter, Section) Issues" %>
<%= f.input :council,
as: :boolean,
label: "Council (CSP, JSP, etc) Issues" %>
<%= f.input :camp,
as: :boolean,
label: "Camp Issues" %>
</fieldset>
<%= f.button :submit,
data: { disable_with: "Please wait..." } %>
<% end %>
With some help from Michael Koper, we were able to sort this out. The controller methods were missing status: :unprocessable_entity on the format.html statements. So changing:
format.html { render action: "new"}
to
format.html { render action: "new", status: :unprocessable_entity }
Solved this issue.
I'm new to Ruby on Rails and have found myself stumped.
I am trying to create a link_to item in my view that will not be disabled after being clicked once. It's a page listing people's names and their attendance. The names are colored red if absent and green if present and I'd like the user to be able to toggle the attendance more than once for each person.
Here is the code for my view and controller (note I am using websockets here as well to update the coloring of the button after being clicked):
index.html.erb:
<div id="reader-attendance-<%= member.id %>">
<% if member.present == true %>
<%= link_to member.last_name.upcase, attendance_path(:id => member.id, :present => false), remote: true, class: "btn btn-outline-success btn-14" %>
<% else %>
<%= link_to member.last_name.upcase, attendance_path(:id => member.id, :present => true), remote: true, class: "btn btn-outline-danger btn-14" %>
<% end %>
</div>
controller.rb:
def attendance
member = Member.find(params[:id])
if(params[:present] == 'true')
member.present = true
else
member.present = false
end
member.save
vote_member = VoteMember.where(member_name: member.display_name)[0]
if vote_member.vote_type == 'Absent'
vote_member.vote_type = ''
vote_member.save
end
ActionCable.server.broadcast(
'attendance_channel',
{
member_id: member.id,
present: params[:present],
vote_member_id: vote_member.id,
total_abs: Member.where(present: false).count(),
member_name: member.last_name.upcase
}
)
end
Solutions I have tried:
I've read that you can add an option to config so that the disable option is turned off as follows:
Rails.application.configure do
config.action_view.automatically_disable_submit_tag = false
end
The it seems like this is not supported, however, for the link_to tag and is only supported for button_to
I added the content in #1 to config and then I've tried the button_to option as follows with no success. I have a feeling it's the way that I've passed the parameters in here:
<%=button_to member.last_name.upcase ,:action => :attendance, :id => member.id, :present => false, remote: true, class: "btn btn-outline-success btn-14" %>
I am working with the following versions:
Rails 6.1.4.1
Ruby 3.0.1
Thanks in advance! Please let me know if other info would be helpful.
Hello when I add the comment in my application in the form that I have with ajax, I have to reload the browser to upload the comment. In the browser I get this error that I supposedly have in this file:
(function() {
$(document).on("ajax:success", "form#comments-form", function(ev, data) {
console.log(data);
$(this).find("textarea").val("");
return $("#comments-box").append("<li> " + data.body + " - </li>");
});
$(document).on("ajax:error", "form#comments-form", function(ev, data) {
return console.log(data);
});
}).call(this);
I have this file in comments.coffe like this:
$(document).on "ajax:success", "form#comments-form", (ev,data)->
console.log data
$(this).find("textarea").val("")
$("#comments-box").append("<li> #{data.body} - </li>")
$(document).on "ajax:error", "form#comments-form", (ev,data)->
console.log data
If you can help me, I thank you.
I had the same problem and, solve it by doing the following
In the folder app/asset/javascripts/application.js look for the next line
//= require rails-ujs and change for // require rails-ujs
In this way that library is not called and will not generate conflict with jquery.
I hope it helps you
<%=
form_for([#article,#comment], remote: true, html: { id: "comments-form", :"data-
type" =>
"json" }) do |f| %>
<% if #comment.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(comment.errors.count, "error") %> prohibited this comment
from
being saved:</h2>
<ul>
<% comment.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="field">
<%= f.label :body %>
<%= f.text_area :body %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
I'm new to RoR. I am trying to use audio_tag to reproduce files. My code is reproducing the same song on each audio_tag shown. I would like it to loop through the existed audio files and reproduce them according to its link.
All help will be appreciated!
My code so far:
<% #songs.each do |song| %>
<ul>
<%= link_to song.name, song.url %>
<%= audio_tag(Song.pluck(:url), controls: true) %>
///
<%= link_to "Delete >", "songs/delete/?song=" + song.name, :confirm => 'Are you sure you want to delete ' + song.name + '?' %>
</ul>
<% end %>
Song.pluck(:url) will return an array of the url of every song in your database.
I think you may want:
<?= audio_tag(song.url, controls: true) %>
This will use the url for the current song object.
Have progressed to get wicked_pdf generating PDF's in Rails 3.2.3. However I want to be able to have links on my pages rendered to screen as HTML from the .html.erb file, but when I review the PDF generated from this template I do not want to see these links.
I had tried to follow what Ryan Bates did in is PDFKit Railscast 220, but its not working for me under Rails 3.2.3, on Ruby 1.9.3.
Here is my an abridged section of the view code:
<h2>Client Setup (Only when Patients module is not available)</h2>
<p>
The setup program installs your Clients module using default settings. After the installation, you can use this program to customize settings to meet your particular needs.
</p>
<p>
<%= pdf_image_tag("clients/blank/.png", alt: "Client Setup (Only when Patients Module is not available) - not-populated") %>
<table>
<thead>
<tr>
<th>Form Item</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default Value Added Tax (Percent)</td>
<td>
The package offers a default Value Added Tax, expressed as a percentage of the invoice, to be added to the invoice. Numbers from 0 to 999.99 are allowed.
</td>
</tr>
</tbody>
</table>
</p>
<hr />
<form class="form-inline">
Back to Top
<%= link_to "Genie Help Index", help_path, class: "btn btn-main-menu pdf_link" %>
<p id="pdf_link"><%= link_to "Client Help Index", static_page_path("clients/index"), class: "btn btn-help" %></p>
<%= link_to "Download PDF", static_page_path(:format => :pdf), class: "btn btn-pdf" %>
<%= link_to image_tag("file_type_pdf.png", height: "24px", width: "24px" , alt: "Download page as PDF"), static_page_path(:format => :pdf) %>
</form>
<p><%= link_to "Client Help Index", static_page_path("clients/index") %></p>
<p><%= link_to "Download as PDF", static_page_path(:format => "pdf"), class: "pdf_link" %></p>
<p id="pdf_link"><%= link_to "Download as PDF", static_page_path(:format => :pdf) %></p>
<% if request.try(:format).to_s == 'pdf' %>
<%= link_to "Download this PDF", static_page_path(:format => "pdf") %>
<% end %>
#<% if params[:media] = 'all' %>
# <%= link_to "Download me as a PDF", static_page_path(:format => "pdf") %>
#<% end %>
<div id="pdf-no"><%= link_to "Get me as a PDF file", static_page_path(:format => "pdf") %></div>
Controller is: (show page is the name of the page to render)
class StaticPages::GenieHelpController < ApplicationController
def static_page
respond_to do |format|
format.html do
render :template => show_page,
:layout => 'application'
end
format.pdf do
render :pdf => show_page,
:layout => 'generic',
:template => "#{show_page}.html.erb",
:handlers => :erb,
:disable_external_links => true,
:print_media_type => true
end
end
end
end
The layout file in views/layouts/generic.pdf.erb file is as below:
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= wicked_pdf_stylesheet_link_tag "static_pages/genie_v23_help", :refer_only => true %>
<!-- <%#= wicked_pdf_stylesheet_link_tag "static_pages/pdf" %> -->
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<div class="container">
<%= yield %>
<%= debug(params) if Rails.env.development? %>
</div>
</body>
</html>
The corresponding css file in old location public/stylesheets/static_pages/genie_help.css:
#media print {
body { background-color: LightGreen; }
#container {
width: auto;
margin: 0;
padding: 0;
border: 2px;
}
#pdf_link {
display: none;
}
}
.pdf_link {
display: none;
}
#pdf-no {
display:none;
}
When I render the html page the links at the bottom show up (as expected) when the format is html.
What am I doing wrong on with this. I assume if it can be done via middleware of PDFKit then it is supported under wkhtmltopdf as both PDFKit and wicked_pdf are based on this.
Thanks
Mark
It turned out to be that I solved this problem by mixing-and-matching the four methods in the wicked_helper.pdf file which is based on the lib helper file.
The wicked_pdf_image_tag was changed to pdf_image_tag used in the pull request waiting commit from - mkoentopf
Multi purpose wicked_pdf_helper "Hi there, I've added some code to the wicked_pdf_helper methods. Now they deliver the the full pa…"
def wicked_pdf_image_tag(img, options={})
if request.try(:format).to_s == 'application/pdf'
image_tag "file://#{Rails.root.join('public', 'images', img)}", options rescue nil
else
image_tag img.to_s, options rescue nil
end
end
What I don't understand is under Rails 3.2 are we still using public directory because sprockets and assests get pre-compiled and placed in public?
The solution I used earlier in the day was to add additional header/footer partials within the html layout, but not in the layout for pdf generation.
Here is the helper file I was using:
module WickedPdfHelper
def wicked_pdf_stylesheet_link_tag(*sources)
options = sources.extract_options!
if request.try(:format).to_s == 'application/pdf'
#css_dir = Rails.root.join('public','stylesheets')
css_dir = Rails.root.join('app','assets', 'stylesheets')
refer_only = options.delete(:refer_only)
sources.collect { |source|
source.sub!(/\.css$/o,'')
if refer_only
stylesheet_link_tag "file://#{Rails.root.join('public','stylesheets',source+'.css')}", options
else
"<style type='text/css'>#{File.read(css_dir.join(source+'.css'))}</style>"
end
}.join("\n").html_safe
else
sources.collect { |source|
stylesheet_link_tag(source, options)
}.join("\n").html_safe
end
end
def pdf_image_tag(img, options={})
if request.try(:format).to_s == 'application/pdf'
image_tag "file://#{Rails.root.join('app', 'assets', 'images', img)}", options rescue nil
else
image_tag img.to_s, options rescue nil
end
end
def wicked_pdf_javascript_src_tag(jsfile, options={})
if request.try(:format).to_s == 'application/pdf'
jsfile.sub!(/\.js$/o,'')
javascript_src_tag "file://#{Rails.root.join('public','javascripts',jsfile + '.js')}", options
else
javascript_src_tag jsfile, options
end
end
def wicked_pdf_javascript_include_tag(*sources)
options = sources.extract_options!
sources.collect{ |source| wicked_pdf_javascript_src_tag(source, options) }.join("\n").html_safe
end
end
It would be good to understand more about how the asset pipeline is used. And how the #media is determined. Is it related to MIME types? If so why do we not need to/or are they not defined in wick_pdf?
I have yet to utilise the page numbering and breaking, but now have an outstanding question that I'll put up separately.