I have a page that makes a foreach and show some photos like this
<% imgs.forEach(function(img) { %>
<img src="uploads/<%=user.username%>/screenshots/<%= img %>">
<% }); %>
And I want make a if statement because, in case that not photos to show gives a message like this:
"no photos uploaded"
Something like this:
<% if(imgs.length > 0){ %>
<% imgs.forEach(function(img) { %>
<img src="uploads/<%=user.username%>/screenshots/<%= img %>">
<% }); %>
<% } else{ %>
<p>no photos uploaded</p>
<% } %>
Reference
The shorthand version is correct, but it does have a syntax error
<%= role === 'admin' ? 'Super Admin' : 'Admin' %>
Or
<% if(role === 'admin'){ %>
<p>Super Admin</p>
<% } else{ %>
<p>Admin</p>
<% } %>
Yes , Here is short hand version :
<%= role == 'A' ? 'Super Admin' : 'Admin' %>
Do you mean something like this...?
<% if (kindOfDay === "Sarturday" || kindOfDay === "Sunday") { %>
<h1 style="color: green;"><%= kindOfDay %> Todo List</h1>
<% } else { %>
<h1 style="color: blue;"><%= kindOfDay %> Todo List</h1>
<% } %>
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 my each method works, but I am trying to add some code to make the dice change to its color that it is given. I am using rails and jquery/javascript. I just want to print the "dice type" and have it printed in the color it is given. Any thoughts?
Heres my original code:
<% #last_move.rolls.last.results.each do |dice| %>
<li>
<%= dice.type %> - <%= dice.color %>
</li>
<% end %>
And heres is my sorry failed attempt to make it just display the type with the color given:
<% #last_move.rolls.last.results.each do |dice| %>
<li>
<script>
$(this).css({ color: "<%= dice.color %>" });
</script>
<%= dice.type %>
</li>
<% end %>
I wouldn't use JavaScript for this, instead:
<% #last_move.rolls.last.results.each do |dice| %>
<li class="dice-<%= dice.color %>">
<%= dice.type %> - <%= dice.color %>
</li>
<% end %>
Then in your css:
.dice-red {
color: //red, etc.
}
I have a ruby loop that creates a list of comments..
I wonder if I can attach jQuery function to Rails link_to helper in this case?
<% #video.phrases.each do |phrase| %>
<div class = "span4" id ="comment" ><%= phrase.content %></div><a id ="ff" ><%= image_tag("ff.png", :size=> "32x32" )%></a>
<% end %>
I am hoping for something like
<% #video.phrases.each do |phrase| %>
<div class = "span4" id ="comment" ><%= phrase.content %></div><%= link_to (image_tag("ff.png", :size=> "32x32" ), html => {<script>$("#video_div").html('CONTENTS OF HTML');</script>} :remote => true %>
<% end %>
I know it won't work, but I wonder is there an easy way to achieve this kind of functionality?
Thanks!
You can do this two ways.
The first is the add an html attribute on the link_to:
<% #video.phrases.each do |phrase| %>
<div class = "span4" id ="comment" >
<%= phrase.content %>
</div>
<%= link_to (image_tag("ff.png", :size=> "32x32" ), html => {:onclick => "$('#video_div').html('CONTENTS OF HTML');"} :remote => true %>
<% end %>
The second is to separate the Javascript from Ruby:
<% #video.phrases.each do |phrase| %>
<div class = "span4" id ="comment" >
<%= phrase.content %>
</div>
<%= link_to (image_tag("ff.png", :size=> "32x32" ) :remote => true %>
<% end %>
<script type="text/javascript">
$('a').click(function(){
$("#video_div").html('CONTENTS OF HTML');
);
</script>
If you want the contents of the link tag, substitute 'CONTENTS OF HTML' for $(this).html()
Also I actually found out about Rails link_to_function helper and was able to achieve the desired behavior with:
<% #video.phrases.each do |phrase| %>
<div class = "span4" id ="comment" ><%= phrase.content %></div><a id ="ff">
<%= link_to_function image_tag("ff.png", :size=> "32x32" ), "use_comment('#{phrase.comment}')"%>
</a>
You might want to use event delegation, since it seems like you'll be creating a large number of comments.
So, borrowing from grant something like:
<% #video.phrases.each do |phrase| %>
<div class = "span4" id ="comment" >
<%= phrase.content %>
</div>
<%= link_to (image_tag("ff.png", :size=> "32x32" ) :remote => true %>
<% end %>
<script type="text/javascript">
$("#comment-wrapper-name-here").on("click", "a", function() {
$("#video_div").html('CONTENTS OF HTML');
);
</script>
I'm a beginner and my brother has showed me some prototype. All the weeks successfully toggle the last week in the array but no other. Please let me know if I need to be more specific! Thanks!
<%= #athletic_program.program_name %>
<br>
<br>
<% array of_ids = Array.new %>
<% #program_weeks.each do |program_week| %>
<% array_of_ids.push(program_week.id) %>
<div id="week_number_<%= program_week.id %>" class="week_number">Week <%=program_week.week_number %></div>
<div id="program_week_form_<%= program_week.id %>" class="program_week_form">
<% form_for(program_week) do |f| %>
<%= f.error_messages %>
Number of Workouts <%= f.select :number_of_workouts, (1..7), {} %>
<%= f.submit 'Next' %>
<% end %>
</div>
<% end %>
<% content_for :javascript do %>
<script type="text/javascript">
function showForms(array_of_ids){
for(var i=0;i<array_of_ids.length;i++){
id = array_of_ids[i];
week_id = "week_number_" + array_of_ids[i];
$(week_id).onclick = function(event){
program_form = "program_week_form_" + id;
form_div = $(program_form);
if (form_div.style.display == 'none'){
form_div.style.display = 'block';
} else {
form_div.style.display = 'none';
}
}
}
}
showForms(<%= array_of_ids.to_json %>);
</script>
<% end %>
The following now works!
<%= #athletic_program.program_name %>
<br>
<br>
<% #program_weeks.each do |program_week| %>
<div id="week_number_<%= program_week.id %>" class="week_number" onclick="$('program_week_form_<%= program_week.id %>').toggle()">Week <%=program_week.week_number %></div>
<div id="program_week_form_<%= program_week.id %>" class="program_week_form" style="display:none;">
<% form_for(program_week) do |f| %>
<%= f.error_messages %>
Number of Workouts <%= f.select :number_of_workouts, (1..7), {} %>
<%= f.submit 'Next' %>
<% end %>
</div>
<% end %>
I added style="display:none;" to the program_week_form_ to have it hidden by default.
Are you simply trying to toggle the form when the week div is clicked? In that case you are really going about this the wrong way.
I think you can remove all your javascript and your array_of_ids and just change the week div to this if you're using Prototype:
<div id="week_number_<%= program_week.id %>" class="week_number" onclick="$('program_week_form_<%= program_week.id %>').toggle()">Week <%=program_week.week_number %></div>