Update <li> element class with Javascript for rails loop - javascript

I'm designing an application to store sport games. Now in my notifications I have a list of games to confirm, in my list I have the read and unread class options and also an action to confirm the game. Now when someone confirms a game I don't want a page refresh, however the class should change in read and the button should disappear.
<ul class="notification-body">
<% #games.each do |game|
#CONTROLE OP VERWIJDERDE USERS
home_user_name = if game.home_user.present?
game.home_user.username
else
t :deleted_user
end
away_user_name = if game.away_user.present?
game.away_user.username
else
t :deleted_user
end
%>
<!-- LOST GAMES -->
<li class="unread">
<span>
<p class="msg">
<% if game.home_user.avatar_url.present? %>
<%= image_tag(game.home_user.avatar_url, class: 'air air-top-left margin-top-5', width: '50', height: '50') %>
<% elsif game.home_user.uid.present? %>
<%= image_tag(game.home_user.largeimage, class: 'air air-top-left margin-top-5', width: '50', height: '50') %>
<% else %>
<%= image_tag(asset_path('picempty.jpg'), class: 'air air-top-left margin-top-5', width: '50', height: '50') %>
<% end %>
<span class="from"><% if game.loser_user == game.home_user %>Game Won<% else %>Game Lost<% end %> </span>
<time><%= time_ago_in_words(game.created_at) %> ago</time>
<span class="subject"><%= home_user_name %> <% if game.loser_user == game.home_user %> lost <% else %>won <% end %> the game with <%= game.home_score %> - <%= game.away_score %></span>
<span class="msg-body">
<%= link_to game_confirm_game_path(game, game.id), method: :patch, class: "msg", remote: true do %>
<button class="btn btn-xs btn-success margin-top-5"> <i class="fa fa-check" aria-hidden="true"></i> Confrim</button>
<% end %>
<%= link_to game_conflict_game_path(game, game.id), method: :patch, class: "msg", remote: true do %>
<button class="btn btn-xs btn-warning margin-top-5"> <i class="fa fa-flag" aria-hidden="true"></i> Flag</button>
<% end %>
</span>
</p>
</span>
</li>
<% end %>
</ul>
<% content_for :scripts do %>
<script>
$('li a').click(function () {
// remove existing active class inside li elements
$('li.unread').removeClass('unread');
// add class to current clicked element
$(this).addClass('read');
});
</script>
<% end %>
Could someone help me with this Javascript? I kind of a noob in Javascript so sorry if this is a stupid question.
A little recap:
When
<%= link_to game_confirm_game_path(game, game.id), method: :patch, class: "msg", remote: true do %>
<button class="btn btn-xs btn-success margin-top-5"> <i class="fa fa-check" aria-hidden="true"></i> Confrim</button>
<% end %>
This button is clicked, it should disappear and also
<li class="unread">
should change to
<li class="read">

