I am trying to reload a partial contained inside a Foundation tab every few seconds.
apps/views/xrf_cocs/show.html.erb - This is where I'm initially rendering the partial
<div class="tabs-panel" id="panel6v" style="border-left: solid 1px #f2f2f2">
<%= render 'lead_reports/index' %>
</div>
apps/controllers/xrf_cocs_controller.rb - This is where I'm populating the rails objects for the partial
def show
#positive_lead_reports = LeadReport.all.to_a
#positive_lead_reports.delete_if{|cur| cur.xrf_coc_id != #xrf_coc.id}
#negative_lead_reports = LeadReportNeg.all.to_a
#negative_lead_reports.delete_if{|cur| cur.xrf_coc_id != #xrf_coc.id}
end
apps/views/lead_reports/_index.html.erb - This is the gist of the code inside the partial
<div id="lead_reports">
<% #positive_lead_reports.each do |lead_report| %>
<table>
<thead>
</thead>
<tbody>
</tbody>
</table>
<% end %>
... repeat above for negative reports
</div>
Basically I'm trying to add a jQuery function inside my apps/views/xrf_cocs/show.html.erb file that will call the render 'lead_reports/index' every 3 seconds.
Can anyone offer some help with this?
render is a Ruby on Rails method. Therefore, I highly doubt that you can call it directly. The best way to refresh a partial view is probably to use an ajax request.
Is it possible to refresh partial frequently using Ajax?
Related
Good day.
I am a beginner in this, I have a table with the following records and I want to add the Red Team, Yellow Team and Turquoise Equipment column and show the sum in the labels that are at the top of the table
For this I attach my html code with jsp and the reference image
Score Table
<div class="tabs-body">
<div class="tabs-item" id="tab1">
<div class="container">
<div class="con-contador">
<label>Puntaje Rojo :</label>
<label id="projo" class="contador"></label>
<label >Puntaje Amarillo :</label>
<label id="pamarillo" class="contador"></label>
<label>Puntaje Turqueza :</label>
<label id="pturqueza" class="contador"></label>
Reporte
</div>
<div class="table-responsive-vertical" >
<table id="reporte" class="table table-bordered table-striped table-hover table-mc-light-blue">
<thead>
<tr>
<th>Disciplina</th>
<th>Categoria</th>
<th>Genero</th>
<th style="background-color: red">Equipo Rojo</th>
<th style="background-color: yellow">Equipo Amarillo</th>
<th style="background-color: turquoise">Puntaje Turqueza</th>
</tr>
</thead>
<tbody>
<%
for (int i=0; i < v.size();i++){
puntaje p = (puntaje)v.elementAt(i);
%>
<tr>
<td data-title="Disciplina"><%=p.getNombredeporte()%></td>
<td data-title="Categoria"><%=p.getCategoria() %></td>
<td data-title="Genero"><%=p.getGenero() %></td>
<td data-title="Puntaje"><%=p.getPuntaje1() %></td>
<td data-title="Puntaje"><%=p.getPuntaje2() %></td>
<td data-title="Puntaje"><%=p.getPuntaje3() %></td>
</tr>
<%
}
%>
</tbody>
</table>
</div>
</div>
</div>
</div>
I understand that it can be done with a function in javascript but I am still a newbie, I ask for your kind support.
Firstly I'd say that JSP is Java Server Pages, not javascript. JSP code gets run (for example, generating puntaje sums) on the server before the webpage is returned to the web browser. In contrast, javascript code is executed after the webpage is returned to the web browser. Since you already have JSP code, why not just run your code server-side? Perhaps another "for" loop that runs to generate sums before your elements. That said, if you really want to use javascript then the general procedure will be: add another data-attribute to your points TDs, like
<td data-puntaje-rojo=<%=p.getPuntaje1() %>>
Add classed spans to your labels like:
<label>Puntaje Rojo : <span class="puntaje-sum-rojo"></span></label>
Then in your javascript, use some form of selector to iterate over a collection/array of the TDs and store the sum of all data-puntaje-rojo values. Then, use javascript or jquery to inject the appropriate sum value into the appropriate label span.
While best practice is to store your javascript code in an external file on your web server website location, you can also write javascript directly inside of your JSP page, the javascript code must be inside tags. And, it's best to have your javascript code run after your HTML is fully loaded: javascript and jquery both provide ways to accomplish that.
Simple HTML form in a view. I need the user selected value of the form to pass into the active record query when the user switches it. (Probably not params because then it won't be asynchronous?)
In the example below I need the business_id to be the value of the form. New to rails, so if you could provide some in page javascript, I'll deal with refactoring it to the resources later...
<select name="clients">
<option value="1">Tesla</option>
<option value="4">Chevy</option>
</select>
<table>
<% #clients.where(month_year:'2015-02',business_id:'NEED VALUE OF HTML FORM HERE').find_each do |client| %>
<tr>
<td><%= client.month_year %></td>
<td><%= client.business_id %></td>
<td><%= client.bill_charge %></td>
</tr>
<% end %>
</table>
To expound on other answers, here's a (perhaps) overly simplified mock up.
Client view
Here you need to call render that points to a partial. This partial will contain the table data (so it's resuable later). You also need to give your select statement a class that jquery can easily grab to do the async fetch of your client data.
# app/views/clients/index.html.erb
<%= select_tag "business", options_from_collection_for_select(Business.all, "id", "name"), class: "car-select" %>
<div class="clients-table">
<%= render "table_list" %>
</div>
Table Partial
With the table you just cut out of the index view, you'll need to paste into a partial
# app/views/clients/_table_list.html.erb
<table>
<thead>
<tr>
<th>Month year</th>
<th>Business</th>
<th>Bill charge</th>
</tr>
</thead>
<tbody>
<% #clients.each do |client| %>
<tr>
<td><%= client.month_year %></td>
<td><%= client.business.try(:name) %></td>
<td><%= client.bill_charge %></td>
</tr>
<% end %>
</tbody>
</table>
AJAX script
This need to watch for changes to the select and submit a request for client data
# app/assets/javascripts/clients.coffee
ready = ->
$('.car-select').on 'change', ->
bid = $(this).val()
$.ajax
url: '/businesses/' + bid
dataType: 'script'
return
return
$(document).ready(ready)
$(document).on('page:load', ready)
# this is turbolinks-friendly
Businesses Controller processes request
In your ajax request you are calling to a URL like, "http://yourapp.com/businesses/23", which really hits the show action of your businesses controller. You want to do it this way because it's completely RESTful and you don't have to change any routes. But you will need to edit the action to provide an instance variable for clients.
# app/controllers/businesses_controller.rb
def show
#business = Business.find(params[:id])
#clients = #business.clients (this assumes that you already have a proper has_many / belongs_to relationship between business and client)
respond_to do |format|
format.html
format.js
end
end
UJS View
The last piece of the puzzle is the UJS view. This is javascript that is only called when the js request type is sent to a particular controller action. In this case, the show action of the businesses controller. This is going to take the newly created #clients and replace the existing table with the partial and new data.
#app/views/businesses/show.js.erb
$(".clients-table").html("<%= escape_javascript(render( '/clients/table_list', client: #clients)) %>");
If you still have questions, or want to do more complicated things, you should go research a little on UJS templates and callbacks.
put your result table into a partial.
fire a ajax request on the on change event of the select
render the table based on the value of the select which you pass as request variable (`#clients')
Imagine the Database like below.
// 'Article' Schema
{
subject : 'Hello world',
content : 'I want to display this content partially.
The content would has verbose text like long
blabla...........blabla.......blabla......blabla...........
blabla.......blabla......blabla...........b........
and even more, It would has <img src=".......jpg"/>
}
Now I render this data to some ejs file,
<table>
<% Articles.forEach(function(article, index){ %>
<tr>
<td> <%= article.subject %> </td>
<td> <%= article.content %> </td>
</tr>
<% }) %>
</table>
// To don't display verbosely, give style attribute (Of course, on top of html)
<style>
td { white-space: nowrap; overflow: hidden; }
</style>
But this way, It maybe decrease application performance, right? If there are 10, 20, 30 articles on one page, The server will try to display whole of this things. What I want to make is some summary of contents, How can I do this cleverly?
For summery contents,display initial few text with ellipses in the end
<table>
<% Articles.forEach(function(article, index){ %>
<tr>
<td> <%= article.subject %> </td>
<td> <%= article.content.substring(0,10) %> ...</td>
<td> <a id="read_more" content_id="cont-id" href = "javascript:(void)"> read more..</a></td>
</tr>
<% }) %>
Then use ajax application to get complete data on click of read more depend whether are you using jquery or angular etc.
And if there are more article then do pagination with ajax application or page refresh
On node side create API which gives this content data or new articles in the same format that you did during page load
As described in the Sails.js documentation:
All of your locals will be sent to the partial automatically.
So I was wondering how I can use the same partial multiple times, in the same view, but with different content.
Let's say I have a list of the top 3 users, and a list of the newest 3 users.
The lists have the same HTML structure, and same CSS styling but their content is different.
How can I use the same partial (user/list.ejs for example) to display both the lists?
Does anyone know if there's a way to pass specific data to the partial, instead of the view locals?
Thanks in advance.
Dennis
Sails uses the ejs-locals library to handle partials, which allows sending options to the partial as the second argument. So in your template you can do:
<h1>Top users: </h1>
<p>
<%= partial('user/list.ejs', {users: topUsers}) %>
</p>
<h1>New users: </h1>
<p>
<%= partial('user/list.ejs', {users: newUsers}) %>
</p>
to supply different values for users inside in the user/list.ejs partial, provided that you supply topUsers and newUsers as locals when you display the view that's including the partial, i.e. in your controller action:
res.view("myView", {topUsers: [array of users], newUsers: [array of users]});
I am using Rails 3.2.13, and I'm trying to update a 'summary' partial after creating a 'child' item.
I have a template and template tasks, and what I am trying to do is update the partial on the 'show' view, which is a summary that indicates how many tasks are allocated to the template. I am doing this in the create.js.erb of the template task.
Here are the contents of _template-summary.html.erb:
<div id="template-summary-details">
<table class="table table-striped">
<tbody>
<tr>
<td><span class="fa fa-th-list"></span> No. of tasks</td>
<td><%= #template.templatetasks.count %></td>
</tr>
<tr>
<td><span class="fa fa-clock-o"></span> Total task days</td>
<td>
<%= #template.templatetasks.sum(:days) %>
</td>
</tr>
<tr>
<td><span class="fa fa-check-square-o"></span> No. of checklists</td>
<td>
<%= #template.templatetasks.count(:checklist_id) %>
</td>
</tr>
</tbody>
</table>
</div>
And here are the contents of create.js.erb:
<% #template = Template.where("id = ?", #templatetask.template_id?) %>
$("#template-summary-details").replaceWith("<%= escape_javascript(render partial: "templates/template-summary", locals: {template: #template}) %>");
<% if #templatetask.parent_id? %>
$('#templatetasks'+<%= #templatetask.parent_id %>).prepend('<%= j render(#templatetask) %>');
<% else %>
$('#templatetasks').prepend('<%= j render(#templatetask) %>');
<% end %>
The problem is that I am getting the following error:
undefined method `where' for ActionView::Template:Class
I have also tried using find but haven't gotten that to work either.
How else would I pass the #template to the partial during the creation of a template task?
You first problem is that you have a name clash between the Rails class ActionView::Template and your Template model class. You can work around that by referring to your model class as ::Template (a top-level Ruby class). e.g.
<% #template = ::Template.where("id = ?", #templatetask.template_id).first %>
But that is just a round about way of doing a primary key lookup which is simpler with find:
<% #template = ::Template.find(#templatetask.template_id) %>
Even easier, if you have already set up a belongs_to association from TemplateTask to Template you could just refer to the related object directly:
<% #template = #templatetask.template %>
That would probably get you a bit further but if you want to make your partials more reusable its might be better to avoid having them refer to instance variables (e.g. #template). Instead the partial should refer to a local template variable that you pass into the render method via the locals hash (which you are already doing).