Develop Reference

How do I know which cell is highlighted in jexcell javascript library?

I want to merge the cells marked with jexcel. I don't know how to do that. More specifically, I want to merge cells into a dynamic state and write them into merged cells in MySQL. How to do it
<div id="example"></div>
<script>
var data = [
['', 'Ford', 'Tesla', 'Toyota', 'Honda'],
['2017', 10, 11, 12, 13],
['2018', 20, 11, 14, 13],
['2019', 30, 15, 12, 13]
];
var container = document.getElementById('example');
var hot = new Handsontable(container, {
data: data,
rowHeaders: true,
colHeaders: true,
filters: true,
dropdownMenu: true,
contextMenu: true
});
</script>

Your Question is not clear but I'll try to answer it to the best of my ability.
if I ignore the example you provided and focus on jExcel, we can merge cells using setMerge and for that we need to know:
the address of the first cell
the numbers of selected rows
numbers of selected columns
we can extract this info from:
$("#spreadsheet").jexcel("getSelectedRows", true);
$("#spreadsheet").jexcel("getSelectedColumns", true);
in theory this alone should work, but jExcel deselects cells when it loses focus (ie when user clicks a button) that's why I used a workarround to store the selection of cells in an object, and later used that object to merge cells.
HTML:
<div id="spreadsheet"></div>
<br>
<input id="myB" type="button" value="Merge Selected" />
Javascript:
var mySlection = {};
var options = {
minDimensions: [10, 10],
onselection: storeSelection
};
$(document).ready(function() {
var mySpreadsheet = $("#spreadsheet").jexcel(options);
$("#myB").click(function() {
//Merge Cells using the stored selection
$("#spreadsheet").jexcel("setMerge", mySlection.firstcell, mySlection.colspan, mySlection.rowspan)
/*
you may now store the following values to your MySQL
mySlection.firstcell
mySlection.colspan
mySlection.rowspan
*/
});
});
function storeSelection() {
var sRows = $("#spreadsheet").jexcel("getSelectedRows", true);
var sCols = $("#spreadsheet").jexcel("getSelectedColumns", true);
mySlection.firstcell = [sCols[0], sRows[0]];
mySlection.colspan = sCols.length;
mySlection.rowspan = sRows.length;
}
Requirements: jQuery, jExcel and jSuites v3
Here's a Working Example at CodePen

How to read a HTML table specific row and use the value in javascript

I have a HTML table created and I want to read the value in cell and use it in a javascript.. Can anyone please suggest how to do this...
<table id="table1">
<tr id="1">
<td> pue </td>
<td> 2.86 </td>
</tr>
</table>
<script>
var PUIDValue = document.getElementById("pue").value;
var chartData1 = [
{
"category": "Evaluation",
"excelent": 20,
"good": 20,
"average": 20,
"poor": 20,
"bad": 20,
"limit": 78,
"full": 100,
"bullet": PUIDValue
}
];

I am not sure about the size and which data you expect to use, but you could convert your table to a javascript array and then get the values from there.
Here is an example: Convert html table to array in javascript

mainTr = document.getElementById('1'),
firstTd = mainTr.getElementsByTagName('td')[0]

how can we save html5 canvas image to database in php [duplicate]

This question already has answers here:
How to save an HTML5 Canvas as an image on a server?
(8 answers)
Closed 8 years ago.
I m creating product design page for e-commerce web site...
I need to save designed image from client side to database....
I tried to save but it could'nt save...and html5 canvas is new for me...
My html code..
...................
<div id="clothing-designer">
<div class="fpd-product" title="Shirt Front" data-thumbnail="images/yellow_shirt/front/preview.png">
<img src="./images/yellow_shirt/front/base.png" title="Base Front" data-parameters='{"x": 123, "y": 81, "colors": "#d59211", "price": 20}' />
<img src="./images/yellow_shirt/front/body.png" title="Hightlights" data-parameters='{"x": 249, "y": 80}' />
<img src="./images/yellow_shirt/front/shadows.png" title="Shadow" data-parameters='{"x": 123, "y": 81}' />
<span title="Any Text" data-parameters='{"x": 243, "y": 181, "removable": true, "draggable": true, "rotatable": true, "resizable": true, "colors": "#000000"}'>Default Text</span>
<div class="fpd-product" title="Shirt Back" data-thumbnail="images/yellow_shirt/back/preview.png">
<img src="./images/yellow_shirt/back/base.png" title="Base Back" data-parameters='{"x": 123, "y": 81, "colors": "#d59211", "price": 20}' />
<img src="./images/yellow_shirt/back/body.png" title="Hightlights" data-parameters='{"x": 277, "y": 79}' />
<img src="./images/yellow_shirt/back/shadows.png" title="Shadow" data-parameters='{"x": 123, "y": 81}' />
</div>
</div>

