How to use socket.io with only EJS without JS code? - javascript

Here is my code in EJS which receives data in real time from my node server based on certain parameters.
<!DOCTYPE html>
<html lang="en">
<head>
<% include ../partials/head %>
</head>
<body class="container">
<header>
<% include ../partials/header %>
</header>
<main>
<script src="/socket.io/socket.io.js"></script>
<table cellpadding="2" cellspacing="2" border="0" width="100%" align="center">
<thead>
<tr>
<th>Name</th>
<th>IsOnline</th>
<th>Location</th>
</tr>
</thead>
<tbody id="tableData"></tbody>
</table>
<script type="text/javascript">
var socket = io();
socket.on('status', function(data){
var k = '<tbody>'
for(i = 0;i < data.length; i++){
k+= '<tr>';
k+= '<td>' + data[i].url + '</td>';
k+= '<td align="justify">' + data[i].name + '</td>';
k+= '<td align="justify" width="30%">' + data[i].status + '</td>';
k+= '<td align="justify" width="30%">' + data[i].loc + '</td>';
k+= '</tr>';
}
k+='</tbody>';
document.getElementById('tableData').innerHTML = k;
});
</script>
</main>
<footer>
<% include ../partials/footer %>
</footer>
</body>
</html>
This code works perfectly fine but,
I have 2 questions :
I can not figure out a clean way to change text color of value of IsOnline based on condition eg: if user is offline then text should be Offline in red color else green.
Also I've created this table using js and html as data variable was not available in EJS so is there some way to get this variable. I do not want to send data using res.render() or ejs.compile()

The following works for me:
for(i = 0;i < data.length; i++){
var color = data[i].status === "Offline" ? "red" : "green"; // If status is 'Offline', use red. If not use green
k+= '<tr>';
k+= '<td>' + data[i].url + '</td>';
k+= '<td align="justify">' + data[i].name + '</td>';
k+= '<td align="justify" width="30%" style="color: ' + color + '">' + data[i].status + '</td>';
k+= '<td align="justify" width="30%">' + data[i].loc + '</td>';
k+= '</tr>';
}

Related

Reiterate through classes inside a class inside a div jquery

Suppose I have the following structure:
<div id="table">
<div class="row">
<div class="cell">a</div>
<div class="cell">b</div>
</div>
<div class="row">
<div class="cell">d</div>
<div class="cell">c</div>
</div>
</div>
How do I reiterate through them in a way that I create the same structure but with <table> instead of <div id="table">, <tr> instead of <div class="row"> and <td> with the content of the div instead of <div class="cell">;
I tried doing something like
let topics_table = '<table>'
$('#table > .row').each(function(){
topics_table += '<tr>'
$(this + ' .cell').each(function(that){
topics_table += '<td>' + that.text() + '</td>'
})
topics_table += '</tr>';
})
topics_table += '</table>`
But I get an error...
$(this + ' .cell')
Should be
$(this).find('.cell')
// or
$('.cell', this)
You're trying to concatenate a string to a DOM Element.
.each(function(that){
topics_table += '<td>' + that.text() + '</td>'
})
^^ that is also an issue, because jQuery passes the index in as the first argument, not the element.
.each(function(index, that){
topics_table += '<td>' + that.innerText + '</td>'
})

I want to parse larger decimals to smaller from JSON to Html table

