Develop Reference

Add value to parseInt object not working

Here is my javascript:
$('#vendorid').change(function(){
var vendno = $(this).val();
var data_String;
var numpo = parseInt($('#numvendpo').val());
data_String = 'vendorid='+vendno;
$.post('ft-vendno.php',data_String,function(data){
var data = jQuery.parseJSON(data);
$('#vendponum').val($('#vendponum').val() + data +'-'+ numpo+1);
});
});
My output is:
As seen in the bottom textbox the last number "-31" should be "-4" (3+1). Whereas it is currently adding it as a string. I can't seem to figure out the problem though.
The top textbox is #numvendpo and the bottom is #vendponum forgive me for my confusing variable names.

When you do:
some_string + numpo + 1
As the first value is a string, you are concatenating values from right to left, so you would first concatenate numpo (converting it to string) to some_string, and then 1, also as a string.
You can fix that making sure the operations are done in the right order, so one option might be to add parenthesis around numpo + 1:
$('#vendponum').val($('#vendponum').val() + data + '-' + (numpo + 1));
You can also do the sum before:
var numpo = parseInt($('#numvendpo').val()) + 1;
Or use template strings:
$('#vendponum').val(`${ $('#vendponum').val() }${ data }-${ numpo + 1 }`);
Here you can see what works and what does not:
const $vendorid = $('#vendorid');
const $numvendpo = $('#numvendpo');
const $outputParenthesis = $('#outputParenthesis');
const $outputBefore = $('#outputBefore');
const $outputTemplate = $('#outputTemplate');
const $outputWrong = $('#outputWrong');
$('#vendorid, #numvendpo').on('input', () => {
const vendno = $vendorid.val();
const numpo = parseInt($numvendpo.val());
if (isNaN(numpo)) {
return;
}
const numpoPlusOne = numpo + 1;
$outputParenthesis.text(vendno + '-' + (numpo + 1));
$outputBefore.text(vendno + '-' + numpoPlusOne);
$outputTemplate.text(`${ vendno }-${ numpo + 1 }`);
$outputWrong.text(vendno + '-' + numpo + 1);
});
body,
input {
font-family: monospace;
}
input {
border: 3px solid black;
padding: 8px;
width: 200px;
}
p {
margin: 8px 0;
}
.label {
display: inline-block;
width: 222px;
text-align: right;
margin-right: 8px;
}
.wrong {
color: red;
}
<input placeholder="Vendor ID" id="vendorid" type="text" />
<input placeholder="Num Vendor PO" id="numvendpo" type="text" />
<p><span class="label">WITH PARENTHESIS: </span><span id="outputParenthesis"></span></p>
<p><span class="label">SUM BEFORE: </span><span id="outputBefore"></span></p>
<p><span class="label">TEMPLATE LITERAL: </span><span id="outputTemplate"></span></p>
<p class="wrong"><span class="label">WRONG: </span><span id="outputWrong"></span></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

How to storage values in local storage using jquery?

