So for the view page I've tried <div id= <%= dom_id(Video.find(x.id)) %>> <%= x.get_upvotes.size %> </div>
For the upvote.js.erb page I've tried Rails.$('#<%=dom_id(Video.find(#video.id))%>').innerHTML = ("<%= j (render partial: 'book', locals: { book: #video }) %>")
On the JS page console.log('#<%=dom_id(Video.find(#video.id))%>')
gives me an output of #video_12
And on the view page <% puts dom_id(Video.find(x.id)) %> gives me an output of video_12
So I'm not sure where I'm going wrong. Any help is much appreciated.
Routes
resources :videos do#, only: [:index, :show] do
member do
put "upvote", to: "videos#upvote"
put "downvote", to: "videos#downvote"
end
end
_book.html.erb
<p> Title: <%= book.get_upvotes.size %> </p>
upvote.js.erb
Rails.$('.random-book')[1].innerHTML = ("<%= j (render partial: 'book', locals: { book: #video }) %>")
console.log('#<%=dom_id(Video.find(#video.id))%>')
console.log(Rails.$('.random-book')[0])
def upvote
def upvote
#video = Video.find(params[:id])
#ip = request.remote_ip
#was_it_upvoted = Ipaddresstracker.find_by(ipaddress: #ip, videoid: #video.id)
if #was_it_upvoted
#video.downvote_by User.first
#was_it_upvoted.delete
else
Ipaddresstracker.create(:ipaddress => #ip, :videoid => #video.id)
#video.vote_by voter: User.first, :duplicate => true
end
end
_index.html.erb
<div class="container">
<% #videos.each do |x| %>
<p> <div class="child">
<video controls width="310" height="230" src="<%= x.file %>"></video>
<p> <%= x.title %> </p>
<div>
<%= link_to upvote_video_path(x), method: :put, remote: :true, class: "btn btn-default btn-sm" do %>
<span class="glyphicon glyphicon-chevron-up"></span>
Upvote
<div class="random-book" id= <%= dom_id(Video.find(x.id)) %> > <%= x.get_upvotes.size %> </div>
<% end %>
<div>
<br><br>
<% if user_signed_in? %>
<p> Contributor: <%= x.contributor %> </p>
<p> Email: <%= x.email %> </p>
<p> Phone: <%= x.phone %> </p>
<p> <%= link_to 'Destroy', x, method: :delete, data: { confirm: 'Are you sure?' } %> </p>
<% end %>
</div>
</div>
</div> </p>
<% end %>
</div>
i think you need to add quotes
instead of
<div class="random-book" id= <%= dom_id(Video.find(x.id)) %> ></div>
do:
<div class="random-book" id="<%= dom_id(Video.find(x.id)) %>" ></div>
Related
How to create//change my jQuery function in create.js.erb file for creating nested comments like in the sreenshot. While creation comment using Js from create.js.erb helper method doesn't call? How to fix that?
Comments_helper.rb
module CommentsHelper
def comments_tree_for(comments)
comments.map do |comment, nested_comments|
render(comment) +
(nested_comments.size > 0 ? content_tag(:div, comments_tree_for(nested_comments), class: "replies") : nil)
end.join.html_safe
end
end
Index.html.erb
<div class="jumbotron">
<div class="container">
<h1>Join the discussion</h1>
<p>Click the button below to start a new thread:</p>
<p>
<%= link_to 'Add new topic', new_comment_path, class: 'btn btn-primary btn-lg' %>
</p>
</div>
<%= comments_tree_for #comments %>
</div>
_commnet.html.erb
<div id="comment-cont_<%= comment.id %>" class="well">
<h2><%= comment.title %></h2>
<p class="text-muted"><%= comment.root? ? "Started by" : "Replied by" %> <strong>Alex Petrov </strong> on
<%= l(comment.created_at, format: '%B, %d %Y %H:%M:%S') %></p>
<% from_reply_form ||= nil %>
<% unless from_reply_form %>
<% if comment.leaf? %>
<small class="text-muted">There are no replies yet - be the first one to reply!</small>
<% end %>
<p><div id="reply-comment_<%= comment.id%>"><%= link_to 'reply', new_comment_path(comment.id), remote: true %></p></div>
<% end %>
</div>
create.js.erb
$('#reply-comment_<%= #comment.parent_id %>').hide();
$("#comment-cont_<%= #comment.id %>").prepend('<%= j render #comment %>');
At present my application is able to append comments to microposts that already have comments. Below is _micropost.html.erb (simplified):
<li id="micropost-<%= micropost.id %>">
<span class="content">
<%= micropost.content %>
</span>
<span class="timestamp">
Posted <%= time_ago_in_words(micropost.created_at) %> ago.
~ <%= link_to "Comment", "#", class: "comment-link", remote: true %>
<% if micropost.comments.any? %>
~ <%= link_to "Show/hide comments", "#", class: "comments-link", remote: true %>
<% end %>
</span>
<% if logged_in? && (current_user == micropost.user || current_user.friend?(micropost.user)) %>
<div class="comment-section">
<%= form_for(current_user.comments.build, remote: true) do |f| %>
<%= f.hidden_field :micropost_id, value: micropost.id %>
<%= f.text_area :content, rows: "1", class: "comment_area" %>
<%= f.submit "Comment", class: "btn btn-primary btn-sm" %>
<% end %>
</div>
<% end %>
<div class="comments-section">
<% if micropost.comments.any? %>
<ol id="comments_micropost-<%= micropost.id %>">
<% micropost.comments.each do |comment| %>
<%= render comment %>
<% end %>
</ol>
<% end %>
</div>
</li>
create.js.erb is:
var comments = $('ol#comments_micropost-<%= #micropost.id %>');
comments.append('<%= escape_javascript(render partial: #comment) %>');
As it is conceived, create.js.erb implies that the comment created is added to other comments, that is that the comment created is not the first one. In this case, var comments is not null and the last line of code append the comment to the list of the other comments.
Also, in case micropost.comments is not nil, the user can use the "Show/hide comments" link to toggle the order list with id="comments_micropost-<%= micropost.id %>"
The problem with this configuration is that in case a user add to any micropost the first comment (that is the user writes his comment when micropost.comments == 0) there is no chance to see the result without refreshing the page.
So I am asking: how can I edit create.js.erb so that the user can see straight away the result of posting the first comment and that the "Show/hide comments" link be added to the page?
I tried the following code but it does not work:
if (comments !== null) {
comments.append('<%= escape_javascript(render partial: #comment) %>');
} else {
$('#micropost-<%= #micropost.id %>').find('.comments-section').append("<ol id='comments_micropost-<%= #micropost.id %>'><%= escape_javascript(render partial: #comment) %></ol>");
$('#micropost-<%= #micropost.id %>').find('.timestamp').append(" ~ <%= link_to 'Show/hide comments', '#', class: 'comments-link', remote: true %>");
};
<li id="micropost-<%= micropost.id %>">
<span class="content">
<%= micropost.content %>
</span>
<span class="timestamp">
Posted <%= time_ago_in_words(micropost.created_at) %> ago.
~ <%= link_to "Comment", "#", class: "comment-link", remote: true %>
<% if micropost.comments.any? %>
~ <%= link_to "Show/hide comments", "#", class: "comments-link", remote: true %>
<% end %>
</span>
<% if logged_in? && (current_user == micropost.user || current_user.friend?(micropost.user)) %>
<div class="comment-section">
<%= form_for(current_user.comments.build, remote: true) do |f| %>
<%= f.hidden_field :micropost_id, value: micropost.id %>
<%= f.text_area :content, rows: "1", class: "comment_area" %>
<%= f.submit "Comment", class: "btn btn-primary btn-sm" %>
<% end %>
</div>
<% end %>
<div class="comments-section">
<%= render partial: comments, micropost: micropost %>
</div>
</li>
And in _comments.html.erb
<% if micropost.comments.any? %>
<ol id="comments_micropost-<%= micropost.id %>">
<% micropost.comments.each do |comment| %>
<%= render comment %>
<% end %>
</ol>
<% end %>
And in create.js.erb
var comments = $('ol#comments_micropost-<%= #micropost.id %>');
if (comments == undefined) {
$('div#comments-section').html('<%= escape_javascript(render partial: comments, micropost: #micropost) %>');
}
else {
comments.append('<%= escape_javascript(render partial: #comment) %>');
};
I solved my issue creating as originally suggested by Minu a app/views/comments/_comments.html.erb file as follows:
<% if #micropost.comments.any? %>
<ol id="comments_micropost-<%= #micropost.id %>">
<% #micropost.comments.each do |comment| %>
<%= render comment %>
<% end %>
</ol>
<% end %>
Without changing partial _micropost.html.erb I edited create.js.erb as follows:
var comments = $('ol#comments_micropost-<%= #micropost.id %>');
if (comments.length == 0) {
$('#micropost-<%= #micropost.id %>').find('.comments-section').html("<%= escape_javascript(render partial: 'comments/comments') %>");
}
else {
comments.append('<%= escape_javascript(render partial: #comment) %>');
};
When micropost.comments.any? is false, var comments is neither null or undefined, but is considered as an empty array, as can be verified by using a web browser console. Hence the use of if (comments.length == 0). See post at Stackoverflow.
So I'm trying to get my f.submit to be triggered when I click f.check_box. I don't know if you can use jquery to work on ruby... But basically this is a view of a to-do list with all the items on the page. When I click the checkbox to mark it off, I want it to be automatically submitted.
I thought I could assign a div tag on the f.check_box and the f.submit to trigger them... This is the first bit of JQuery I've working with.
<h1><%= #list.title %></h1>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<div>
<h2><% #list.items.each do |item| %></h2>
<%= item.content %>
<%= form_for([#list, item]) do |f| %>
<div id="target">
<%= f.check_box :complete %>
</div>
<div id="handler">
<%= f.submit %>
<% end %>
</div>
<% end %>
</div>
<script>
jQuery(document).ready(function() {
jQuery("#target").click(function() {
jQuery("#handler").click();
});
});
</script>
<% if policy(#list).update? %>
<%= link_to "Edit List", edit_list_path, class: 'btn btn-success' %>
<% end %>
<div class="col-md-4">
<% if policy(Item.new).create? %>
<%= link_to "New Item", new_list_item_path(#list), class: 'btn btn-success' %>
<% end %>
<% if policy(#list).destroy? %>
<%= link_to "Delete List", #list, method: :delete, class: 'btn btn-danger', data: { confirm: 'Are you sure you want to destroy this lovely list?'} %>
<% end %>
</div>
</div>
<%= render "items/form" %>
<!--
new_list_item_path
/lists/5/items/new
-->
div does not fire onclick event you need to set onchange method of checkbox which will submit the form.
Here is a code for that.
You need to set different id for every submit-button and then you can submit that form using Jquery.
I set the onchange method of checkbox which submits that forms according to item id.
<h1><%= #list.title %></h1>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<div>
<%index=0%>
<h2><% #list.items.each do |item| %></h2>
<%= item.content %>
<%= form_for([#list, item]) do |f| %>
<%=f.check_box :complete,{:onchange=> "submit_form("+#list.items[index].id.to_s+");"}%>
<%= f.submit :id=>#list.items[index].id%>
<%index+=1%>
<% end %>
<% end %>
</div>
<% if policy(#list).update? %>
<%= link_to "Edit List", edit_list_path, class: 'btn btn-success' %>
<% end %>
<div class="col-md-4">
<% if policy(Item.new).create? %>
<%= link_to "New Item", new_list_item_path(#list), class: 'btn btn-success' %>
<% end %>
<% if policy(#list).destroy? %>
<%= link_to "Delete List", #list, method: :delete, class: 'btn btn-danger', data: { confirm: 'Are you sure you want to destroy this lovely list?'} %>
<% end %>
</div>
</div>
<%= render "items/form" %>
<script>
function submit_form(id) {
$('#'+id).click();
}
</script>
Um, try something like:
$("input[type=checked]").on("click", function() {
if( $(this).is(':checked') ) { $('form').submit() }
}
And you might want to
<%= f.check_box :complete, html: { class: "check_complete"} %>
and
<%= f.submit, ".." id: "handler"%>
And then replace replace the input[type=checked] with .check_complete and maybe use the ("#handler").click(); instead of .submit()
I'm following Ryan Bates' Railscast #136 and trying to use AJAX to replace a div ('#inviteform1') with a partial ('thankyou') after a form submission. For some reason, when the form is submitted, it's not working -- instead a blank screen appears, and the URL redirects to localhost:3000/inviterequests. What am I missing?
inviterequests_controller
def create
#inviterequest = Inviterequest.new(params[:inviterequest])
respond_to do |format|
format.js
end
end
inviterequests/create.js.erb
$("#inviteform1").hide().after('<%= j render("thankyou") %>')
inviterequests/_form.html.erb -- includes the div to be replaced
<%= simple_form_for(#inviterequest, html: { class: 'form-horizontal'}) do |f| %>
<% if #inviterequest.errors.any? %>
<div id="error_explanation">
<h3><%= pluralize(#inviterequest.errors.count, "error") %> prohibited this inviterequest from being saved:</h3>
<ul>
<% #inviterequest.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<!-- INVITE BOX CONTENT -->
<div class="invitebox">
<div class="invitebox-inner">
<div id="inviteform1">
<br> <br> <br>
<h5> INDIAN WEDDING <BR> PLANNING JUST GOT EASIER </h5>
<%= image_tag("smalldivider.png") %>
<h5> REQUEST AN INVITE </h5>
<div class="field">
<%= f.input :email, :placeholder => 'enter your email, please', label: false %>
</div>
<div class="actions">
<%= f.submit "SUBMIT", class: "btn btn-primary btn-special", remote: true %>
</div>
</div>
</div>
</div>
<% end %>
inviterequests/_thankyou.html.erb -- the partial to replace the div
<div id="thankyou">
<br> <br> <br>
<h3>THANK YOU </h3>
<h4> We are working hard to launch soon <br> and will be in touch. </h4>
<%= image_tag("smalldivider.png") %>
<p class="smallcaps"> <br> SHARE WITH FRIENDS IN THE MEANTIME </p>
<div class="socialbuttons">
<div class="twitter">
<%= link_to (image_tag("twitter2.png")), "https://twitter.com/intent/tweet?screen_name=namastewedding&text=is%20making%20Indian%20wedding%20planning%20easy.%20I%20just%20requested%20my%20invitation.%20%23indianwedding%20www.namastewedding.com", :target => '_blank' %>
</div>
<div class="facebook">
<%= link_to (image_tag("facebook2.png")), "https://www.facebook.com/pages/Namaste-Wedding/359192570873560" %>
</div>
</div>
</div>
LOGS
Started POST "/inviterequests" for 127.0.0.1 at 2013-08-29 22:08:39 -0400
Processing by InviterequestsController#create as HTML
Parameters: {"utf8"=>"✓", "authenticity_token"=>"pqDBzdaYKuOfjuVo1ovHvrQJTTrsUptAcQekCn4X+Ho=", "inviterequest"=>{"email"=>"foobar#gmail.com"}, "commit"=>"SUBMIT"}
Completed 406 Not Acceptable in 1ms (ActiveRecord: 0.0ms)
It seems that you should use remote: true in simple_form_for instead of f.submit.
Such as
<%= simple_form_for(#inviterequest, remote:true, html: { class: 'form-horizontal'}) do |f| %>
I am trying to create a preview for my text area:
I have tried this:
My controller:
def preview
post = Post.new(params[:post])
render :text => post.body_html
end
def new
#post = Post.new
respond_to do |format|
format.html # new.html.erb
format.xml { render :xml => #post }
end
end
And my form:
<%= form_for(#post) do |f| %>
<% if #post.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(#post.errors.count, "error") %> prohibited this post from being saved:</h2>
<ul>
<% #post.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="field">
<%= f.label :titel %><br />
<%= f.text_field :titel %>
</div>
<div class="field">
<%= f.label :body_html %><br />
<%= f.text_area :body_html %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
How should I make a preview in my form of the body_html text area?
I want to have a preview when a type something in the body_html text_area it gets previewed instant.
Is the user entering HTML that you want rendered in the preview? Or just the text as is?
I guess either way, add a div for the preview:
<div id='preview'></div>
and then using jQuery:
var $html = $('#body_html');
$html.bind('change keyup',function(){
$('#preview').html($html.val());
});