Hello i need to highlight a div after my page is loading, i don't know if i should use a partial or something like that, the partial also has to have 2 variables disponible.
Code to highlight after loading by 5 seconds:
<div id="total_de_venta">
<% if #instalador.a_destajo? %>
<div align="right"><b>Total de la venta: $<%= #venta.precio_de_venta + #venta.precio_de_instalacion*2 %></b></div>
<% else %>
<div align="right"><b>Total de la venta: $<%= #venta.precio_de_venta + #venta.precio_de_instalacion*2 %></b></div>
<% end %>
</div>
controller :
def show
#venta = Venta.find(params[:id])
#este_instalador_id = #venta.instalador_id
#instalador = Instalador.find_by_id(#este_instalador_id)
#visual_effect(:highlight, "total_zone", :duration => 3.0)
respond_to do |format|
format.html # show.html.erb
format.xml { render :xml => #project }
end
end
Can't you just do it by some Javascript only construction? I'm not a ruby programmer, but I'm sure you can add a 'onLoad' event to your page. The 'onLoad' event fires after the page is loaded. In the 'onLoad' handler you can add your desired effect, e.g. :
Effect.Highlight($('id_of_element'), [ your options]);
To add more than one 'onLoad' handler and execute them all, you can use the following Prototype function:
Event.observe(window, 'load', yourJavascriptFunction);
Related
I am looking for solution for infinite scroll with Kaminari in my project, but it still does not work as expected.
In my home page have view for render post:
<div class="home_post_tab_content">
<%if #posts.present?%>
<div id="home_post_infinite_scroll">
<%= render #posts %>
</div>
<%if #posts.total_count > 10%>
<div class="home_post_pagination_button" id="home_post_pagination">
<%= link_to_next_page(#posts, 'Xem thêm', :remote => true) %>
</div>
<%end%>
<%end%>
</div>
Controller:
respond_to do |format|
format.html {}
format.js
end
Script file:
// Append new data
$("<%=j render #posts %>").appendTo($("#home_post_infinite_scroll"));
// Update pagination link
<% if #posts.last_page? %>
$('#home_post_pagination').remove();
<% else %>
$('#home_post_pagination').html("<%=j link_to_next_page(#posts, 'See more', :remote => true) %>");
<% end %>
Q: How can I trigger the next button when user scrolls in end of page (jquery or JS...)?
Or, If any one has another solution for infinite scroll please let me know. Thanks so much!
I found the solution for resolve it:
<script>
$(document).on('turbolinks:load', function() {
$(window).scroll(function() {
var next_url = $("#home_post_pagination a[rel='next']").attr('href');
if (next_url && ($(window).scrollTop() > ($(document).height() - $(window).height() - 5000))) {
$('#home_post_pagination').show();
$('#home_post_pagination').html('<a>Loading...</a>');
$.getScript(next_url);
return;
}
});
return $(window).scroll();
});
</script>
The $.getScript(next_url) will be trigger next button on scroll
In Rails 5 app with devise, I need to use a new.js.erb file to update select tag in my registrations view and controller. I cant seem to figure out why my new.js.erb file isn't working.
I've tried to use respond_to in controller as below,
registrations-controller.rb
def new
super
#cities = CS.get(:us,params[:state])
respond_to do |format|
format.js { render '/new.js.erb' }# layout: false }
format.html
end
end
new.html.erb
<%= form_for(resource, as: resource_name, url: registration_path(resource_name), :remote => true) do |f| %>
<div class="signup-input-container">
<div class="field">
<%= f.text_field :firstname, autofocus: true, autocomplete: "firstname", placeholder: "First name", class: "signup-input-container--input" %>
</div>
<div class="field">
<%= f.select :state, options_for_select(CS.states(:us).map { |code, name| [name, code] }),{:prompt => "State"}, {:class => "signup-input-container--input", :id => "state-picker"} %>
</div>
<div class="field">
<%= f.select :city, options_for_select([]),{}, {:class => "signup-input-container--input", :id => "city-picker"} %>
</div>
</div>
<% end %>
new.js.erb
var city = document.getElementById("city-picker");
while (city.firstChild) city.removeChild(city.firstChild);
var placeholder = document.createElement("option");
placeholder.text = "Choose a city";
placeholder.value = "";
city.appendChild(placeholder);
<% #cities.each do |c| %>
city.options[city.options.length] = new Option('<%= c %>');
<% end %>
main.js
var state = document.getElementById("state-picker");
state.addEventListener("change", function() {
$.ajax({
url: "/states?state=" + state.value,
type: "GET"
})
})
I'm expecting this to create select tag options with my array of cities in my controller. Does anyone know how to get this to work?
To solve this you should just setup a separate controller where you can fetch the data from asynchronously and alternatively there are also several free API's which can be used for geographical lookup such as Googles Geocoding API and Geonames.
To setup a separate controller you can do it by:
# /config/routes.rb
get '/states/:state_id/cities', to: 'cities#index'
# /app/controllers/cities_controller.rb
class CitiesController < ApplicationController
# GET
def index
#cities = CS.get(:us, params[:state_id])
respond_to do |f|
f.json { render json: #cities }
end
end
end
I would skip using a .js.erb template altogether and just return JSON data which you can use directly in your JS or with one of the many existing autocomplete solutions. .js.erb only makes sense for extensive HTML templating (like for example rendering an entire form) where you want to reuse your server side templates - it greatly increases the complexity and generally makes a mess of your javascript which is not worth it just to output a list of option tags.
// If you are using jQuery you might as well setup a delegated
// handler that works with turbolinks,
$(document).on('change', '#state-picker', function(){
$.getJSON("/states/" + $(this).value() + "/cities", function(data){
// using a fragment avoids updating the DOM for every iteration.
var $frag = $('<select>');
$.each(data, function(city){
$frag.append$('<option>' + data + '</option>');
});
$('#city-picker').empty()
.append($('frag').children('option'));
});
});
I have this link in Rails:
<%= link_to "Add to Journal", add_post_journal_path(post), :method => :put %>
However I want transform this link to show a fancybox with the content listing my content to choose. First, I use this code:
<%= link_to "fancy", "#add_post", :class=>"fancybox" %>
but I have errors, because I want pass the actual post to fancybox, so I'm using this code: in add_post.html.erb:
<h1>Escolha o Jornal que deseja adicionar:</h1>
<ul>
<% current_user.journals.each do |journal| %>
<li><%= link_to journal.name,add_post_complete_journal_path(journal),:remote=>true %> </li>
<% end %>
</ul>
and my controller is:
def add_post
#journal_post = JournalsPosts.new
session[:post_add] = params[:id]
end
def add_post_complete
#journal_post = JournalsPosts.create(:post_id => session[:post_add],:journal_id => params[:id])
respond_with #journal_post
end
How can I transform this code to use my content in my fancybox?
Add on your action add_post the next respond with js:
def add_post
#journal_post = JournalsPosts.new
session[:post_add] = params[:id]
respond_to do |format|
format.js
end
end
Add on a file on your views add_post.js.erb with the next content:
$.fancybox('<%= escape_javascript(render(:partial => 'path_to/add_post'))%>',
{
openEffect: "fade",
closeEffect: "fade",
autoSize: true,
minWidth: 480,
scrolling: 'auto',
});
For example, you have add a partial _add_post.html.erb on your views. Now inside this partial you can write your code view:
#code for your view inside partial `add_post.html.erb`
<%= #journal_post %>
<h1>Escolha o Jornal que deseja adicionar:</h1>
<ul>
.
.
Regards!
In background, I want it to reload and shows the number how many unread messages are there.
I want that without refreshing page. I mean using ajax.
If I had this in menu, how can I refresh only this section every 30 secs?
<li><%= link_to sanitize('<i class="icon-envelope"></i> ') + "received messages" + sanitize(' <span class="badge badge-info">'+current_user.mailbox.inbox(:read => false).count(:id, :distinct => true).to_s+'</span>'), messages_received_path %></li>
messages_controller.rb
def received
if params[:search]
#messages = current_user.mailbox.inbox.search_messages(#search).page(params[:page]).per(10)
else
#messages = current_user.mailbox.inbox.page(params[:page]).per(10)
end
add_crumb 'Messages Received', messages_received_path
#box = 'inbox'
render :index
end
UPDATE:_______________________________
assets/javascript/refresh_messages_count.js
$(document).ready(function () {
// will call refreshPartial every 3 seconds
setInterval(refreshPartial, 3000)
});
function refreshPartial() {
$.ajax({
url: "messages/refresh_part";
})
}
messages_controller.rb
def refresh_part
#message_count = current_user.mailbox.inbox(:read => false).count(:id, :distinct => true)
# get whatever data you need to a variable named #data
respond_to do |format|
format.js {render :action=>"refresh_part.js"}
end
end
views/layouts/_menu.html.erb
<span id="message_received_count"><%= render :partial => "layouts/message_received_count" %></span>
views/layouts/_message_received_count.html.erb
<% if user_signed_in? && current_user.mailbox.inbox(:read => false).count(:id, :distinct => true) > 0 %>
<li><%= link_to sanitize('<i class="icon-envelope"></i> ') + "Received" + sanitize(' <span class="badge badge-info">'+#message_count.to_s+'</span>'), messages_received_path %></li>
<% else %>
<li><%= link_to sanitize('<i class="icon-envelope"></i> ') + "Received", messages_received_path %></li>
<% end %>
views/messages/refresh_part.js.erb
$('#message_received_count').html("#{escape_javascript(render 'layouts/messages_received_count', data: #message_count)}");
You will use setInterval to send the ajax request:
$(document).ready(function () {
// will call refreshPartial every 3 seconds
setInterval(refreshPartial, 3000)
});
// calls action refreshing the partial
function refreshPartial() {
$.ajax({
url: "whatever_controller/refresh_part"
})
}
Then you make an action in a controller like this:
def refresh_part
# get whatever data you need to a variable named #data
respond_to do |format|
format.js
end
end
then you will write a js file named refresh_part.js.haml (you could erb instead of haml).
refresh_part.js.haml would look like this:
$('#part_you_want_to_refresh').html("#{escape_javascript(render 'name_of_partial', data: #data)}");
make sure you set the correct routes in routes.rb.
FYI, refresh_part.js.erb would look like this:
$("#part").html("<%= escape_javascript(render 'partial', data: #data) %>");
instead of:
$('#part').html("#{escape_javascript(render 'partial', data: #data)}");
also, we can use the alias of "escape_javascript" to simplify this:
$("#part").html("<%= j(render 'partial', data: #data) %>");
Yes you can
<html>
<head>
<script type="text/JavaScript">
<!--
function timedRefresh(timeoutPeriod) {
setTimeout("location.reload(true);",timeoutPeriod);
}
// -->
</script>
</head>
<body onload="JavaScript:timedRefresh(5000);">
<p>This page will refresh every 5 seconds. This is because we're using the 'onload' event to call our function. We are passing in the value '5000', which equals 5 seconds.</p>
<p>But hey, try not to annoy your users too much with unnecessary page refreshes every few seconds!</p>
</body>
</html>
Source: http://www.quackit.com/javascript/javascript_refresh_page.cfm
I've got a little demo setup in which clicking a checkbox toggles an attribute via AJAX. It's working fine, but Rails REALLY wants to render something, so I've basically resorted to creating a blank toggle.js.erb file in my views.
Controller action in question:
def toggle
#task = Task.find(params[:id])
respond_to do |format|
format.js do
if (#task.status != true)
#task.status = true
else
#task.status = false
end
#task.save
render :layout => false
end
end
end
View in question:
<h1>Tasks</h1>
<ul style="list-style-type: none;">
<% #tasks.each do |task| %>
<li id="<%= dom_id(task) %>">
<%= check_box_tag(dom_id(task), value = nil, checked = task.status) %>
<%= task.action %> <%= link_to 'Edit', edit_task_path(task) %>
<%= link_to 'Delete', task, :confirm => 'Are you sure?', :method => :delete, :remote => true %>
</li>
<% end %>
</ul>
<%= link_to 'New Task', new_task_path %>
<script>
$$('input').each(function(el) {
el.observe('click', function(event) {
// Get the task ID
var elId = el.id.split("_")[1];
// Build the toggle action path
var togglePath = '/tasks/' + elId + '/toggle/';
// Create request, disable checkbox, send request,
// enable checkbox on completion
new Ajax.Request(togglePath, {
onCreate: function() {
el.disable();
},
onSuccess: function(response) {
},
onComplete: function() {
el.enable();
}
});
});
});
</script>
Without the blank toggle.js.erb file I've got in the views, Rails still gives me an error saying that it's trying to render something.
Ultimately, I'd like to both not have to have a blank toggle.js.erb file, and I'd like to get that Prototype stuff into my static JavaScript stuff and out of the view.
I'm pretty new to Rails, so there's probably an easier way to be doing this, but I'm kind of stuck here.
render :layout => false means that you want to render 'toggle' view without layout.
If you don't want render anything at all, you should use :nothing => true option
def toggle
#task = Task.find(params[:id])
#task.toggle! :status
# if it used only by AJAX call, you don't rly need for 'respond_to'
render :nothing => true
end
EDIT: In Rails4/5 you can use head :ok instead of render nothing: true, it's more preferable way to do this, but result is the same.