(Sorry for my english )
I realized 3 tabs that dynamically reload my activities, a GET request is made in order to display a specific list of activities (activity of a group / of the user / news)
However I have a jquery code that no longer runs when I click on one of these tabs,
With rails I return a collection to display the activities, a solution remains to put the jquery in this collection, but when I do this the jquery is executed for each activities loaded and is not that i want.
Activities :
<div class="activity-card-container" id="activity-cards">
<%= render partial: 'activities/activity', collection: #activities %>
</div>
$('.newness').on('mouseenter', function (event) {
event.preventDefault();
$(this).toggleClass('d-none');
let num = parseInt($.trim($('.body__activity_counter').html()));
$('.body__activity_counter').html(--num);
if (num == 0) {
$('.body__activity_counter').addClass('hover');
}
newnessId = $(this).data('id');
$.ajax({url: '/user_activities.json', method: 'POST', data: {user_activity: {activity_id: newnessId}}})
});
Partial Activity :
<div class="activity--js margin-card activity-card card card-body">
.......
<%= activity.title %>
<%= activity.content %>
.......
</div>
One of the Tab controller :
def fetch_activities
user = current_user
activities = []
user.groups.each do |group|
activities << Activity.where(group: group)
end
#all_activities = activities.flatten.sort_by(&:updated_at).reverse
respond_to do |format|
format.js
end
end
and his route :
get "/fetch_activities" => 'activities#fetch_activities', as: 'fetch_activities'
Thanks
Related
Let's say I have a list of statuses that might look like this:
ul#list
- #list_items.each do |item|
li.loading Item #{item.id} - Status: #{item.status}
li Item #{item.id} - Status: #{item.status}
li Item #{item.id} - Status: #{item.status}
li.loading Item #{item.id} - Status: #{item.status}
Which renders me:
Item 1 - Status: Loading
Item 2 - Status: Finished
Item 3 - Status: Finished
Item 4 - Status: Loading
What I would like to do is periodically poll for changes on individual list items and refresh them if the status has changed. So far I was able to get away with refreshing the whole list:
ul#list
== render 'status_list', list_items: #list_items
Coffee:
if $('.loading').length > 0
setInterval (=>
#refreshListPartial()
), 5000
Where #refreshListPartial is an AJAX function that hits the Rails Controller which then goes on to refresh the whole list partial:
$("#list").html("<%= escape_javascript(render partial: 'status_list', locals: { list_items: #list_items } ) %>");
But how would one go in order to check the state of individual list items on the page and refresh only them? I know that React would probably be a much easier solution for this task, but is it even possible to accomplish with Rails without jumping over a dozen hoops? Another thing that came to mind is ActionCable (I'm using Rails 5), but opening a perma-connection for this functionality seems to be an overkill, I'd rather prefer polling.
Update
Just thinking out loud. So to refresh multiple partials instead of one I'll need to arrive to this in my .js.erb file:
<%- #items.each do |item| %>
$("#list-item-<%= item.id %>").html("<%= escape_javascript(render partial: 'item', locals: { list_item: item } ) %>");
<% end %>
The view should now look like:
ul#list
#list_items.each do |item|
== render 'list_item', list_item: #list_item
So what's left is the ajax function that should get the ids' of the list items that are needed to be refreshed and send them to the controller as an array.
I ended up doing an extension of what I myself proposed in the question update.
Frontend code that checks whether some partials need to be refreshed based on their data-tags:
class JobRequestPartialReload
constructor: ->
checkForRunningJobs = ->
if $('.poll_for_changes').length > 0
#arr = []
$('.poll_for_changes').each (index, element) =>
#arr.push(element.closest('[data-id]').dataset.id)
sendDataToRails()
sendDataToRails = ->
$.ajax
url: "/jobs/refresh_list"
method: "POST"
data: {jobRequestList: #arr}
setInterval (=>
checkForRunningJobs()
), 10000
$(document).on 'turbolinks:load', new JobRequestPartialReload
Controller:
def refresh_list
ajax_data = params[:jobRequestList].map(&:to_i)
#job_requests = JobRequest.includes(...).where(id: ajax_data)
respond_to do |format|
format.js
end
end
Finally, the JS.erb file:
<% #job_requests.each do |job| %>
<% case job.state %>
<% when 'initiated' %>
// don't care
<% when 'active' %>
visibleStatus = $('#job-id-<%= job.id %> .status-list').text()
if (visibleStatus == 'initiated') {
$('#job-id-<%= job.id %>').html("<%= escape_javascript(render partial: 'job_requests/shared/job_request', locals: { job: job } ) %>");
<% else %>
// failed, completed, etc.
$('#job-id-<%= job.id %>').html("<%= escape_javascript(render partial: 'job_requests/shared/job_request', locals: { job: job } ) %>");
<% end %>
<% end %>
Answer update
I later added js code that checked whether certain partials were in the actual user viewport, and checked only them, at the rate of 5-10 seconds. This greatly reduced the number of queries each client was sending.
I have a long block of comments on a view of model Page. Instead of showing all the comments on page load, I'm trying to create a "view more" button that shows the next ten comments. The button sends an ajax request to the controller, which then renders this block using jquery:
_view_more.html.erb
<% comments.each_with_index do |comment, index|%>
<% if (( index > #start_number) && (index < #end_number) ) %>
<%= comment.text %>
<% end %>
Let's say I always want to show the next 10 comments. I would just set #start_number = #start_number + 10 and #end_number = #end_number + 10
in the controller, but instance variables get reset, so #start_number would be nil. How can I set a variable that increases by 10 upon every ajax request?
"view more" button
<%= link_to "view more", view_more_page_path, remote: true %>
pages_controller.rb
def view_more
#page = Page.find(params[:id])
respond_to do |format|
format.html { redirect_to root_path }
format.js
end
end
view_more
$("#comments-body").append("<%= escape_javascript(render 'view_more') %>");
I will use haml and coffee-script
When rendering comments you put an html5 data attribute with the id of the comment:
#view where to render comments
%div#comments-wrapper{:"data-pageid" => #page.id}
=render #comments
=link_to "View more", "#", id: "view-more-link"
The comment partial
#comments/_comment.html.haml
%p.single-comment{:"data-commentid" => comment.id}
=comment.body
application.coffee
$ ->
$("#view-more-link").on 'click', ->
last_comment_id = $("#comments-wrapper .single-comment").last().data('commentid')
page_id = $("#comments-wrapper").data("pageid")
$.ajax
url: "/comments/view_more"
dataType: "script"
data:
last_comment_id: last_comment_id
page_id: page_id
comments_controller
def view_more
#page = Page.find(params[:pageid])
if params[:last_comment_id]
#comments = #page.comments.where("comments.id > ?", params[:last_comment_id]).limit(10)
end
respond_to do |format|
format.js
end
end
comments/view_more.js.erb
$("#comments-wrapper").append("<%= escape_javascript(render #comments) %>");
Note: I don't how your routes were set up so I put the page.id as a data-attribute as well
I would use already implemented pagination gems kaminari or will_paginate. I'll create this example using will_paginate.
First of all, it's important to say that your approach is incorrect, because it loads all comments every view_more request. If you want to show 10 comments, makes sense select only they from database, right? The pagination gem will do it for you!
Let's to the code:
"view more" button
<%= link_to "view more", view_more_page_path, remote: true, id: 'view-more-btn' %>
pages_controller.rb
def view_more
#comments = Page.find(params[:id]).comments.paginate(page: params[:page], per_page: 10)
respond_to do |format|
format.html { redirect_to root_path }
format.js
end
end
_view_more.html.erb
<% #comments.each do |comment| %>
<%= comment.text %>
<% end %>
view_more.js.erb
$("#comments-wrapper").append("<%= escape_javascript(render 'view_more') %>");
# We need to update the 'view more' link with the next page number
$('#view-more-btn').attr('href', '<%= view_more_page_path((params[:page] || 0) + 1) %>')
is it not good to update an hidden variable before making ajax call with the count..?
var currentVal = parseInt($("[type=hidden]").val());
$("[type=hidden]").val( currentVal + 1 );
add the hidden field right at the begining of the comments section with default value as "0"
<input type="hidden" name="hiddenId" id="hiddenId" value="0">
Hope it will help
If you want a quick and dirty approach, you could save start_number and end_number inside a cookie.
But keeping track of what needs to be rendered next on client side would be a right thing to do.
I want to have some tabs in an index page.
Each of the tabs should render a different category for the Food Model.
The tabs are working fine, but with static content.
I have 2 tables:
Foods, Categories
And I have a column :category_id in my Foods table.
My associations are: Food has_one category, and Categories has_many foods.
So, when clicking on one of the tabs, a category_id must be passed so that it knows what content to render.
I don't know how do I need to make my view (and maybe a scope?)...It's the first time I do this.
This is the code for one of the tabs:
<ul class="accordion-tabs">
<li class="tab-header-and-content">
Entrantes
<div class="tab-content row">
<% #foods.by_category(params[1]).each do |food| %>
<%= render "food_card" %>
<% end %>
</div>
</li>
I'm trying to pass params manually in each of the tabs, but I don't know if I need AJAX or something. Please help!
Update
My Foods Controller
def index
#addictfood = Addictfood.last
#food = Food.last
#foods = Food.all
#category = Category.find params[:id]
respond_to do |format|
format.html
format.json { render json: #category.foods.to_json }
end
end
My index view (Foods)
<ul class="accordion-tabs">
<div class="categories">
<li class="tab-header-and-content">
<% #categories.each do |tab| %>
<%= link_to tab.name, category_show_path(tab), class: "tab-link" %>
<% end %>
</li>
</div>
</ul>
</article>
<script>
$(".categories").on("click", "a", function() {
$.ajax({
url: $(this).attr("href"),
dataType: "json",
success: function(data) {
$(".category").html(data)
}
});
});
</script>
Error
Started GET "/foods" for 127.0.0.1 at 2014-07-02 20:41:53 +0200
Processing by FoodsController#index as HTML
Addictfood Load (0.3ms) SELECT "addictfoods".* FROM "addictfoods" ORDER BY "addictfoods"."id" DESC LIMIT 1
Food Load (0.3ms) SELECT "foods".* FROM "foods" ORDER BY "foods"."id" DESC LIMIT 1
Completed 404 Not Found in 4ms
ActiveRecord::RecordNotFound (Couldn't find Category without an ID):
app/controllers/foods_controller.rb:7:in `index'
If each food has one category only you should use the belongs_to category association.
In Category, you can leave it with has_many foods.
In the show view of the category controller you can pull the food like this:
<% #category.foods.each do |food| %>
<%= food.title %>
<% end %>
Params
You won't be able to pass params to your tabs if they are within a single request. Params are sent via HTTP in the URL, or behind the scenes, to give you variables in the backend of your app:
Params are there to give you the ability to manipulate the response after a request is made to the controller. In your case, with your files on the same page, you will need to use them in an ajax request to pull the relevant category content
--
Ajax
As mentioned by #mavis, you'll want to set up your models as such:
#app/models/food.rb
Class Food < ActiveRecord::Base
belongs_to :category
end
#app/models/category.rb
Class Category < ActiveRecord::Base
has_many :foods
end
This will give you the ability to list your tabs like this:
<div class="categories">
<% #categories.each do |tab| %>
<%= link_to tab.name, category_show_path(tab) %>
<% end %>
</div>
The problem you'll need to use ajax to overcome is to use it to populate your tabs, like this:
#app/assets/javascripts/application.js
$(".categories").on("click", "a", function() {
$.ajax({
url: $(this).attr("href"),
dataType: "json",
success: function(data) {
$(".category").html(data)
}
});
});
You'll then have to do this:
#app/controllers/categories_controller.rb
Class CategoriesController < ApplicationController
def show
#category = Category.find params[:id]
respond_to do |format|
format.html
format.json { render json: #category.foods.to_json }
end
end
end
OK, I have a page which shows the customer how many Widgets he has. Here's the view (haml):
#available
= "Available widgets: #{#customer.widgets.unused.count()}"
("unused" is a scope in the model showing the available widgets).
When Customer redeems Widgets with a form with ":remote => true", some javascript places a nice DIV on the page with animation and the model is updated by the controller.
Here's the controller:
def redeem
#customer = Customer.find(params[:customer_id])
number = params[:amount].to_i
unless #customer.widgets.unused.empty?
number.times do
#customer = Customer.find(params[:customer_id])
widget = #customer.widgets.unused.first # Grab first unused pass
widget.status = "Redeemed"
widget.save!
end
else
#pay = "true"
# customer.widgets.new
end
# redirect_to #customer
end
And here's the javascript (js.erb):
var number = <%= params[:amount] %>;
<% if #pay.eql? "true" %>
$("#widget-pay").modal('toggle');
<% else %>
while (number > 0) {
var item = $('<div class="widget-show">...</div>');
$('#allwidgets').isotope('insert', item);
number --;
}
<% end %>
My problem is I now want to update the "#available" DIV with the new Widget count. How do I do this?
At worst I could reload the page so the data is pulled from the model again, at best just update the DIV. Neither which I seem to be able to do from the javascript.
You can do something like this:
render :js => "$('#available').append(widget)"
widget.save!
I have a comment model that is paginated and I would like the comments to load more comments on the same page whenever the next button is clicked. I have somewhat of an idea of how to go about doing this but can anyone advise how to go about doing this. I have some code already.
For the comment section instead of render I think it may have to be looking for the micropost and its id to find the right comments to append but I am unsure about how to go about tying this all together.
Pagination JS
$(function() {
$("#CommentPagin a").live("click", function() {
$.getScript(this.href);
return false;
});
});
Show JS
$("#cc").append('<%= escape_javascript(render :partial => "users/comments" )%>');
Comment Section
<div id='comments'>
<% comments = micropost.comments.paginate(:per_page => 5, :page => params[:page]) %>
<div id="CommentPagin">
<span class="CommentArrowIcon"></span>
<%= will_paginate comments, :page_links => false , :class =>"pagination" %>
</div>
<%= render 'users/comments' %>
</div>
Comment Rendering Section
<div id="cc">
<% comments = micropost.comments.paginate(:per_page => 5, :page => params[:page]) %>
<%= render comments %>
</div>
User Controller
def show
#user = User.find(params[:id])
#school = School.find(params[:id])
#comment = Comment.find(params[:id])
#micropost = Micropost.new
#comment = Comment.new
#comment = #micropost.comments.build(params[:comment])
#microposts = #user.microposts.order('created_at DESC').paginate(:per_page => 10, :page => params[:page])
respond_to do |format|
format.html
format.js
end
end
I´m a bit rusty with rails so this is somewhat generic answer.
I would load the next n comments from a route / action that renders just your Comment Rendering Section as HTML
Just think of it as you where requesting assets from your own API and using them to update the page.
Pagination JS
/**
* jQuery 1.7+
* use .delegate() for older versions.
**/
$("#CommentPagin").on('click', 'a', function(e){
// Get data from server - make sure url has params for per_page and page.
$.get($(this).attr('href'), function(data){
// refresh client with data
$("#cc").append(data);
});
});