How can dynamic values be stored in the local storage?
I have a seat layout. How i can store only the selected seat numbers in the local storage, but not reserved seats?
My code can be seen below:
$(function() {
var settings = {
rows: 6,
cols: 10,
rowCssPrefix: 'row-',
colCssPrefix: 'col-',
seatWidth: 35,
seatHeight: 35,
seatCss: 'seat',
selectedSeatCss: 'selectedSeat',
selectingSeatCss: 'selectingSeat'
};
var init = function(reservedSeat) {
var str = [],
seatNo, className;
for (i = 0; i < settings.rows; i++) {
for (j = 0; j < settings.cols; j++) {
seatNo = (i + j * settings.rows + 1);
className = settings.seatCss + ' ' + settings.rowCssPrefix + i.toString() + ' ' + settings.colCssPrefix + j.toString();
if ($.isArray(reservedSeat) && $.inArray(seatNo, reservedSeat) != -1) {
className += ' ' + settings.selectedSeatCss;
}
str.push('<li class="' + className + '"' +
'style="top:' + (i * settings.seatHeight).toString() + 'px;left:' + (j * settings.seatWidth).toString() + 'px">' +
'<a title="' + seatNo + '">' + seatNo + '</a>' +
'</li>');
}
}
$('#place').html(str.join(''));
var SeatNo = document.getElementById('place').value;
localStorage.setItem('SeatNum', SeatNo);
};
//case I: Show from starting
//init();
//Case II: If already booked
var bookedSeats = [5, 10, 25];
init(bookedSeats);
$('.' + settings.seatCss).click(function() {
if ($(this).hasClass(settings.selectedSeatCss)) {
alert('This seat is already reserved');
} else {
$(this).toggleClass(settings.selectingSeatCss);
}
});
$('#btnShow').click(function() {
var str = [];
$.each($('#place li.' + settings.selectedSeatCss + ' a, #place li.' + settings.selectingSeatCss + ' a'), function(index, value) {
str.push($(this).attr('title'));
});
alert(str.join(','));
})
$('#btnShowNew').click(function() {
var str = [],
item;
$.each($('#place li.' + settings.selectingSeatCss + ' a'), function(index, value) {
item = $(this).attr('title');
str.push(item);
});
alert(str.join(','));
})
});
<div>
<div id="holder">
<ul id="place">
</ul>
</div>
<div style="">
<ul id="seatDescription">
<li style="background:url('available_seat_img.gif') no-repeat scroll 0 0 transparent;">Available Seat</li>
<li style="background:url('booked_seat_img.gif') no-repeat scroll 0 0 transparent;">Booked Seat</li>
<li style="background:url('selected_seat_img.gif') no-repeat scroll 0 0 transparent;">Selected Seat</li>
</ul>
</div>
<div style="width:100%">
<input type="button" id="btnShowNew" value="Show Selected Seats" />
<input type="button" id="btnShow" value="Show All" />
</div>
</div>