You can hide the button, using jQuery hide()
$('li a').on('click', function(e){
e.preventDefault();
$(this).parent('li').removeClass('unread').addClass('read')
$(this).hide();
})
li{
list-style: none;
margin: 10px 0;
padding: 10px 0;
}
.button{
padding: 5px 10px;
border: 1px solid #ccc;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Buttons</title>
</head>
<body>
<ul>
<li class="unread"><a class="button" href="#">Button</a></li>
<li class="unread">Button</li>
<li class="unread">Button</li>
</ul>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>

$('body').on('click', '.unread', function() {
$(this).addClass('read');
$(this).removeClass('unread');
});
Thanks

Related

On a Rails 6 view, how can I add an event listener on a button which hides and unhides a div?

I have a view corresponding to a Cocktail table show page which has a div displaying cocktail ingredients. In the view, I have a button that on click should open a form to add ingredients in the div containing the ingredient list. I have already successfully applied AJAX to the ingredient list but I am having trouble hiding and unhiding the div with the button and I am getting the following error on the terminal:
Uncaught ReferenceError: addIngredients is not defined
at HTMLButtonElement.onclick (17:26)
My code so far looks like this:
function addIngredients() {
let ingredient = document.getElementById("ingredients");
if (ingredient.style.display === "none") {
ingredient.style.display = "block";
} else {
ingredient.style.display = "none";
}
}
<body>
<div class="container-fluid">
<div class="row">
<div class="col-6 section" id="cocktail">
<h1><%= #cocktail.name%></h1>
<%= cl_image_tag #cocktail.photo.key, height: 300, width: 400, crop: :fill %>
<% if #cocktail.ingredients.blank? %>
Please add the ingredients <%= #cocktail.name %>
<% else %>
<% #cocktail.ingredients.each do |ingredient| %>
<p><%= ingredient.name %>:<%=ingredient.quantity %> <%=ingredient.unit%></p>
<% end %>
<% end %>
<button class="btn btn-light btn-lg"><%= link_to "Cocktail List", cocktails_path %></button>
<button class="btn btn-dark btn-lg" onclick="addIngredients()">Add Ingredients</button>
</div>
<div class="col-6 section" id="ingredients">
<h2>Ingredients</h2>
<%= simple_form_for([ #cocktail, #ingredient ], remote: true) do |f| %>
<%= f.input :name %>
<%= f.input :quantity %>
<%= f.input :unit %>
<%= f.button :submit %>
<% end %>
</div>
</div>
</div>
<%= javascript_pack_tag 'cocktails-show' %>
</body>
The code I input seems to be working only on stack overflow, so I am guessing the problem might be with webpacker. I would appreciate any insight you can provide me. If you have any questions please let me know. Thank you!
To be able to run functions from attributes like 'onclick', the functions must be global.
So you have to assign it to window (which is the global object in the browser):
function addIngredients() {
let ingredient = document.getElementById("ingredients");
if (ingredient.style.display === "none") {
ingredient.style.display = "block";
} else {
ingredient.style.display = "none";
}
}
window.addIngredients = addIngredients;

rails change the background of my like button when clicks on it :

I'm in the last step of my rails application (instagram-clone ) , and the issue is when i click on heart logo the count of number of likes upgraded from 0 to 1 but , i can't find the solution to change the background color of my logo to "red" when i click on it, this is my logo image
this is my vote.js.erb:
<% if current_user.liked? #post %>
$(".like-button").addClass("liked");
<% else %>
$(".like-button").removeClass("like-button");
<% end %>
$(".likes-count").html(" <%= #post.get_upvotes.size%> ")
#i want to modify this lines to change the background color of my heart logo to red when the count of likes was upgraded from 0 to 1 and thanks a lot
this i s my like button code lines :
<%= link_to like_post_path(post), class:"like-button", method: :put, remote: :true do %>
<div>
<i class="fas fa-heart fa-2x"></i>
</div>
<% end %>
<span class="likes-count"><%= post.get_upvotes.size %></span>
Ok here is your option.
There could be many stories/photos you might be looking and scrolling through the list.
Here is the fix that suit this kind of scenarios.
Some changes in vote.js.erb:
<% if current_user.liked? #post %>
$(".like-button-<%= #post.id %> .fas").addClass("liked");
<% else %>
$(".like-button-<%= #post.id %> .fas").removeClass("liked");
<% end %>
$(".likes-count").html(" <%= #post.get_upvotes.size%> ")
As you are using icon, Somewhere in the style add css similar to below.
.liked {
color: red;
}
And some changes in your html button
<%= link_to like_post_path(post), class: "like-button-#{post.id}", method: :put, remote: :true do %>
<div>
<i class="fas fa-heart fa-2x <%= 'liked' if current_user.liked?(post) %>"></i>
</div>
<% end %>

Using Javascript with Rails to display alert dialogs using Bootbox

I'm new to Rails and have been trying to display a success message when signing successfully to a website. I've been trying to use bootbox.js to display messages that are stored within a ruby hash once sign in is successful - unfortunately I am even newer to Javascript and when I create a successful sign in I can't get any of the bootbox content to display. The code below shows where I want to display the message.
<div class="sidebar pull-left">
<!-- sidebar -->
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="list-group">
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<%= link_to '', root_path, class: "fa fa-home fa-fw fa-stack-1x" %>
</span>
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<%= link_to '', help_path, class: "fa fa-question fa-fw fa-stack-1x" %>
</span>
</div>
</div>
</div>
<div class="main-content">
<%= content_tag :div, class: "flash_messages", data: {flash: flash} do %>
<% end %>
<% content_for :alert do %>
<script type="text/javascript">
<%= render 'users/show_flash_messages.js' %>
</script>
<% end %>
<% flash.each do |key, value| %>
<%= yield :alert %>
<% end %>
<%= yield %>
</div>
I use
<%= content_tag :div, class: "flash_messages", data: {flash: flash} do %>
<% end %>
to pass the data inside the hash to a javascript array on the client.
The ruby hash is initialised in the controller here:
def create
#user = User.new(user_params)
if #user.save
# sign_in #user
flash[:success] = "Welcome!"
redirect_to #user
else
render 'new'
end
end
I then created a method in users.js.coffee which I hoped would display the alert using the bootbox alert dialog by taking the required information from the js array:
Messages = flashMessage: (flash) ->
flash_message = flash[1]
bootbox.alert flash_message
return
I wrote this in javascript and then used a converter to convert it to coffeescript (should this work?). I then have a rails javascript file named _show_flash_messages.js.erb where I call into the flashMessage function.
$(function() {
messages = $('.flash_messages').data('flash');
Messages.flashMessage(messages);
});
I've been able to display the information in a bootstrap alert however my preference is to use these bootbox dialogs to display the information. Like I said I'm new to Rails and this is my first attempt at properly integrating javascript so it is likely that I am missing something obvious.
For reference this is the HTML for the page that the dialog will hopefully be displayed on top of:
<% provide(:title, #user.name) %>
<div class="center hero-unit">
<div class="user-profile">
<span class="user-header">
<%= gravatar_for #user %>
<h2>
<%= #user.name %>
</h2>
</span>
<span id="page-content">
<p>
This is where a short biography will go.
</p>
</span>
</div>
</div>

Show original photo on click Rails

Hi I am looping through uploaded photos and showing thumbnails. I'm trying to display the original photo when someone clicks on the thumbnail. The problem is that it only works on the first thumbnail in the loop. Do I need to give each thumbnail a individual id or how can I get it to work on every thumbnail? Any tips? :)
My show:
<% #project.assets.each do |asset| %>
<% if asset.photo.file? %>
<li class="thumbnail col-md-2">
<a id="thumb" href="#">
<%= image_tag asset.photo.url(:thumb) %>
</a>
</li>
<% end %>
<div id="popup">
<%= image_tag asset.photo.url(:original) %>
</div>
<% end %>
My javascript:
<script type="text/javascript">
$(document).ready(
function() {
$("#thumb").click(function() {
$("#popup").toggle();
});
});
</script>
Thanks :)
Try this :
<% #project.assets.each do |asset| %>
<% if asset.photo.file? %>
<li class="thumbnail col-md-2">
<%= link_to asset.photo.url(:original), class: :popup_link, target: :_blank do %>
<%= image_tag asset.photo.url(:thumb) %>
<% end %>
</li>
<% end %>
<% end %>
<div id="popup"></div>
<script type="text/javascript">
$(document).ready(function() {
$(".popup_link").click(function(e) {
e.preventDefault();
$("#popup").html( $('<img>').attr('src', this.href) );
});
});
</script>
what we're doing here is that on click, we fill the popup div with an image tag whose src attribute is the clicked link's href attribute value.
The good thing about this approach is that it degrades gracefully when javascript is desactivated (clicking on the link will open the full image in a new tab). As you don't load all full images (just to hide them), your page load time will likely decrease, too.
you have to use class "thumb" except id. because id is uniq so only first working.
the same with "popup" id because always will be show first image. so you can make like:
<% #project.assets.each do |asset| %>
<% if asset.photo.file? %>
<li class="thumbnail col-md-2">
<a id="asset-#{asset.id}" class="thumb" href="#">
<%= image_tag asset.photo.url(:thumb) %>
</a>
</li>
<% end %>
<div id="popup-asset-#{asset.id}">
<%= image_tag asset.photo.url(:original) %>
</div>
<% end %>
<script type="text/javascript">
$(document).ready(
function() {
$(".thumb").click(function() {
$("#popup-" + this.attr("id")).toggle();
});
});
</script>

Javascript and Ruby Sidescrolling

So im working on a RoR app and would appreciate a bit of help with something. In this app, I've got a series of discussions, posted by users, with comments below, also posted by users. In terms of design, i thought it would be cool if each discussion would take up the entire screen with a button to the right of it. pressing this button would cause the view to move and reveal another discussion. Any suggestions about how I would go about doing this? heres the discussion partial I have currently. thanks!
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,300' rel='stylesheet' type='text/css'>
<% content_for :script do %>
<%= javascript_include_tag 'hover_content' %>
<% end %>
<% #micropost = Micropost.new %>
<% #micropost.discussion_id = discussion.id %>
<li>
<div class = "intro-bar"><span class = "intro"><%=discussion.intro %></span></div>
<div class = "content-bar">
<span class = "content"><%= discussion.content %></span>
</div>
<input type='button' id='hideshow' value='hide/show'>
</li>
<span class = "timestamp">
Posted <%= time_ago_in_words(discussion.created_at) %> ago.
</span>
<% if signed_in? %>
<div class = "row">
<aside class = "span4">
<section>
<%= form_for(#micropost) do |f| %>
<%= render 'shared/error_messages', object: f.object %>
<div class="field">
<%= f.text_area :content, placeholder: "Post a comment" %>
</div>
<%= f.hidden_field :discussion_id%>
<%= f.submit "Break Up", class: "btn btn-large btn-breakup",:name => "break_up" %>
<%= f.submit "Stay Together", class: "btn btn-large btn-staytogether", :name => "stay_together" %>
<% end %>
</section>
</aside>
</div>
<% end %>
<div class = "comments">
<% discussion.microposts.each do |micropost| %>
<div class = 'comment-box'>
<li>
<div class = "comment-pic"></div>
<div class = "post-comment"><%= micropost.content%></div>
</li>
</div>
<% end %>
</div>
Your best bet would be a carousel.
For jQuery: http://sorgalla.com/projects/jcarousel/
(The "Special Examples" section has a text scroller which looks like what you want, but vertical)
For Prototype: http://code.google.com/p/prototype-carousel/

Categories