You give little info, but here is a brief overview of the process you will need.
A full description of how to get design info from the client to your database is beyond the scope of a Stackoverflow discussion, but this example should get you started with the concepts involved.
Convert the canvas to an imageUrl
If you want to save the canvas content as an image you can use canvas.toDataURL() which returns a DataURL of the canvas in .png format. For example:
var canvas=document.getElementById("myCanvas");
var dataUrl=canvas.toDataURL();
Send that dataUrl back to your server with an AJAX post
$.ajax({
type: "POST",
url: "http://localhost/saveCanvasDataUrl.php",
data: {image: dataUrl}
})
.done(function(respond){console.log("done: "+respond);})
.fail(function(respond){console.log("fail");})
.always(function(respond){console.log("always");})
On the PHP side, save the incoming dataURL to a database:
<?php
if(!isset($_POST["code"])){
die("Post was empty.");
}
$sql="insert into designs(image) values(:image)";
// INSERT with named parameters
$conn = new PDO('mysql:host=localhost;dbname=myDB', "root", "myPassword");
$stmt = $conn->prepare($sql);
$stmt->bindValue(":image",$_POST["image"]);
$stmt->execute();
$affected_rows = $stmt->rowCount();
echo $affected_rows;
?>
Alternatively...
With this all said, it might be more useful to save the components of the design that the user created rather than an image of that design.
Create a javascript object containing the specific info about the design:
var item1={
product:"shirt",
color:"#d59211",
price:20,
text:"Default Text",
textX:243,
textY:181
}
Use JSON to convert that object into a string
var item1Json=JSON.stringify(item1);
Then post that useful design data to your database instead of the image.

You can use HTML5 Canvas' toDataURL() which according to the docs:
Returns a data: URL containing a representation of the image in the format specified by type (defaults to PNG)
It is used like this:
var canvas = document.getElementById('thecanvaselement');
// ...maybe some more canvas drawing operations here
var url = canvas.toDataURL();
The results (stored in the url variable) can then be sent back to the server using AJAX and then saved to your database like you would normally do.

set value in javascript from a jsf value

In this javascript function I am trying to set max from the backingbean's max value. This is using jsf.
Using the value as I do. Will result in the chart being empty. So I assume Max is null/0. Instead of the expected value of 6100.
max: #{teamChart.maxResult}
Edit: Added the complete code for the Chart. Note that setting max inside the barChart will not give the correct functionality.
<p:commandButton value="Visa diagram" update="chart" oncomplete="PF('dlg').show()" />
<p:dialog header="Selected Values" modal="true" showEffect="fade" hideEffect="fade" widgetVar="dlg">
<p:barChart id="chart" value="#{teamChart.CreateChart(serviceTeam.teamLists)}"
rendered="#{not empty serviceTeam.teamLists}" legendPosition="ne"
title="Lagresultat" animate="true" zoom="true" min="0" max="#{teamChart.maxResult}" xaxisLabel="År och vecka"
style="height:500px;width:900px;" extender="ext">
<script type="text/javascript">
function ext(){
this.cfg.legend = {
show:true,
placement: 'outsideGrid'
};
this.cfg.axes.yaxis = {
tickInterval: 500,
markSize: 40,
max: #{teamChart.maxResult},
min: 0,
tickOptions: {
formatString: '%d'
}
};
}
</script>
</p:barChart>
</p:dialog>

Using Variable Within JavaScript Object Literal

Basically, I'm having trouble getting information from an input box and using that variable within an object literal.
Here is my code:
$("document").ready(function() {
function updateEvent(){
render();
}
function render() {
//get values from input
var gallons = $("#gallons").val();
var electricity = $("#electricity").val();
var energy = $("#energy").val();
var figure = new Highcharts.Chart({
series: [{
name: 'Throttle',
data: [0, 0, 30 , 0, energy, 30, 0, 0] //Variables will not work in here, no specific error but data doesn't show
}, {
name: 'Power',
data: [30, 30 , 30, 30, 30, 30, 30, 30]
}]
});
I've tried embedding a function and doing other tricks but nothing has worked, I could be doing it wrong, I'm not sure. Is there any way to use a variable within an object literal without completely re-coding the structure.
Any help would be greatly appreciated.

How to get a value from an input box and use that value within an object literal?
function doStuff(){
var realIncome = document.getElementById("income").value;
var objLit= { realIncome: realIncome,
desiredIncome: realIncome * 4 };
console.log(objLit);
document.getElementById("out").innerText =
objLit.realIncome + " " + objLit.desiredIncome;
}
And the HTML
Big Number
<input id="income" name="income" type="number"
placeholder="please enter your desired income">
<button name="calculate" onclick="doStuff()">click me </button>​
Your income <span id="out"></span><br />
Please take a look at my demo code: http://jsfiddle.net/mppAM/2/