I am working with Rails, and using JavaScript as well. I am having trouble getting Javascript function for the multiple tr in my table. I am using bootstrap to display my modal and everything works fine for the first tr, but it doesn't function for the others:
<script type = "text/javascript">
$(function(){
$("#btn-show-modal").click(function(e){
$("#dialogue-example").modal('show');
});
$("#btn-close-modal").click(function(c){
$("#dialogue-example").modal('hide');
});
});
</script>
<table class="table table-striped">
<thead>
<tr>
<th>Brand</th>
<th>description</th>
<th>Rate</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<% #products.each do |product| %>
<tr id ="btn-show-modal">
<td><%= product.brand %></td>
<td><%= product.short_description %></td>
<td><%= product.rate_amount %></td>
<td><%= product.created_at %></td>
<% name = product.name %>
<% description = product.description %>
</tr>
</tbody>
<% end %>
</table>
#BenjaminGruenbaum wrote in a comment:
IDs are unique (and can be only used on one element), use classes instead.
Related
I have a table in my nodeJS project that has data with a status. I would like to show this status in red and green. To render the HTML page I use EJS.
I've already tried using an if/else statement, but there I always get the first value of the statement.
MySQL:
SELECT g_id, g_name, g_status FROM games
EJS:
<table class="table table-hover">
<thead>
<tr class="table-info">
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<% if (data) {
data.forEach(function(game){
var status = game.g_status;
if (status = '1') {
status = 'color-green';
} else {
status = 'color-red';
}
%>
<tbody id="myTable">
<tr>
<td><%= game.g_name %></td>
<td><%= status %></td>
</tr>
</tbody>
<% }) %>
<% } %>
</table>
What's the problem, and how do I get the SQL output to a specific colour?
use ternary condition like this way :
<table class="table table-hover">
<thead>
<tr class="table-info">
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<% if (data) {
data.forEach(function(game){ %>
<tbody id="myTable">
<tr>
<td><%= game.g_name %></td>
<td><%= game.g_status=='1'?'color-green':'color-red' %></td>
</tr>
</tbody>
<% }) %>
<% } %>
well.
there is many places to look for.
read on equals operator in JavasScript
status is not part of the list, just app variable
create function returning color for given status
My table filter in html with Javascript does not work. I'm trying to filter a table generated from a ruby on rails query. I want to filter the table by the fields in the first column, I have a code that I tried with a simple table and it works fine, but using the same function in the ruby on rails html table does not work. I think tr [i] .style.display = "none";It does not work, but I'm not sure. When I run the filter, the table is recharged but remains the same.
<table id = "myTable" class="table table-hover table-bordered">
<thead>
<tr align="justify-center">
<th>Pais</th>
<th>Jugador</th>
<th>Partido</th>
<th>Minuto</th>
<th>Tarjeta</th>
</tr>
</thead>
<tbody>
<tr align = "center">
<td> Alemania </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<% #tarjetasAmarilla.each do |tarjAm| %>
<tr align="center">
<td><%= tarjAm.player.country.nombre %></td>
<td><%= tarjAm.player.nombre %> <%= tarjAm.player.apellido
%> </td>
<td><%= #calendarios[tarjAm.match.calendar.id-1]
[0].country.nombre %> - <%= #calendarios[tarjAm.match.calendar.id-1]
[1].country.nombre %></td>
<td><%= tarjAm.minuto %>'</td>
<td><span class ="fa fa-sticky-note" style="color:yellow">
</span></td>
</tr>
<% end %>
<% #tarjetasRojas.each do |tarjAm| %>
<tr align="center">
<td><%= tarjAm.player.country.nombre %></td>
<td><%= tarjAm.player.nombre %> <%=
tarjAm.player.apellido %> </td>
<td><%= #calendarios[tarjAm.match.calendar.id-1]
[0].country.nombre %> - <%= #calendarios[tarjAm.match.calendar.id-1]
[1].country.nombre %></td>
<td><%= tarjAm.minuto %>'</td>
<td><span class ="fa fa-sticky-note" style="color:red">
</span></td>
</tr>
<% end %>
</tbody>
</table>
Javascript
function myFunction(id) {
var input, filter, table, tr, td, i, j, visible;
input = document.getElementById(id);
filter = input.id.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 1; i < tr.length; i++) {
visible = false;
td = tr[i].getElementsByTagName("td");
if (td[0] && td[0].innerHTML.toUpperCase().indexOf(filter) > -1) {
visible = true;
}else {
visible = false;
}
if (visible === true) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
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)
I am trying to implement dynamically show hide columns in rails using dataTable plugin.
The show Hide button is visible but when I uncheck a column it is not disappearing from the table. The column should appear only when I click on check mark true, if I uncheck it it should be not in the columns list.
Please help me how to fix this!.
_merchent.html.erb # partail file
<div id="merchant_list" class="panel-body">
<div class="table-success">
<table id = "table_id" class="table table-bordered">
<thead>
<tr>
<th>Merchant</th>
<th>Bank Name</th>
<th>Payment Gateway</th>
<th>Status</th>
<th>Amount</th>
<th>Discount</th>
<th>Additional Charges</th>
<th>Added On</th>
</tr>
</thead>
<tbody id="details">
<% #all_settlement_details.each do |sd| %>
<tr>
<td><%= sd.merchantname %></td>
<td><%= sd.bank_name %></td>
<td><%= sd.payment_gateway %></td>
<td><%= get_status(sd.status) %></td>
<td><%= sd.amount %></td>
<td><%= sd.discount %></td>
<td><%= sd.additional_charges%></td>
<td><%= get_added_on_date sd.addedon %></td>
</tr>
<% end %>
</tbody>
</table>
<div id="align">
Load more...
</div>
</div>
</div>
</div>
merchant.js file
$(document).ready(function(){
$('#table_id').DataTable({
"dom": 'C>"clear"<lfrtip',
paging: false,
searching: false
});
Please see the corresponding image as well.
Have you looked at http://www.datatables.net/examples/api/show_hide.html?
$(document).ready(function() {
var table = $('#example').DataTable( {
"scrollY": "200px",
"paging": false
} );
$('a.toggle-vis').on( 'click', function (e) {
e.preventDefault();
// Get the column API object
var column = table.column( $(this).attr('data-column') );
// Toggle the visibility
column.visible( ! column.visible() );
} );
} );
We need to see your code that is attached to the checkboxes to know further what you problem could be.
After few hours, I finally figured out the solution.!
Everything is fine but the datatable libraries that I included were out dated. So I changed those two libraries. Now it is working.
http://cdn.datatables.net/colvis/1.1.1/css/dataTables.colVis.css
http://cdn.datatables.net/colvis/1.1.1/js/dataTables.colVis.min.js
I am using jQuery datables with dynamically change columns using Colvis.
Everything is working fine (adding and removing columns).
But when the data is loaded and trying to remove a column, it is not correctly removing the corresponding rows. Instead just the column is being removed but the corresponding row data is being displayed in the next column. It should also be removed.
Pleas help to fix this issue.
CODE
partner.js
$('#example').dataTable( {
"dom": 'C>"clear"<lfrtip',
searching:false,
paging:false,
"bServerSide": true,
"sAjaxSource": window.location.href,
"fnServerData": function ( sSource, aoData, fnCallback ) {
console.log(sSource);
console.log(aoData);
console.log(fnCallback);
alert('change in dataTable');
$.getJSON( sSource, aoData, function (json) {
// Do whatever additional processing you want on the callback, then tell DataTables
fnCallback(json)
} );
}
} );
transaction.html.erb # where the table is listed.
this is where the data is being loaded in the each loop.
<div class="panel">
<div class="panel-heading">
<span class="panel-title"><i class="fa fa-exchange"></i> Transactions</span>
<%= render partial: 'date_filter', locals: {filter_name: 'load_more'}%>
</div>
<div id="merchant_list" class="panel-body">
<div class="table-success">
<table id ="example" class="table table-bordered">
<thead>
<tr>
<th>Merchant</th>
<th>Bank Name</th>
<th>Payment Gateway</th>
<th>Status</th>
<th>Amount</th>
<th>Discount</th>
<th>Additional Charges</th>
<th>Added On</th>
</tr>
</thead>
<tbody id="details">
<% #all_settlement_details.each do |sd| %>
<tr>
<td><%= sd.merchantname %></td>
<td><%= sd.bank_name %></td>
<td><%= sd.payment_gateway %></td>
<td><%= get_status(sd.status) %></td>
<td><%= sd.amount %></td>
<td><%= sd.discount %></td>
<td><%= sd.additional_charges%></td>
<td><%= get_added_on_date sd.addedon %></td>
</tr>
<% end %>
</tbody>
</table>
<div id="align">
<% if #all_settlement_details.count < 1 %>
Nothing, more
<% else %>
Load more...
<% end %>
</div>
</div>
</div>
</div>
# BEFORE UNCHECKING STATUS COLUMN
# AFTER CLICK CHECK "Status"
See the two images. In the status column initially notice "Status", "Amount" columns. the row data is "dropped" for "Status" column but when I uncheck the status column, the status column is removed but the row data which was "dropped" is now moved to next column Amount.
I could not understand why it is happening. How can I fix this behavior.