localStorage is an object within the global 'window' object, and therefore will normally be available throughout your javascript code. It pretty much behaves like a dictionary, you create, retrieve, edit and remove key:value pairs. jQuery will not be necessary.
It is also imporant to remember that localStorage only support string values, and simply saving an array would not work.
// When modifying bookedSeats:
var bookedSeatsCacheString = JSON.stringify(bookedSeats);
localStorage.setItem('bookedSeats', bookedSeatsCacheString);
// Init code:
var bookedSeatsCache = localStorage.getItem('bookedSeats');
var bookedSeats = JSON.parse(bookedSeatsCache);
if(!Array.isArray(bookSeats))
bookedSeats = [];
init(bookedSeats);
EDIT: I edited your code to make this work with localStorage
$(function () {
var settings = {
rows: 6,
cols: 10,
rowCssPrefix: 'row-',
colCssPrefix: 'col-',
seatWidth: 35,
seatHeight: 35,
seatCss: 'seat',
selectedSeatCss: 'selectedSeat',
selectingSeatCss: 'selectingSeat'
};
var init = function (reservedSeat) {
var str = [], seatNo, className;
for (i = 0; i < settings.rows; i++) {
for (j = 0; j < settings.cols; j++) {
seatNo = (i + j * settings.rows + 1);
className = settings.seatCss + ' ' + settings.rowCssPrefix + i.toString() + ' ' + settings.colCssPrefix + j.toString();
if ($.isArray(reservedSeat) && $.inArray(seatNo, reservedSeat) != -1) {
className += ' ' + settings.selectedSeatCss;
}
str.push('<li class="' + className + '"' +
'style="top:' + (i * settings.seatHeight).toString() + 'px;left:' + (j * settings.seatWidth).toString() + 'px">' +
'<a title="' + seatNo + '">' + seatNo + '</a>' +
'</li>');
}
}
$('#place').html(str.join(''));
};
// Init code
var bookedSeatsCache = localStorage.getItem('bookedSeats'),
bookedSeats;
if(typeof bookedSeatsCache === 'string' && bookedSeatsCache.length > 0)
bookedSeats = JSON.parse(bookedSeatsCache);
else
bookedSeats = [];
init(bookedSeats);
$('.' + settings.seatCss).click(function () {
if ($(this).hasClass(settings.selectedSeatCss)){
alert('This seat is already reserved');
}
else{
var seatNum = $(this).attr('title');
bookedSeats.push(seatNum);
localStorage.setItem('bookedSeats', JSON.stringify(bookedSeats));
$(this).toggleClass(settings.selectingSeatCss);
}
});
$('#btnShow').click(function () {
var str = [];
$.each($('#place li.' + settings.selectedSeatCss + ' a, #place li.'+ settings.selectingSeatCss + ' a'), function (index, value) {
str.push($(this).attr('title'));
});
alert(str.join(','));
})
$('#btnShowNew').click(function () {
var str = [], item;
$.each($('#place li.' + settings.selectingSeatCss + ' a'), function (index, value) {
item = $(this).attr('title');
str.push(item);
});
alert(str.join(','));
})
});
#holder{
height:225px;
width:365px;
background-color:#F5F5F5;
border:1px solid #A4A4A4;
margin-left:10px;
}
#place {
position:relative;
margin:7px;
}
#place a{
font-size:0.6em;
}
#place li
{
list-style: none outside none;
position: absolute;
}
#place li:hover
{
background-color:yellow;
}
#place .seat{
background:url("available_seat_img.gif") no-repeat scroll 0 0 transparent;
height:33px;
width:33px;
display:block;
padding:5px;
}
#place .selectedSeat
{
background-image:url("booked_seat_img.gif");
}
#place .selectingSeat
{
background-image:url("selected_seat_img.gif");
}
#place .row-3, #place .row-4{
margin-top:10px;
}
#seatDescription li{
vertical-align: middle;
list-style: none outside none;
color:white;
font-family:'LatoWeb', 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
font-size:13px;
padding-left:28px;
padding-top:14px;
height:35px;
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div id="holder">
<ul id="place">
</ul>
</div>
<div style="">
<ul id="seatDescription">
<li style="background:url('available_seat_img.gif') no-repeat scroll 0 0 transparent;">Available Seat</li>
<li style="background:url('booked_seat_img.gif') no-repeat scroll 0 0 transparent;">Booked Seat</li>
<li style="background:url('selected_seat_img.gif') no-repeat scroll 0 0 transparent;">Selected Seat</li>
</ul>
</div>
<div style="width:100%">
<input type="button" id="btnShowNew" value="Show Selected Seats" />
<input type="button" id="btnShow" value="Show All" />
</div>
</div>

To show Gauge charts on dashboard using jquery in asp.net c#

I want to show the live connected calls on dashboard using jquery in c#. As take example as- no of connected calls of different centers. So Let me know can I show live working on calls..
Thanks in advance..
This code had tried..
string str_caption = "Month Wise Sales";
string str_Sub_caption = "No Of Sales";
string x_axis = "Month";
string y_axis = "No. Of Sales";
string str_xml = null;
str_xml = #"<graph caption='" + str_caption + #"' subCaption='" + str_Sub_caption + #"' decimalPrecision='0'
pieSliceDepth='30' formatNumberScale='0' xAxisName='" + x_axis + #"' yAxisName='" + y_axis + #"' rotateNames='1' >";
int i = 0;
foreach (DataRow dr in dt.Rows)
{
str_xml += "<set name='" + dr[0].ToString() + "' value='" + dr[1].ToString() + "' color='" + color[i] + #"' "
+ " link="JavaScript:myJS('" + dr["x_month"].ToString() + ", " + dr["no_of_sales"].ToString() + "'); "/>";
i++;
}
str_xml += "</graph>";
FCLiteral1.Text = FusionCharts.RenderChartHTML("Bootstrap/FusionCharts/FCF_Doughnut2D.swf", "", str_xml, "mygraph1",
graph_width, graph_height, false);
This is aspx code..
<asp:Literal ID="FCLiteral1" runat="server"></asp:Literal>

