I have a Rails view with the following HTML:
<tbody>
<% #requests.each do |request| %>
<tr data-request-id="<%= request.id %>">
<td id="artist" style="text-align: center"><%= request.artist %></td>
<td style="text-align: center"><%= request.title %></td>
<td style="text-align: center" class="voteCount"><%= request.voteCount %></td>
<td style="text-align: center"><%= button_to 'Vote', request_upvote_path(request.id), remote: true, method: :post, onclick: 'upVote()', class: 'upVote' %></td>
</tr>
<% end %>
</tbody>
I'm trying to access the voteCount cell in the table, but I'm not sure how to do it. Normally in JS I would use document.GetElementById or GetElementBysClassName
I have a method that increments the voteCount number by 1 when the button is clicked, which works fine, but this JS function needs to increment the correct request.
Here's the current JS:
function upVote() {
var count = document.getElementsByClassName("voteCount")[0].innerHTML;
count = parseInt(count);
count = count + 1;
count = count.toString();
document.getElementsByClassName("voteCount")[0].innerHTML = count;
document.getElementsByClassName("upVote")[0].disabled = "true";
}
Try something like this. You can pass the id onclick with rails and the just use the regular getElementById in JavaScript:
<tbody>
<% #requests.each do |request| %>
<tr data-request-id="<%= request.id %>">
<td id="artist" style="text-align: center"><%= request.artist %></td>
<td style="text-align: center"><%= request.title %></td>
<td style="text-align: center" id="voteCount<%= request.id %>"><%= request.voteCount %></td>
<td style="text-align: center"><%= button_to 'Vote', request_upvote_path(request.id), remote: true, method: :post, onclick: "upVote(#{request.id})", class: 'upVote', id:"voteButton#{request.id}" %></td>
</tr>
<% end %>
function upVote(id) {
var count = document.getElementById("voteCount" + id).innerHTML;
count = parseInt(count);
count = count + 1;
count = count.toString();
document.getElementById("voteCount" + id).innerHTML = count;
document.getElementById("voteButton" + id).disabled = true;
}
Related
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 a table in an ejs file that loop through a collection(schema) and populate the information. i want to add the values of 2 cells(subQamount and subClaimsum) in that table and show it in another cell(the last one). Apparently i cant use a javascript function and get the element by id (it only get the element of first run). Is there any other way I can do this math?
Here is the table:
<% tracker.subcontractors.forEach(function(data){ %>
<tr>
<td class="button"><%= data.subName %></td>
<td class="button"><%= data.subContact %></td>
<td class="button"><%= data.subQno %></td>
<td class="button">$ <%= commaNumber(data.subQamount) %></td>
<td class="button">$ <%= commaNumber(data.subClaimsum) %></td>
<td class="button"><button style="font-size:13px; padding: 2px; margin-left: 20px;" class="btn btn-info">open</button></td>
<td class="button">$ </td>
</tr>
You just need to add these 2 :
<%= commaNumber(data.subQamount) + commaNumber(data.subClaimsum) %>
I have just created a table with help from embedded javascript. with help from messerbill I have come up with this:
<table id="Table1">
<tr>
<th>Kickoff</th>
<th>Status</th>
<th>Country</th>
<th>League</th>
<th>HomeTeam</th>
<th>AwayTeam</th>
</tr>
<% for (var i = 0; i < result.length; i++) { %>
<% var fileName = result[i].country + ".png" %>
<tr>
<td><%= result[i].Kickoff %> </td>
<td><%= result[i].statustype %> </td>
<td><img src="images/flags/<%= fileName %>" alt="images/flags/NoFlag.png" style="width:25px;height:15px;"/> <%= result[i].country %></td>
<td><%= result[i].league %> </td>
<td><%= result[i].hteam %> </td>
<td><%= result[i].ateam %> </td>
</tr>
<% }; %>
This works., However I need some sort of error handler when no png file is found.
Messerbill suggested yesterday to do something like this:
<% var path = Directory.GetCurrentDirectory() + "\\" + flags + "\\" + fileName %>
but this returns errors. Any suggestions as to how I could get a error handler working.
I would be interested to have it return from public/images/flags/noimg.png when no png file is found on search word.
Any help would be much appreciated
Update:
As an option I thought maybe I would try to search for the icon in the node app like so, :
var fs = require('fs');
var arrayLength = arr.length;
for (var i = 0; i < arrayLength; i++) {
var imgfile = arr[i].country
if (fs.exists('../public/images/flags/' + imgfile + ".png") == true) {
//console.log('/public/images/flags/' + imgfile + ".png");
console.log('fs exists');
} else {
console.log('Not Found!');
}
}
but here I get some error as im not able to locate a single icon.
frederik :)
just add the image tag to your loop:
<% for (var i = 0; i < result.length; i++) { %>
<tr>
<td><%= result[i].Kickoff %> </td>
<td><%= result[i].statustype %> </td>
<td><%= result[i].country %> <img src="/public/images/<%= result[i].country %>.png" alt="img" /> </td>
<td><%= result[i].league %> </td>
<td><%= result[i].hteam %> </td>
<td><%= result[i].ateam %> </td>
</tr>
<% }; %>
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'm trying to make my table sortable (drag and drop) using jQuery, the problem I'm having is saving the new sorted table and then publishing it to other users or when the browser is refreshed.
I'm using:
gem 'acts_as_list'
Rails 3.2.17
ruby 1.9.3p484
Is there a better way of doing this?
my sort and show method on my controller
def sort
#episodes = current_user.episodes_for(#show).each do |episode|
episode.position = params['episode'].index(episode.id.to_s) + 1
episode.save
end
render :nothing =>true
end
def show
#episodes = current_user.episodes_for(#show)
#episodes.order('episode.position ASC')
#episode = #episodes.where(id: params[:id]).first
end
My Javascript
<script>
$(window).load(function() {
$("#sortthis").sortable({
axis: 'y',
placeholder: 'ui-state-highlight',
cursor: 'move',
dropOnempty: false,
scroll: true,
opacity: 0.4,
update: function(event, ui){
var itm_arr = $("#sortthis").sortable('toArray');
var pobj = {episodes: itm_arr};
$.post("/episodes/sort", pobj);
}
});
});
</script>
The table I wanna sort in views:
<tbody id='eps'>
<tr>
<th>Title</th>
<th>#</th>
<th>Season</th>
<th>Download?</th>
<th>Shared?</th>
<th>Length</th>
<th>Status</th>
<th></th>
</tr>
<% for episode in #episodes %>
<tr>
<td id="eps_<%= episode.id %>", width="20%"><%=h episode.title %></td>
<td id="eps_<%= episode.id %>"><%=h episode.number %></td>
<td id="eps_<%= episode.id %>"><%=h episode.season %></td>
<td id="eps_<%= episode.id %>"><%=h episode.is_downloadable %></td>
<td id="eps_<%= episode.id %>"><%=h episode.shared_with_dev %></td>
<td id="eps_<%= episode.id %>"><%=h episode.length %></td>
<td>
<% if episode.video %>
<%= link_to 'Replace Video', new_show_episode_video_path(episode.show, episode) %>
<% else %>
<%= link_to 'Upload Video', new_show_episode_video_path(episode.show, episode) %>
<% end %>
</td>
<td>
<%= link_to "View", [episode.show, episode] %>
<%= link_to "Edit", edit_show_episode_path(episode.show, episode) if permitted_to? :update, episode %>
<%= link_to "Delete", show_episode_path(episode.show, episode), :confirm => 'Are you sure?', :method => :delete if permitted_to? :delete, episode %>
</td>
</tr>
<% end %>
any help will be greatly appreciated!
I figured it out, made the following changes:
Views:
<tr id="<%= episode.id %>">
and new controller
def sort
Episode.all.each do |e|
if position = params[:episodes].index(e.id.to_s)
e.update_attribute(:position, position + 1) unless e.position == position + 1
end
end
render :nothing => true, :status => 200
end
finally added this to my model:
acts_as_list
default_scope order('position')
let me know if anyone's having similar issues.