Develop Reference

Using ejs input for js if statement

I have a code problem I need to do for a class. I have a database that has users, another table has the titles which the user has access to. I'm trying to make a page where they can edit a user and when they click the button the form fills automatically with the id, first name and last name fine.
Now I'm trying to show what access the user selected has access to at the moment. And what I thought would just be a simple if statement has turned into a headache, it seems I can't access the id variable inside the html code that I want to insert and when I try to put the if statement outside, it says errors with the http headers, like it is sending too many renders. How can I accomplish this?
So here the code works but it loads the tabs of all of the users but I would like to filter the results based on the id.
<tbody>
<% all_users_to_modify.forEach(function(row){ %>
<tr>
<td>
<button class="btn btn-primary m-b-0"
onClick="fillForm('<%= row.id %>','<%= row.f_name %>','<%= row.l_name %>');";
onclick="moneyCalc('<%= row.id %>')" >
<%= row.id %>
</button>
</td>
<td><%= row.f_name %></td>
<td><%= row.l_name %></td>
<td><%= row.email %></td>
<td><%= row.phone_number %></td>
</tr>
<% }); %>
</tbody>
<table class="table table-striped table-bordered nowrap">
<thead>
<tr>
<th>Acceso</th>
</tr>
</thead>
<tbody id="lastResult">
</tbody>
</table>
function moneyCalc(id) {
'use strict';
var id = document.getElementById('id').value;
if (id) {
var html_to_insert = `
<% list_of_all_users_tabs.forEach(function(row1){ %>
<tr>
<td><%= row1.tab_name %> </td>
</tr>
<% }); %>
`;
lastResult.innerHTML += html_to_insert;
}
}
Now this is what I would like to do, in each row of the list_of_all_users_tabs it has a column that is the user_id and the other column is tab_name. So I have had two ideas but neither seem to work.
First idea was to put a while loop to compare the user_id in the db and the input id however I get: Error [ERR_HTTP_HEADERS_SENT]:
function moneyCalc(id) {
'use strict';
var id = document.getElementById('id').value;
if (id) {
while(list_of_all_users_tabs.user_id == id) {
var html_to_insert = `
<% list_of_all_users_tabs.forEach(function(row1){ %>
<tr>
<td><%= row1.tab_name %> </td>
</tr>
<% }); %>
`;
lastResult.innerHTML += html_to_insert;
}
}
}
Second idea had an if statement in the html code however it says id not defined:
function moneyCalc(id) {
'use strict';
var id = document.getElementById('id').value;
if (id) {
var html_to_insert = `
<% list_of_all_users_tabs.forEach(function(row1){ %>
<% if(row1.id == id) { %>
<tr>
<td><%= row1.tab_name %> </td>
</tr>
<% } %>
<% }); %>
`;
lastResult.innerHTML += html_to_insert;
}
}

Wrap your javascript code into <script> tag.
<script>
//Your code goes here
</script>

You need to set you header status to 200 in your route file.
res.json({
success: 'updated',
status: 200
})
And write you JS code inside <script> </script> tags only.

How to get a MySQL Value as a colour in EJS?

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

select2 breaks with ajax/jquery on pagination

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?

jQuery datatables dynamically changing is not removing correct rows in Ruby on Rails

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.

How to make multiple tr function in JavaScript/Rails?

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.