After Bit of struggle, I succeed to show live calls using javascript in asp.net c#. This is C sharp code, which I have called on page load.
public void sales_rpt()
{
string sql_data = "Select grp.Group_Name,count(ccls.caller_id) as x_calls from currentcalls as ccls "
+ " inner join group_master as grp on ccls.group_id=grp.ID where ccls.`Status`=1";
ViewState["data"] = sql_data;
DataSet ds = BusinessLogic.GetDataSet(ViewState["data"].ToString());
dt = ds.Tables[0];
str.Append(#"<script type=text/javascript>
google.load( *visualization*, *1*, {packages:[*corechart*], callback:drawChart});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Group_Name');
data.addColumn('number', 'x_calls');
data.addColumn({type: 'string', role: 'style'});
data.addRows(" + dt.Rows.Count + ")");
lbl_grp_name.Text = dt.Rows[0]["Group_Name"].ToString();
for(int i = 0; i <= dt.Rows.Count - 1; i++)
{
str.Append("data.setValue( " + i + "," + 0 + "," + "'" + dt.Rows[i]["Group_Name"].ToString() + "'");
str.Append("data.setValue( " + i + "," + 0 + "," + "'" + dt.Rows[i]["x_calls"].ToString() + "'");
}
str.Append(#" var view = new google.visualization.DataView(data);
view.setColumns([0, {
sourceColumn: 1,
calc: function () {return 0;}
}, 2]);
var chart = new google.visualization.ColumnChart(document.getElementById('g2'));
google.visualization.events.addOneTimeListener(chart, 'ready', function () {
chart.draw(data, {
width: 700,
height: 400,
title: 'Group Name',
color: '#0092CB',
min: 0,
max: '100',
hAxis: {
title: 'Connected Calls',
label: 'No Of Calls'
},
animation: {
duration: 1000
}
});
});
chart.draw(view, {
width: 700,
height: 400,
title: 'Group Name',
color: '#0092CB',
hAxis: {
title: 'Connected Calls',
label: 'No Of Calls'
},
animation: {
duration: 1000
}
});
}
</script>");
FCLiteral1.Text = str.ToString().TrimEnd(',').Replace('*','"');
}
Before above code, you need to add javascript and style of graph on aspx page.
<style>
body {
text-align: left;
}
#g1 {
width:600px; height:400px;
display: inline-block;
margin: 1em;
}
#g2, #g3, #g4 {
width:100px; height:80px;
display: inline-block;
margin: 1em;
}
p {
display: block;
width: 450px;
margin: 2em auto;
text-align: left;
}
</style>
//JavaScript
<script>
var graph;
window.onload = function () {
var graph = new JustGage({
id: "g2",
value: getRandomInt(0, 100),
min: 0,
max: 100,
title: "Connected Calls",
label: "No of Calls"
});
}
</script>
// Form Code, where you need to call id of of g1,g2,g3.
<div id="g2" class="form-horizontal">
<asp:Literal ID="FCLiteral1" runat="server"></asp:Literal>
</div>

Get sub-pixel value of height or width in JavaScript

