i use facebook comments plugin https://developers.facebook.com/docs/plugins/comments/
for every page in my site
and i show the facebook comments by fetching from json request
https://graph.facebook.com/comments/?ids=abc.com/
so when i update comment in facebook plugin, i would like to get the comments in my site to get dynamically updated
my code in controller
#fb_res=HTTParty.get('https://graph.facebook.com/comments/?ids=abc.com/')
fb_json=JSON.parse(#fb_res)
#fb_comment = fb_json["abc.com/"]["comments"]["data"].map {|x| [x["from"]["id"],x["message"],x["from"]["name"]]}
my views :
<% #fb_comment.each do |fb| %>
<li>
<div class="pic_commnt">
<div class="pic">
<div class="pic_image">
<img src="http://graph.facebook.com/<%= fb[0].to_s %>/picture?type=square" alt="" />
</div>
<span class="pic_name"><%= fb[2].to_s %></span>
</div>
<div class="pic_comments">
<p>
"<%= fb[1].to_s %>"
</p>
</div>
</div>
</li>
<% end %>
i would like to get this section updated dynamically
Related
I'm trying to implement lightbox2 into a rather simple rails 5 app and seem to be getting the following error:
ActionController::RoutingError (No route matches [GET] "/images/lightbox/bpo.jpg"):
Ive been following steps from: https://lokeshdhakar.com/projects/lightbox2/ & https://github.com/gavinkflam/lightbox2-rails
All images for the Lightbox are located within "images/lightbox" folder & images are properly displayed on the page however upon clicking on an image to enlarge and bring up the Lightbox modal the above routing error is displayed in the logs & no image appears.
gallery_controller.rb
def index
#images = Dir.chdir(Rails.root.join('app/assets/images')) do
Dir.glob('lightbox/*.jpg')
end
end
index.html.erb
<div class="jumbotron jumbotron-fluid">
<div class="container">
<div class="row">
<% #images.each do |image| %>
<div class="col-md-3">
<a href='<%= "images/#{image}" %>' class="img-fluid" data-lightbox="my-images">
<%= image_tag image, class: "img-fluid" %>
</a>
</div>
<% end %>
</div>
</div>
</div>
The following has been added to my application.html.erb file
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> just before the closing body tag.
Any help is greatly appreciated as I'm confused on how to proceed.
Jus try this code snippet.
<div class="jumbotron jumbotron-fluid">
<div class="container">
<div class="row">
<% #images.each do |image| %>
<div class="col-md-3">
<a href='<%= image_path(image) %>' class="img-fluid" data-lightbox="my-images">
<%= image_tag image, class: "img-fluid" %>
</a>
</div>
<% end %>
</div>
</div>
</div>
You need to use image_path helper method for href because assets are coming from through asset pipeline.
I've never used lightbox2 before
but if it's me, I would take 3 different solutions
change "a" into "div"
remove href from "a"
overwrite event handler of lightbox to preventDefault
hope any of those can solve your problem
I am working on an app where I display current trending videos on YouTube (thumbnail, video title and channel title) via YoutubeDataApi. I would like to access to the correct URL whenever I click on the thumbnail or the title of a trending video.
This is the code I'm using in my controller:
# frozen_string_literal: true
class WelcomeController < ApplicationController
def index
youtube_data_api = YoutubeDataApi.new.client
#result, #errors = youtube_data_api.list_videos 'snippet, id', chart: 'mostPopular', region_code: 'FR', max_results: '50'
end
end
And this is the code I use in my view:
<div style="margin:0 auto; padding:20px 0;">
<% #result.items.each do |video| %>
<a href="https://www.youtube.com/watch?v=#{video_id}" target="_blank" style="color:black"><img src="<%= video.snippet.thumbnails.default.url %>" height="90" width="120">
<div id="channel_title">
<u><b><%= video.snippet.channel_title %></u></b>
</div>
<div id="video_title" style="margin-bottom: 50px;">
<i><%= video.snippet.title %></i>
</div>
</a>
<% end %>
Gem used in this app: gem 'google-api-client', '>0.7'
Could anyone please help me? Thanks in advance
Which gem are you using so we can see what you have to work with a little better.
Just take this with a grain of salt but your image has a src "<%= video.snippet.thumbnails.default.url %>"
Does that url point to the video url? If it does just change your href value to that video.snippet.thumbnails.default.url.
Currently with that href all of your videos will open a new tab to "https://www.youtube.com/feed/trending"
Is there a url on video.snippet (video.snippet.url) ?
Oh also you will need to wrap an around both the title and the thumbnail so that when you click on them it will link. With your loop you are getting the data for each individual video so if you can get the right url you just need to put links around everything and you should be good.
EDIT:
I think I have the answer for you. You are already sending off to retrieve the id's of the videos to the api so all you have to do to get them is do, `video.id
v=#{video.id} instead of video_id unless you make another variable called that and set it equal to video.id.
in your view loop:
<div style="margin:0 auto; padding:20px 0;">
<% #result.items.each do |video| %>
<a href="https://www.youtube.com/watch?v=<%= #{video.id} %>" target="_blank" style="color:black"><img src="<%= video.snippet.thumbnails.default.url %>" height="90" width="120">
<div id="channel_title">
<u><b><%= video.snippet.channel_title %></u></b>
</div>
<div id="video_title" style="margin-bottom: 50px;">
<i><%= video.snippet.title %></i>
</div>
</a>
<% end %>
So just simply the variable injected in your a href changes from video_id to video.id. However what youtube gives you is simply the video id not the full link, as you already noticed. With that slight ruby variable change you should be good to go! :)
Oh forgot to mention the ruby won't show up unless you throw in an erb like tag like shown above.
A possibly nicer way of doing the same thing would be to do:
<%= link_to "https://www.youtube.com/watch?v=#{video.id}", style="color: black;", target="_blank", style="color: black;" do %>
.... (stuff you are wrapping)
<% end %>
So altogether:
<div style="margin:0 auto; padding:20px 0;">
<% #result.items.each do |video| %>
<%= link_to "https://www.youtube.com/watch?v=#{video_id}", style="color: black;", target="_blank", style="color: black;" do %>
<img src="<%= video.snippet.thumbnails.default.url %>" height="90" width="120">
<div id="channel_title">
<u><b><%= video.snippet.channel_title %></u></b>
</div>
<div id="video_title" style="margin-bottom: 50px;">
<i><%= video.snippet.title %></i>
</div>
<% end %>
<% end %>
https://api.rubyonrails.org/v5.2.1/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to
Cheers
Can anyone tell me whats wrong with this section of code? I recently got this to work, but found out soon after the functionality for the Fancybox gallery stopped working. The a link element is only a sliver compared to the over all element. Im not sure if thats it. I know the most recent edit I made was to fix the surrounding row from .row-fluid to .row since that broke my layout. Below is the code:
<body id="portfolio">
<div class="container-fluid" id="particles-js"></div>
<%= render 'layouts/altmenu_gallery' %>
<h1>Portfolio</h1>
<div id="gallery" class="container-fluid">
<% #photos.each_slice(4) do |group| %>
<div class="row ">
<% group.compact.each do |photo| %>
<div class= "col-md-3">
<a class="fancybox" data-fancybox="gallery" href="<%=image_path photo.file_url %>" data-caption="<%= photo.description %>">
<%= image_tag photo.file_url, class:' img-fluid img-thumbnail' if photo.file.present? %>
</a>
</div>
<% end %>
</div>
<% end %>
<br class="clear">
</div>
<%= link_to 'New Photo', new_photo_path %>
</body>
Sorry, but it is not possible to tell without seeing the actual html code or, preferably, live demo. Maybe this issue arises because you have not escaped photo.description and that breaks html code, but, as I said, I can not be sure.
I'm very new to Rails, so this has been tough for me to understand. The front end guy in my group for a school project designed this so that when I tap the "More Info" button on a displayed product, a pop up box shows up on the screen with more information about the product.
How do I make the selected product's info accessible to me so I could display it in the pop up box? I've tried button_to with an :action but I apparently needs a view template, but I don't want that. I simply want to display the selected product's info in the pop up box that shows up when the user taps the "More Info" button.
This is the code I'm working with:
<!-- Container for the Catalog Content -->
<div class="Catalog_page">
<!-- List all products -->
<% #products.each do |product| %>
<div class="product_item">
<span class="img"><%= image_tag product.image, size: "200x100" %></span>
<h1><%= product.name %></h1>
<!--<%= product.description %> Saved this just incase we needed it-->
<%= number_to_currency(product.price) %>
<!-- Button that creates light box -->
<button class="lightbox" id="button">More Info</button>
</div>
<%end%>
<!-- backdrop is the black background of lightbox -->
<div class="backdrop"></div>
<!-- the box that we need to plug information to -->
<div class="box"><div class="close"></div>
I DON'T KNOW HOW TO PULL THIS INFORMATION FROM DATA BASE
</div>
</div>
There are two ways to do your task:
You can render these "more info" and keep it hidden, and then you show the modal these info.
<% #products.each do |product| %>
<div class="product_item">
<span class="img"><%= image_tag product.image, size: "200x100" %></span>
<h1><%= product.name %></h1>
<!--<%= product.description %> Saved this just incase we needed it-->
<%= number_to_currency(product.price) %>
<!-- Button that creates light box -->
<!-- here is the link for each product to open its modal -->
<a data-toggle="modal" data-target="#more-info-<%= product.id %>" class="lightbox">More Info</a>
<!-- here is the modal content -->
<div id="more-info-<%= product.id %>" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">More Info</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
</div>
<% end %>
Or you can fetch these info by ajax and then show it on the modal
<% #products.each do |product| %>
<div class="product_item">
<span class="img"><%= image_tag product.image, size: "200x100" %></span>
<h1><%= product.name %></h1>
<!--<%= product.description %> Saved this just incase we needed it-->
<%= number_to_currency(product.price) %>
<!-- Button that creates light box -->
<button class="lightbox fetch-info" data-product-id="<%= product.id %>">More Info</button>
</div>
<%end%>
<!-- backdrop is the black background of lightbox -->
<div class="backdrop"></div>
<!-- the box that we need to plug information to -->
<div class="box"><div class="close"></div>
<div id="fetch-result"></div>
</div>
and then, create a JS to fetch the data:
$(".fetch-info").click(function() {
var $input = $(this);
$.ajax({
type: "GET",
url: "/product_info",
data: {
id: $input.data("product-id")
},
success: function(response) {
$("#fetch-result").html(response);
}
});
});
Then, create an action to provide the product info:
def product_info
#product = Product.find(params[:id])
render layout: false
end
and create your view with your custom product info...
That's it!
Tip: if you choose the second option, you can improve by calling the action as JSON (fetch just the product info, and then in your success callback, you add the html there)
This is an index page, www.example.com/products. It is showing a list of the products and when clicked they will open a lightbox. What you are going to have to do is pass the id of each individual product into the button so that when the lightbox is opened it is showing the correct information for that product. Alessandro's code is not going to help you because product.attribute1 will not be defined.
I am using httparty gem to get wp-json date from a wordpress site to my Rails application.
Here is my controller that gets the json info:
require 'httparty'
require 'json'
class ConnectionController < ApplicationController
respond_to :json
def index
end
def thirty_days
get_thirty_days
end
private
def query_wordpress_category(wordpress_category)
#response = HTTParty.get("http://thriveconnection.com/wp-json/posts?filter[category_name]=#{wordpress_category}&filter[order]=date")
end
def get_thirty_days
query_wordpress_category("30-days")
#thirty_days = JSON.parse(#response.body)
end
end
Here is what it gets displayed: http://d.pr/i/1jMEq
Here is my view:
<% #thirty_days.each do |article| %>
<div class="row">
<div class="col-md-6">
<a href="<%= article['link'] %>" target="_blank">
<img src="<%= article['featured_image']['source'] %>" alt="" class="img-responsive thumbnail" />
</a>
</div>
<div class="col-md-6">
<strong class="title-font">
<a href="<%= article['link'] %>" target="_blank">
<%= article['title'] %>
</a>
</strong>
<span class="small-font">Published Date <%= article['date'] %></span>
<br /><br />
<%= article['excerpt'] %>
<br /><br />
<a href="<%= article['link'] %>" target="_blank">
<i class="fa fa-bookmark-o"></i>Read the Article
</a>
</div>
</div><!-- END .row -->
<% end %>
Here is my problem, the excerpt from wordpress gets displayed as an html. How can I display that so the HTML tags don't show up. Also, is there any way I can format the date to mm/dd/yyyy format?
You need to mark the strings that you don't want escaped as html_safe which allows the Rails view processor to know not to escape them. Be warned, if you don't escape them then you open your users up to various hack attempts by the other site by including a malicious packet in the strings you retrieve.
So, eg.
<%= article['title'].html_safe %>
Also as for date format I used
<%= Date.parse(article["date"].strftime("%m/%d/%Y") %>