[Continuing from: Reading Spark Variables with Your Own HTML File]
Hello BKO,
I have adopted your code to display my data into my HTML table, it doesn’t seem to be working for me, I have 5 particle devices and I would like to display the 5 devices data to be published like the events in console.particle.io Here is my HTML code.
<div class="container">
<div class="tab tab-1">
<table id="table" border="1">
<tr>
<th>eTrap List</th>
<th>Location</th>
<th>Start Date</th>
<th>End Date</th>
<th>Motion Detected</th>
<th>Battery Level</th>
</tr>
</table>
</div>
<div class="tab tab-2">
Select eTrap:<br>
<select id= "trap" name="eTraps">
<option value="eTrap 1">eTrap 1</option>
<option value="eTrap 2">eTrap 2</option>
<option value="eTrap 3">eTrap 3</option>
<option value="eTrap 4">eTrap 4</option>
</select><br><br>
location:<br>
<input type="text" id= "local" name="location" value="Melbourne">
<br>
</form>
Start date:<br>
<input type="date" id="myDate" value="2017-12-09"><br><br>
End date:<br>
<input type="date" id="myDateEnd" value="2014-02-09"><br>
<button onclick="addHtmlTableRow();">Add</button>
<button onclick="editHtmlTbleSelectedRow();">Edit</button>
<button onclick="removeSelectedRow();">Remove</button>
<button onclick="getliveupdate();">Live status</button>
</div>
</div>
<script>
var rIndex,
table = document.getElementById("table");
// check the empty input
function checkEmptyInput()
{
var isEmpty = false,
trap = document.getElementById("trap").value,
local = document.getElementById("local").value,
myDate = document.getElementById("myDate").value,
myDateEnd = document.getElementById("myDateEnd").value;
if(local === ""){
alert("Location Connot Be Empty");
isEmpty = true;
}
else if(myDate === ""){
alert("Start Date Connot Be Empty");
isEmpty = true;
}
else if(myDateEnd === ""){
alert("End Date Connot Be Empty");
isEmpty = true;
}
return isEmpty;
}
// add Row
function addHtmlTableRow()
{
// get the table by id
// create a new row and cells
// get value from input text
// set the values into row cell's
if(!checkEmptyInput()){
var newRow = table.insertRow(table.length),
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
cell4= newRow.insertCell(3),
cell5 =newRow.insertCell(4),
cell6= newRow.insertCell(5),
trap = document.getElementById("trap").value,
local = document.getElementById("local").value,
myDate = document.getElementById("myDate").value,
myDateEnd = document.getElementById("myDateEnd").value;
cell1.innerHTML = trap;
cell2.innerHTML = local;
cell3.innerHTML = myDate;
cell4.innerHTML = myDateEnd;
// call the function to set the event to the new row
selectedRowToInput();
}
}
// display selected row data into input text
function selectedRowToInput()
{
for(var i = 1; i < table.rows.length; i++)
{
table.rows[i].onclick = function()
{
// get the seected row index
rIndex = this.rowIndex;
document.getElementById("trap").value = this.cells[0].innerHTML;
document.getElementById("local").value = this.cells[1].innerHTML;
document.getElementById("myDate").value = this.cells[2].innerHTML;
document.getElementById("myDateEnd").value = this.cells[3].innerHTML;
};
}
}
selectedRowToInput();
function editHtmlTbleSelectedRow()
{
var trap = document.getElementById("trap").value,
local = document.getElementById("local").value,
myDate = document.getElementById("myDate").value,
myDateEnd = document.getElementById("myDateEnd").value;
if(!checkEmptyInput()){
table.rows[rIndex].cells[0].innerHTML = trap;
table.rows[rIndex].cells[1].innerHTML = local;
table.rows[rIndex].cells[2].innerHTML = myDate;
table.rows[rIndex].cells[3].innerHTML = myDateEnd;
}
}
function removeSelectedRow()
{
table.deleteRow(rIndex);
// clear input text
document.getElementById("trap").value = "";
document.getElementById("local").value = "";
document.getElementById("myDate").value = "";
document.getElementById("myDateEnd").value = "";
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8">
<span id="battery">Waiting for data...</span><br>
<span id="tstamp"></span><br>
function getlivestatus(){
for(var i = 1; i < table.rows.length; i++)
{
table.rows[i].onclick = function()
{
if (cell1.innerHTML == "eTrap 1"){
window.setInterval(function() {
var deviceID = "570040001951353338363036";
var accessToken = "fd4b398a359ad4c81c3589bb3d90ad5c3959bd91";
var varName = "battery";
requestURL = "https://api.spark.io/v1/devices/" + deviceID + "/" + varName + "/?access_token=" + accessToken;
$.getJSON(requestURL, function(json) {
document.getElementById("battery").innerHTML = json.result;
cell5.innerHTML= document.getElementById("battery").innerHTML;
});
},5000);
}
}}
}
</script>
</body>
Kindly please help me to pass my variable into the particular cell in the HTML page
Thanks,
Gowtham