I am trying to get the height of an element with it's sub-pixel value.
Take this example:
var small = document.getElementById('small');
var big = document.getElementById('big');
var result1 = document.getElementById('result1');
result1.innerHTML = 'Small height: ' + small.clientHeight + '; width: ' + small.clientWidth + '; ratio: ' + (small.clientWidth / small.clientHeight) + ';';
result2.innerHTML = 'Big height: ' + big.clientHeight + '; width: ' + big.clientWidth + '; ratio: ' + (big.clientWidth / big.clientHeight) + ';';
body {
margin: 0;
}
img {
float: left;
}
#small {
width: 3px;
}
div {
float: left;
font-size: 2rem;
}
<div id="result1"></div>
<div id="result2"></div>
<img src="https://i.imgur.com/580DosTm.jpg" id="small">
<img src="https://i.imgur.com/580DosTm.jpg" id="big">
Basically you can see the same image in a big size and in a very small size. In the small one the width is set to 3px. The real height is 4.51562px (can be seen in Chrome developer tools). However, JavaScript rounds the number to 5px.
What I am actually behind is the ratio. As you can see the difference ends up being big:
Small image ratio: 0.6 (3/5)
Big image ratio: 0.6625 (212/320)
The big image ratio is the real one because the image is not resized. Is there some way to get the real values of the height, or at least something closer than a per pixel unit round?

The closest value I can get is reading the computed CSS properties with getComputedStyle and getting the values from there:
parseFloat(getComputedStyle(small));
It gives me in Chrome:
Small height: 4.51562
Small ratio: 0.6643605972158861 (3/4.51562)
var small = document.getElementById('small');
var big = document.getElementById('big');
var result1 = document.getElementById('result1');
var smallStyles = getComputedStyle(small);
var smallHeight = parseFloat(smallStyles.height);
var smallWidth = parseFloat(smallStyles.width);
result1.innerHTML = 'Small height: ' + smallHeight + '; width: ' + smallWidth + '; ratio: ' + (smallWidth / smallHeight) + ';';
result2.innerHTML = 'Big height: ' + big.clientHeight + '; width: ' + big.clientWidth + '; ratio: ' + (big.clientWidth / big.clientHeight) + ';';
body {
margin: 0;
}
img {
float: left;
}
#small {
width: 3px;
}
div {
float: left;
font-size: 2rem;
}
<div id="result1"></div>
<div id="result2"></div>
<img src="https://i.imgur.com/580DosTm.jpg" id="small">
<img src="https://i.imgur.com/580DosTm.jpg" id="big">

jQuery .each() to get values of multiple divs

I am trying to calculate the width and difference between the widths of a div and the text in a page where the same div class appears multiple times.
The HTML:
<div class="post_content">
<div class="container">
<div class="title-holder">
<h2>Crossword Book</h2>
</div>
</div>
<div class="container">
<div class="title-holder">
<h2>Crossword Bookstore Ltd. – Elgin Road</h2>
</div>
</div>
</div>
The CSS:
div.container{
width: 130px;
}
div.title-holder {
width: 130px;
height:20px;
text-align:center;
background: silver;
overflow:hidden;
position: relative;
}
div.title-holder a {
position: relative;
white-space:nowrap;
left: 0px;
}
div.image{
background: brown;
width: 100%;
height: 100px;
}
The following script outputs the result of the first div correctly and then repeats the same result. It is not going to the next div and giving the next result.
$("div.title-holder").each(function(){
var m = $(this).width();
var n = $("div.title-holder h2 a.widget-title").width();
var o = m - n;
alert ("title: " + m + " text: " + n + " diff: " + o);
});
The output is
First Alert: title: 130 text: 108 diff: 22
Second Alert: title: 130 text: 108 diff: 22
What I am looking to achieve is
First Alert: title: 130 text: 108 diff: 22
Second Alert: title: 130 text: 258 diff: -128

The value of:
var n = $("div.title-holder h2 a.widget-title").width();
Will always be the same (the first result of that selector query). You need to do:
var n = $(this).find("a.widget-title").width();
or more specific:
var n = $("div.title-holder").children("h2").children("a.widget-title").width();

Use like this:
var n = $(this).find("h2 a.widget-title").width();

jsBin demo
$("div.title-holder").each(function(){
var m = $(this).width();
var n = $("h2 a.widget-title", this).width();
var o = m - n;
alert("title: " + m + " text: " + n + " diff: " + o);
});