'I created table in Html and table show decimals like is shown in my JSON file(remainingstorage and totalstorage).I want to table show only 5 decimals and not like now 12.I try to parse but without success.Can someone help me how to fix this ?'
[{"acceptingcontracts":true,"netaddress":"22.169.100.43","remainingstorage":119722213376,"totalstorage":119722213376}]
'And my html code'
$(document).ready(function() {
$.getJSON("sample.json", function(data) {
var employee_data = '';
$.each(data, function(key, value) {
employee_data += '<tr>';
employee_data += '<td>' + value.netaddress + '</td>';
employee_data += '<td>' + value.totalstorage + '</td>';
employee_data += '<td>' + value.remainingstorage + '</td>';
employee_data += '<td>' + value.acceptingcontracts + '</td>';
employee_data += '</tr>';
});
$('#employee_table').append(employee_data);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="table-responsive">
<h1>View</h1>
<br />
<table class="table table-bordered table-striped" id="employee_table">
<tr>
<th>Name</th>
<th>Total storage</th>
<th>Remaining storage</th>
<th>View</th>
</tr>
</table>
</div>
</div>
Convert your Number to string then extract first 5 character fromt it then convert it to Number :
Number(value.remainingstorage.toString().substring(0, 5));

How to get checked checkbox table value in jquery

In my table I have 2 rows please see my screen shot,suppose I click first check box means I want to take that id ** and **to_area value in jquery how can do this,I tried but I can not get please help some one
$(document).ready(function() {
$('#chemist_allotment_btn').click(function() {
if ($('#chemist_allotment_form').valid()) {
$.ajax({
url: 'update_chemist_bulk_transfer.php',
type: 'POST',
data: $('form#chemist_allotment_form').serialize(),
success: function(data) {
var res = jQuery.parseJSON(data); // convert the json
console.log(res);
if (res['status'] == 1) {
var htmlString = '';
$.each(res['data'], function(key, value) {
htmlString += '<tr>';
htmlString += ' <td class="sorting_1"><div class="checkbox-custom checkbox-success"><input type="checkbox" id="checkboxExample3" name="getchemist" class="getchemist" value="' + value.id + '"><label for="checkboxExample3"></label></div></td>';
htmlString += '<td>' + value.id + '</td>';
htmlString += '<td>' + value.name + '</td>';
htmlString += '<td>' + value.area + '</td>';
htmlString += '<td>' + value.to_area + '</td>';
htmlString += '<td>' + value.address + '</td>';
htmlString += '</tr>';
});
$('#SampleDT tbody').empty().append(htmlString);
$('#get_to_area').click(function() {
var id = $('input[name=getchemist]:checked').val();
if ($(".getchemist").prop('checked') == true) {
alert(id);
alert(value.to_area);
} else {
alert('Please Check');
}
});
} else {
$('#SampleDT tbody').empty().append('No Datas Found');
}
},
});
return false;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="well white">
<table id="SampleDT" class="datatable table table-hover table-striped table-bordered tc-table">
<thead>
<tr>
<th>Select</th>
<th>Id</th>
<th>Doctor Name</th>
<th>From Area</th>
<th>To Area</th>
<th>Address</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<center>
<div class="form-group">
<button type="button" class="btn btn-primary" style="text-align:left;" id="get_to_area">Transfer Area</button>
</div>
</center>
</div>
Firstly, add classes to each <td>, like <td class='id'>[Your id]</td>
Similarly for all the elements doctor-name, to-area, etc and a class to each <tr> like row-select
Somewhat like this:
<tr class="row-select">
<td class="select">...</td>
<td class="id">...</td>
<td class="to-area">...</td>
.
.
.
</tr>
Use jQuery like this:
$('.row-select').click(function(){
var id,toArea,checkBox;
id = $(this).find('.id').html(); //get the ID field
toArea = $(this).find('.to-area').html(); //get the to-area field
checkBox = $(this).find('.select > input');
checkbox.prop('checked',!checkbox.prop('checked'));
})
This code will get you he value no mater where you click on the row, and also invert the selection on the checkbox
To get the values of rows selected when the form is submitted run a loop like this
$('.row-select input:checked').each(function(){
var id,toArea,checkBox;
id = $(this).closest('tr').find('.id').html(); //get the ID field
toArea = $(this).closest('tr').find('.to-area').html(); //get the to-area field
})
EDIT
All together:
$(document).ready(function() {
$('#btnSubmit').click(function() {
$('.row-select input:checked').each(function() {
var id, name;
id = $(this).closest('tr').find('.id').html();
name = $(this).closest('tr').find('.name').html();
alert('ID: ' + id + " | Name: " + name);
})
})
$('#btnSelectAll').click(function() {
$('.row-select input').each(function() {
$(this).prop('checked', true);
})
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1>
<tr class="row-select">
<td class="check">
<input type="checkbox" />
</td>
<td class="id">12</td>
<td class="name">Jones</td>
</tr>
<tr class="row-select">
<td class="check">
<input type="checkbox" />
</td>
<td class="id">10</td>
<td class="name">Joseph</td>
</tr>
</table>
<button id="btnSelectAll">Select all</button>
<button id="btnSubmit">Get Value</button>
Process step-by-step:
Give the td you need some classes (from-a & to-a);
Initialize an empty array all (we'll store the data inside it later on);
Create a function that is triggered by the checkbox change
Inside the function you need to know which checkbox has changed, what's the state of it, what tr does it belong to and at the end what are the TO AREA and FROM AREA values.
If the state = checked we will add the values to the all (our small data storage);
If the state = not-checked we will remove the value from the all array;
Finally when we are done with selecting and deselecting rows by pressing the button we can get the values of the selected rows.
var all = [];
$('input[type="checkbox"]').change(function(){
var checkbox = $(this);
var state = checkbox.prop('checked');
var tr = checkbox.parents('tr');
var from = tr.children('.from-a').text();
var to = tr.children('.to-a').text();
if(state){
all.push(from + ' -> ' + to);
}else{
var index = all.indexOf(from + ' -> ' + to);
all.splice(index, 1);
}
})
$('#get_to_area').click(function(){
alert(all);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="well white">
<table id="SampleDT" class="datatable table table-hover table-striped table-bordered tc-table">
<thead>
<tr>
<th>Select</th>
<th>Id</th>
<th>Doctor Name</th>
<th>From Area</th>
<th>To Area</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr id="1">
<td><input type="checkbox"></td>
<td>1</td>
<td>Nick</td>
<td class="from-a">Kosur</td>
<td class="to-a">Nath Pari</td>
<td>Address</td>
</tr>
<tr id="2">
<td><input type="checkbox"></td>
<td>2</td>
<td>John</td>
<td class="from-a">Rusok</td>
<td class="to-a">iraP htaN</td>
<td>sserddA</td>
</tr>
</tbody>
</table>
<center>
<div class="form-group">
<button style="text-align:left;" id="get_to_area">Transfer Area</button>
</div>
</center>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>
This is just the basic concept, you can modify it to suit your needs, I'll be happy to help you if you get stuck.
You can also use this fiddle:
In JS:
$('#get_to_area').click(function () {
var id = $('input[name=getchemist]:checked').val();
if ($('input[name=getchemist]').is(':checked')) {
var ID = $('input[name=getchemist]').parent().parent().siblings('td.chkid').html();
var TO_Area = $('input[name=getchemist]').parent().parent().siblings('td.toarea').html();
}
else {
alert('Please Check');
}
});
In Html:
if (res['status'] == 1) {
var htmlString = '';
$.each(res['data'], function (key, value) {
htmlString += '<tr>';
htmlString += ' <td class="sorting_1"><div class="checkbox-custom checkbox-success"><input type="checkbox" id="checkboxExample3" name="getchemist" class="getchemist" value="' + value.id + '"><label for="checkboxExample3"></label></div></td>';
htmlString += '<td class="chkid">' + value.id + '</td>';
htmlString += '<td>' + value.name + '</td>';
htmlString += '<td>' + value.area + '</td>';
htmlString += '<td class="toarea">' + value.to_area + '</td>';
htmlString += '<td>' + value.address + '</td>';
htmlString += '</tr>';
});
I'm guessing you need values of each td whose checbox are checked. This piece of code should get you started.
As you can see, Code loops through each checkbox which is checked, gets contents inside its corresponding td.
var Result = new Array();
$('.checkbox-custom input[type="checkbox"]:checked').each(function(){
var _this = $(this).closest('tr').find('td');
var id= $(_this).eq(0);
var name = $(_this).eq(1);
................... //Similar way for the others
Result.Push(id,name,....)
});

Adding id to a specific button using jQuery

I'm new to jQuery and JS. So I have this task to create tabel row using a dialog form. On every row the last cell must contain a button. My question is how can I add id for this specific button. I've tried selecting the button and adding .attr('id','delete'), but this changes the id of the button that opens the dialog.
So how can I add id only to the newly created button?
< script type = "text/javascript" >
function validateForm(form) {
var errors = [];
$(form.elements).each(function() {
var $this = $(this);
if (!$this.val()) {
var msg = $this.prev().html() + ' е задължително поле';
errors.push(msg);
}
});
return errors;
}
function saveForm(form) {
var nextNumber = $('table tr').length;
var rowTpl = '<tr>' +
'<td>' + nextNumber + '</td>' +
'<td>' + $('#brand', form).val() + '</td>' +
'<td>' + $('#model', form).val() + '</td>' +
'<td>' + $('#year', form).val() + '</td>' +
'<td>' + $('#kms', form).val() + '</td>' +
'<td>' + '<button>' + '<span>' + 'Delete' + '</span>' + '</button>' + '</td>' +
'</tr>';
$('table').append(rowTpl);
}
$(function() {
$('#add-btn').button({
icons: {
primary: 'ui-icon-circle-plus'
}
}).on('click', function() {
$('#form-container').dialog('open')
});
$('#form-container').dialog({
autoOpen: false,
modal: true,
buttons: [{
text: 'Save',
click: function() {
var form = $(this).find('form').get(0);
var errors = validateForm(form);
if (errors.length) {
return alert(errors.join("\n"));
}
saveForm(form);
form.reset();
$(this).dialog('close');
}
}, {
text: 'Close',
click: function() {
$(this).find('form').get(0).reset();
$(this).dialog('close');
}
}]
});
})
$('#delete').button({});
$("#delete").click(function() {
$(this).parents('tr').first().remove();
});
< /script>
<style type="text/css"> table {
border-collapse: collapse;
}
th {
padding: 0.2em;
}
td {
margin: 0.2em;
padding: 0.2em;
text-align: center;
border: 1px solid grey;
}
.ui-widget-header,
.ui-widget-content {
padding: 0.8em;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
</style>
<div id="container" class="ui-widget">
<div class="ui-widget-header ui-helper-clearfix">
<h3 class="float-left">ALL CARS</h3>
<button class="float-right" id="add-btn">
<span>Add New Address</span>
</button>
</div>
<div class="ui-widget-content">
<table width="100%">
<tr>
<th>#</th>
<th>Марка</th>
<th>Модел</th>
<th>Година</th>
<th>Километри</th>
<th>Премахни</th>
</tr>
<tr>
<td>1</td>
<td>BMW</td>
<td>i8</td>
<td>2015</td>
<td>10 000</td>
<td>
<button class="float-center" id="delete">
<span>Delete</span>
</button>
</td>
</tr>
</table>
</div>
<div id="form-container" title="Add new car">
<form action="">
<div>
<label for="brand">Марка</label>
<input type="text" id="brand" />
</div>
<div>
<label for="model">Модел</label>
<input type="text" id="model" />
</div>
<div>
<label for="year">Година</label>
<input type="number" id="year" />
</div>
<div>
<label for="kms">Километри</label>
<input type="number" id="kms" />
</div>
</form>
</div>
</div>
Thank you!
Add id to the button in your rowTpl variable like following.
var rowTpl = '<tr>' +
'<td>' + nextNumber + '</td>' +
'<td>' + $('#brand', form).val() + '</td>' +
'<td>' + $('#model', form).val() + '</td>' +
'<td>' + $('#year', form).val() + '</td>' +
'<td>' + $('#kms', form).val() + '</td>' +
'<td>' + '<button id="delete'+nextNumber+'">' + '<span>' + 'Delete' + '</span>' + '</button>' + '</td>' +
'</tr>';
It will add button id as delete1, delete2, delete3,......
ids are singular so you should not be setting the same id on multiple elements. Second the onclick you are adding with that id is not going to be attached to the button that you create after that code runs. Just like if the phone rings and you are not there, you will not answer it.
Use event delegation to detect what one was clicked and you can use closest to get access to the row the button resides in.
//attach the click handler to the table and listen for a click on a button
$("table").on("click", "button", function () {
var button = $(this); //The button that was clicked
var row = button.closest("tr"); //The row the button is in.
row.remove(); //delete the row
});
id must be unique in the entire document, so setting id to "delete" for all of these buttons is incorrect. You can set a class. When you are creating it, you could just create it as <button class='delete'>, and then use $(".delete") to find all buttons.
You can also set the action directly in the code:
var rowTpl = '<tr>' +
'<td>' + nextNumber + '</td>' +
'<td>' + $('#brand', form).val() + '</td>' +
'<td>' + $('#model', form).val() + '</td>' +
'<td>' + $('#year', form).val() + '</td>' +
'<td>' + $('#kms', form).val() + '</td>' +
'<td>' + '<button onclick="$(this).closest(\'tr\').remove();">' + '<span>' + 'Delete' + '</span>' + '</button>' +
'</td>' +
'</tr>';

jQuery Append removing tags

I try to use the jQuery Append method but its removing tags (tr, td) of my html code which I want to append. Why is it removing these and how can i force this method just to append and not to analyse my code?
Here is an example file
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script type="text/javascript">
$(document).on('click', '#button1', function () {
var htmlAppend = '';
htmlAppend = htmlAppend + '<input type="hidden" name="content0" value="' + 'hiddenvalues' + '"/>' + '<tr>' +
'<td>' + 'content1' + '</td>' +
'<td>' + 'content2' + '</td>' +
'<td>' + 'content3' + '</td>' +
'<td><input style="width: 300px" type="text" name="content4"/></td>' +
'</tr>';
$("#ScenarioCompetenceRatings").append(htmlAppend);
});
</script>
</head>
<body>
<button id="button1">Add Row</button>
<table>
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th style="width: 300px">Column4</th>
</tr>
</thead>
<tbody id="ScenarioCompetenceRatings">
</tbody>
</table>
You are generating invalid markup. You should put the hidden input element in a td element. tbody element can only have tr children.
is this what you are trying to build? check on the fiddle i have created
http://jsfiddle.net/FWkd2/enter code here
to check my fiddle

Categories