I have one looping Dates and table content.
I want to display table content based on Dates. How's it possible please help me.
index.html.erb
<% #batches.each do |batch| %>
<tr>
**<td class = "pie" id ="demo"> <i class="fa fa-plus-circle"></i>
<%= batch.date.strftime("%Y-%m-%d") if !batch.date.nil? %></td>**
<td><%= batch.purchase_center.name.to_s if !batch.purchase_center.nil? %></td>
<td><%= batch.plant.name.to_s if !batch.plant.nil?%></td>
<td><%= batch.species.name.to_s if !batch.species.nil? %></td>
<td><%= batch.batch_number %></td>
<td><%= batch.total_quantity %></td>
<td><%= batch.calculated_yeild %></td>
<td><%= link_to '<i class="fa fa-users"></i>'.html_safe, "#", :class => "addsupplier", :id => "#{batch.serial_id}" %></td><td><%= link_to '<i class="fa fa-trash-o"></i>'.html_safe, batch, method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>
<tr class="<%= batch.serial_id %>" style="display:none">
<%= render :partial => "batch_counts/form", locals: {id: "#{batch.serial_id}"} %>
</tr>
**<td id ="two" style="display:">
Microsoft Corporation
Microsoft Corporation
</td>**
<% end %>
<script type="text/javascript">
$('#demo').click(function(){
$('#two').toggle();
});
</script>
I highlighted with star marks i.e. id = demo and id =two.
i have different dates and different message. So i want to display it on which date is having which message.
Based on dates display message.
Give a common class to each of them. Say, date-alert:
<td class="pie date-alert" id="demo"> <i class="fa fa-plus-circle"></i>
<%= batch.date.strftime("%Y-%m-%d") if !batch.date.nil? %></td>
<td id="two" style="display:" class="date-alert">
Microsoft Corporation
Microsoft Corporation
</td>
And then upon clicking it, you can execute like this:
$(".date-alert").click(function () {
// the current td is this
});
Related
Currently I have a form that looks like :
<tr>
<td>
<%= f.hidden_field :_destroy %>
<%= link_to "remove", '#', class: "remove_record"
</td>
<td><%= f.date_field :date, as: :date, value: f.object.try(:strftime,"%m/%d/%Y"), class: 'form-control' %> </td>
<td><%= f.text_field :description, label: false, class: 'form-control input' %></td>
<td><%= f.text_field :reference, label: false, class: 'form-control input' %></td>
<td> <%= f.collection_select :bank_account_id, BankAccount.all, :id, :name, {:prompt => false},class:"btn btn-sm" %></td>
<td><%= f.collection_select :gl_account_id, GlAccount.all, :id, :name, {:prompt => false},class:"btn btn-sm" %></td>
<td><%= f.collection_select :vat_type, Transaction.vat_types.map{ |dp| [dp.first, dp.first.humanize] }, :first, :second,{:prompt => false},class:"btn btn-sm" %></td>
<td> <%= f.text_field :total_amount, class: 'form-control input' %></td>
<% f.check_box :payment, :value => true %>
</table>
I want to add another <td> after my remove column that prompts a user to select what type of payment it is:
<select>
<option value="regular">Regular</option>
<option value="invoice">Invoice</option>
</select>
This would change the row:
<td><%= f.collection_select :gl_account_id, GlAccount.all, :id, :name, {:prompt => false},class:"btn btn-sm" %></td>
And will become:
<td><%= f.collection_select :purchase_id, Purchase.all, :id, :invoice_number, {:prompt => false},class:"btn btn-sm" %></td>
This way - the user can easily change the type of transaction they are performing without having to be redirect to a new form. Any ideas on how I can achieve this?
1 => Add a select option for transaction type after remove link
<%=select_tag "transaction_type", options_for_select([['regular', 'Regular'], ['invoice', 'Invoice']]), class: 'transaction_type'%>
2 => Add a unique id on select_field which will be triggered dynamically on change of transaction type
<td><%= f.collection_select :gl_account_id, GlAccount.all, :id, :name, {:prompt => false},class:"btn btn-sm", id: 'gl_account' %></td>
<td><%= f.collection_select :vat_type, Transaction.vat_types.map{ |dp| [dp.first, dp.first.humanize] }, :first, :second,{:prompt => false},class:"btn btn-sm", id: "vat_type" %></td>
3 => Using Jquery
<script>
//by default hide both gl_account and vat_type select box
$('#vat_type, #gl_account').hide();
// on change transaction_type show/hide these select box
$('.transaction_type').on('change', function(){
var transaction_type_Val = $(this).val();
if (transaction_type_Val == 'regular'){
$('#gl_account').show();
$('#vat_type').hide();
}else{
$('#gl_account').hide();
$('#vat_type').show();
}
})
</script>
this is my table:
<tbody>
<% #productos.each do |producto| %>
<tr>
<td><%= producto.codigo %></td>
<td><%= producto.descripcion %></td>
<td><%= producto.stock %></td>
<td><%= button_to '+', "#", method: :get,class: 'btn btn-info btn-sm btn_add' %></td>
</tr>
<% end %>
</tbody>
On button click i want to get the value of |producto| (each row)in JAvascript and send to other table in the same view OR the right way is to get the value from td ? example:
<td><%= producto.codigo %></td> //in this case how i get the value of this td?
Using Javascript or Jquery. thanks
First add id in every td al follows
<tbody>
<% #productos.each do |producto| %>
<tr>
<td id="code-<%= producto.codigo %>"><%= producto.codigo %></td>
<td id="des-<%= producto.codigo %>"><%= producto.descripcion %></td>
<td id="stock-<%= producto.codigo %>"><%= producto.stock %></td>
<td><%= button_to '+', "#", method: :get,class: 'btn btn-info btn-sm btn_add' %></td>
</tr>
<% end %>
</tbody>
Now in you button add an attribute data-id like this
<button class="btn btn-info btn-sm btn_add" data-id="<%= producto.codigo %>" type="button">Click</button>//I don't know about Rails so do this code in your language.
Now The jQuery is given below...
<script>
$(document).on('click','btn_add',function(){
id = $(this).data('id'); //get the clicked button's id
var code = $('#code-'+id).html(); //get the code of that row
var des = $('#des-'+id).html(); //get the description of that row
var stock = $('#stock-'+id).html(); //get the stock of that row
alert('Code - '+code+'<br> Description - '+des+'<br>Stock - '+stock);
});
</script>
1- pass all the variable which you want in js code block on click event
<td><%= button_to '+', "#", method: :get,class: 'btn btn-info btn-sm btn_add', :onclick => "get_current_producto(this, '<%=producto.codigo%>', '<%=producto.descripcion%>', '<%=producto.stock%>');" %></td>
2- get all variables here and
<script type="text/javascript>
function get_current_producto(elm, codigo,descripcion, stock ){
//code goes here
//console.log(codigo);
alert(descripcion);
};
</script>
here elm is button element on which click event is called you can get id or class of that button element by using elm
I want to know how to apply a color in .ejs file. Here is the code.
<% resultList.forEach(function(item, index){ %>
<tr>
<td><%= item.function %></td>
<td><%= item.value %></td>
<td><%= item.content %></td>
</tr>
<% }); %>
if(item.value == false) //I want to apply red color
How can I do that? Thank you.
Would something like this work?
<% resultList.forEach(function(item, index){ %>
<tr>
<td><%= item.function %></td>
<% if (item.value === false) { %>
<td style='color:red;'><%= item.value %></td>
<% else %>
<td><%= item.value %></td>
<% } %>
<td><%= item.content %></td>
</tr>
<% }); %>
Note personally I think this is ugly. I would try to keep more code out of template side and would also use a CSS class for the coloring, but it was easier to illustrate this way.
I have a Rails 3.2.21 app which I use select2 for my dropdown menus and UI. In this view I'm doing a multi-select to pick different elements/objects in my view/form. When the initial controller view loads it's fine as you can see by the first picture. But when I click to a second page to paginate, the select2 is broken by the Ajax as you can see in the last picture.
Here is what my view looks like:
index.html.erb
<h3 class="offset3">5 most recent pages</h3>
<div class="row">
<div class="span3"><div class="well" id="form"><%= render 'form' %></div></div>
<div class="span9"><div id="pages"><%= render 'pages' %></div></div>
</div>
index.js.erb
$("#form").html("<%= escape_javascript render("form") %>");
$("#pages").html("<%= escape_javascript render("pages") %>");
_form.html.erb
<%= form_for(#page) do |f| %>
<div class="control-group">
<div class="controls">
<%= f.label :message %>
<%= f.text_area(:message, size: "40x2", :maxlength => 254, placeholder: "Enter your message here", required: true) %>
<%= f.label 'Unit'%>
<%= f.select :unit_id, options_for_select(Unit.active.order(:unit_name).map{ |unit| [unit.unit_name, unit.id] } + [["All Units", "all"]]), {:include_blank => true}, {:multiple => 'true', class: 'select'} %>
<%= f.label 'Region' %>
<%= f.collection_select(:region_id, Region.order("area ASC"), :id, :area, {:include_blank => true}, {:multiple => 'true', :class => 'select' } )%>
</div>
</br>
<%= f.button 'Send Page', class: 'btn btn-info', data: {disable_with: "<i class='icon-spinner'></i>Sending..."} %>
</div>
<% end %>
_results.html.erb
<table class="table table-striped">
<thead>
<tr>
<th>Incident Number</th>
<th>Patient Name</th>
<th>Transfer Date</th>
<th>Transferred From</th>
<th>Transferred To</th>
<th>Determinant</th>
<th>Unit</th>
<th>Insurance</th>
<th>Cancelation Reason</th>
<th>Billing Reference</th>
<th>Run Time</th>
<th></th>
</tr>
</thead>
<tbody>
<% #calls.each do |c| %>
<tr>
<td><%= c.incident_number %></td>
<td><%= c.patient_name %></td>
<td><%= c.transfer_date.strftime("%m/%d/%y") %></td>
<td><%= transferred_from(c) %><br/><%= transferred_from_address(c) %></td>
<td><%= transferred_to(c) %><br/><%= transferred_to_address(c) %></td>
<td><%= c.nature.try(:determinant)%></td>
<td><%= c.units.map(&:unit_name).join(", ") %></td>
<td><%= c.insurance.try(:insurance_type)%></td>
<td><%= c.cancel_reason.try(:reason) %></td>
<td><%= c.imx_num %></td>
<td><%= TimeFormatter.format_time(c.run_time) if c.in_service_time? %></td>
<td><%= link_to 'View', c, :class => 'btn btn-info btn-mini'%></td>
</tr>
<% end %>
</tbody>
</table>
<%= will_paginate #calls, :renderer => BootstrapPagination::Rails %>
Here is the jQuery from my application.js file:
$(function (){
$(".select").select2({
placeholder: "Select One",
allowClear: true
});
$(function() {
$("#pages th a, #pages .pagination a").live("click", function() {
$.getScript(this.href);
return false;
});
});
It looks like when I click a pagination link the dom is not getting reloaded and thus breaking the UI with select2. I can still pick objects in the form but UI-wise it's broken.
I was wondering if anyone could help point me in the right direction with this as I'm not very savvy with jQuery or javascript/ajax.
If my question is not clear or you need further examples, please let me know.
working
breaks on ajax pagination
So far this is the only useful answer I've come up with.
In my index.js.erb file I put the following:
$("select").select2({
placeholder: "Select One",
allowClear: true
}); init();
This will reinitialize select2 by destroying the call on an Ajax request then calling select2 again. It behaves as expected and keeps the UI properties while overriding the "turbolinks-like" Ajax behavior.
This is working 100% for me, although it feels a bit hackish that I have to do this in UJS, but hey whatever works right?
I have an array of Pet instances and each of them have a name, type, sex and size, etc... I'd like to iterate through this collection of Pet instances and display the each one by one.
This is what I have so far:
<% #pets.each do |pet| %>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Sex</th>
<th>Age</th>
<th>breed</th>
<th>Size</th>
<th>Picture</th>
<th>Description</th>
<th>Shelter_id</th>
<th>Shelter</th>
<th>Phone</th>
<th>Email</th>
<th>City</th>
<th>Zip</th>
<th>Like</th>
</tr>
</thead>
<tbody>
<tr>
<td><%= pet.name %></td>
<td><%= pet.species %></td>
<td><%= pet.sex %></td>
<td><%= pet.age %></td>
<td><% pet.breeds.each do |breed| %>
<li><%= breed.name %></li>
<%end%>
</td>
<td><%= pet.size %></td>
<td><%= image_tag pet.picture %></td>
<td><%= pet.description %></td>
<td><%= pet.shelter_id %></td>
<% shelter = Shelter.find(pet.shelter_id)%>
<td><%= shelter.name %></td>
<td><%= shelter.phone %></td>
<td><%= shelter.email %></td>
<td><%= shelter.city %></td>
<td><%= shelter.zip %></td>
<td><%= form_for pet, :url => { :controller => "favorite_pets", :action => "create" }, :html => {:method => :post} do |f| %>
<%= f.text_field :id %>
<%= f.submit %>
<% end %>
</td>
</tr>
</tbody>
</table>
<%end%>
So now, I need two thinks.
1st
When a user clicks the submit button (<%= f.submit %>) to send a POST request i do not want the page to reload nor to redirected me to another page. I looked around and it seems like :remote => true included in the form_for would do the trick but i'd need more help with that.
2nd
I'd like to control the iterating through #pets so that only the first one is displayed pet[0] and every time I click on the <%= f.submit %> button not only does it not reload the page but it displays the next index in the array pet[1]
I think I need to set up a sort of counter which would increment the index of the pet array every time a user click on the <%= f.submit %> button.
Any guiding thoughts?
If I were to do this I would use some javascript. So your submit button turns into more of an "Add Button" it doesn't actually submit anything. It would just add that object (in your case the pet, along with its info) to a javascript array as well as display the new object (again the pet along with the info) on the window. Then create another button to actually submit all the pets. (The javascript array)