I was fiddling with Meteor and ran into some strange behaviour. My templates are rendered but after rendering immediately cleared again.
My template file; /client/game.html
<head>
<title>test</title>
</head>
<body>
<h1>test h1</h1>
{{> board}}
</body>
<template name="board">
<table class="gameboard">
{{#each model}}
{{>row}}
{{/each}}
</table>
</template>
<template name="row">
<tr>
{{#each this}}
{{>cell this}}
{{/each}}
</tr>
</template>
<template name="cell">
<td>
{{answer this}}
</td>
</template>
A client file; /client/client.js
Meteor.startup(function () {
Meteor.call('generateBoard');
});
Template.cell.answer = function (cell) {
console.log(cell.question.answer);
return cell.question.answer;
}
Template.board.model = function () {
//var game = Games.findOne(Session.get("selected"));
var game = Games.findOne(Session.get("selected"));
if(game) {
console.log(game);
return game.board;
}
}
and my model file /model.js
Games = new Meteor.Collection("games");
Meteor.methods({
generateBoard: function(){
var boardSize = 64;
var rowSize = cellSize = Math.sqrt(boardSize);
var board = [];
var row = [];
for(var rows = 0; rows < rowSize; rows++) {
for (var cells = 0; cells < cellSize; cells++) {
var cell = {
question: Meteor.call("generateAnswer"),
state: 0,
player: null
}
row.push(cell);
}
board.push(row);
row = [];
}
var gameId = Games.insert({
board: board
});
Session.set("selected", gameId);
},
generateAnswer: function(){
var lowerNumber = 2;
var higherNumber = 8;
var firstNumber = Math.round( Math.random() * (higherNumber - lowerNumber) ) + lowerNumber;
var secondNumber = Math.round(Math.random() * (higherNumber - lowerNumber) ) + lowerNumber;
return {
firstNumber: firstNumber,
secondNumber: secondNumber,
answer: firstNumber * secondNumber
};
}
});
Why do I get this behaviour? What did I do weird?
You should not use Session.set outside a Meteor.isClient-check
Related
I have fetched data from spreadsheet on html table in reverse order so that latest entry will be on top row. But it is showing all entries on a single page.I want to paginate it (make a subsequent calls using offset and limit ) so that first 20 entries will be on first page then next 20 on second page and so on.but i dont have any idea how to it. That would be great if anyone could help me out.thanks in advance..!
Below is my javascript code:
enter code here
$(document).ready(function () {
refreshTable();
setInterval(refreshTable, 5000);
});
function refreshTable() {
$.getJSON('https://spreadsheets.google.com/feeds/list/1f1GTmf6-73sgdrKux5DTSbCsI1ObygfWjmUNQIxMqc0/2/public/full?alt=json', function (data) {
var trHTML = '';
var latest = '';
var len = data.feed.entry.length;
for (var i = len-1; i > 0 ; --i)
{
var time = data.feed.entry[i].gsx$time.$t;
var date = data.feed.entry[i].gsx$date.$t;
var level = data.feed.entry[i].gsx$level.$t;
var citycode = data.feed.entry[i].gsx$citycode.$t;
var latest = data.feed.entry[len-1].gsx$level.$t;
if( citycode = "1001" )
{
var city = "nagpur";
}
var voltage = data.feed.entry[i].gsx$voltage.$t ;
trHTML += '<tr bgcolor="#e6f7ff"><th>' + time + '</th><td>' + date +
'</th><td>' + level + '</td><th>' + citycode + '</th><td>' + city + '</th><td>' + voltage + '</td></tr>';
}
console.log(trHTML);
$('#tableContent').html(trHTML);
var trHTML = '';
console.log(latest);
$('#tableContent1').html(latest);
var latest = '';
});
}
```
Actually when i mereged your code with my code.i got some issues.I tried a lot but unable to do it.can you fix it sir.so that it will work fine.
<html>
<head>
<title>Live Monitoring Of Water</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Linking custom css sheet -->
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body background="back.jpg">
<!-- page heading -->
<div class="div1" style="border-style: ridge">
<h1 style="color:red; text-align:center;"> FLOOD MONITORING</h1>
</div>
<!-- page navbar -->
<div class="navbar">
Graph
Map
Table
</div>
<hr style="height:3px;border-width:0;color:rgb(148, 96, 96);background-color:gray">
<!-- Current data table -->
<table id="currentDataTable" cellspacing='0' cellpadding='10'" border='1' , bgcolor='white' border-bottom: 2px solid #ddd;>
<h1 > Current Data </h1>
<tr bgcolor='gray' align=" right">
<th align="right">Real time water level value :-</th>
</tr>
<tbody style="font-weight:bold ; width: 100px ; height: 30px;" cellspacing='0' cellpadding='10' align="center"
id="currentDataTableBody"></tbody>
</table>
<!-- Live water level data table -->
<hr style="height:3px;border-width:0;color:rgb(148, 96, 96);background-color:gray">
<center>
<h1>Live Water Level Data</h1>
</center>
<center>
<table id="liveWaterLevelTable" cellspacing='0' cellpadding='10' border='1' , bgcolor='white' border-bottom: 1px
solid #ddd;>
<tr bgcolor='gray'>
<th>Sr</th>
<th>Time</th>
<th>Date</th>
<th>Water level</th>
<th>City code</th>
<th>Voltage</th>
</tr>
<tbody id="liveWaterLevelTableBody"></tbody>
</table>
<!-- pagination -->
<div class="pagination">
<button class="paginate-button" type="button" onclick="paginate(-1)"><</button>
<button class="paginate-button" type="button" onclick="paginate(1)">></button>
<select onchange="setPagiSize(this)"></select>
<input type="checkbox" id="chkReverse" onchange="setOrder(this)" />
<label for="chkReverse">Reverse order</label>
</div>
</center>
<hr style="height:3px;border-width: 1;color:gray; background-color:gray">
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
refreshTable();
setInterval(refreshTable, 5000);
});
// global variables
const
$pagination = $('.pagination'),
$tbody = $('#liveWaterLevelTableBody'),
pageSizeOptions = [10, 15, 25, 50, 100],
url = 'https://spreadsheets.google.com/feeds/list/1f1GTmf6-73sgdrKux5DTSbCsI1ObygfWjmUNQIxMqc0/2/public/full?alt=json';
let entry = [],
data = [],
page = 0,
pageSize = pageSizeOptions[1],
pageSizeMax = 1,
isReversed = false,
change = true;
function refreshTable() {
$.getJSON(url, function (response) {
entry = response.feed.entry;
data = entry;
pageSizeMax = Math.ceil(entry.length / pageSize);
if(change === true){
paginate(1);
change = false;
}
let option = '';
var trHTML = '';
var latest = '';
var len = response.feed.entry.length;
var latest = response.feed.entry[len - 1].gsx$level.$t;
// display page size options
$.each(pageSizeOptions, (_, o) => {
option += `<option value="${o}"${o === pageSize ? " selected" : ""}>${o}</option>`;
});
$pagination.find('select').html(option);
$('#currentDataTableBody').html(latest);
});
}
// function to apply pagination
function paginate(pageAdd) {
page += pageAdd;
if (page < 1) {
page = 1;
return false;
}
if (page > pageSizeMax) {
page = pageSizeMax;
return false;
}
fillTable();
}
// function to set order as reversed or not
function setOrder(e) {
isReversed = !isReversed;
data = entry.reverse();
page = 1;
fillTable();
}
// function to change page size
function setPagiSize(e) {
page = 1;
pageSize = $(e).val();
pageSizeMax = Math.ceil(entry.length / pageSize);
fillTable();
}
// function to fill table in each pagination
function fillTable() {
const
len = isReversed ? data.length + 1 : 0,
pageBase = (page - 1) * pageSize;
let tbody = '';
$.each(data.slice(pageBase, pageSize * page), (i, o) => {
tbody += `<tr>
<td>${Math.abs(len - ((i + 1) + pageBase))}</td>
<td>${o.gsx$time.$t}</td>
<td>${o.gsx$date.$t}</td>
<td>${o.gsx$level.$t}</td>
<td>${o.gsx$citycode.$t}</td>
<td>${o.gsx$voltage.$t}</td>
</tr>`;
});
$tbody.html(tbody)
}
</script>
</html>```
I'm new at JavaScript to be patient with me. I'm trying to get this little "game" to work where you drag cards in the drop box, and when you drop the joker card in it says "victory", otherwise it says "betrayal" for the other cards. Everything works great except the part where it says "victory" when you drop the joker. I feel like I have tried everything. The joker card is $(#black_joker)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag and Drop</title>
<link rel="stylesheet" href="dragdrop.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<h1>Find the Joker and eliminate him!</h1>
<br>
<input type="button" value="Deal!" id="dealDeck">
<br>
<br>
<br>
<br>
<br>
<div id='dropZone' class='dropZone'> <center>Find the joker card and drop it here to get rid of him once and for all! </center></div>
<script src="dragdrop.js"></script>
</body>
</html>
// JAVASCRIPT
$(document).ready(function () {
$(init);
function init() {
$('.dropZone').droppable({
drop: handleDropEvent
});
}
for (var a=0, all = 53; a < all; a++){
$('#dealDeck').click(function () {
dealCard(randomCard());
});
}
var cardsInDeck = new Array();
var numberOfCardsInDeck = 53;
cardsInDeck[0] = "C1";
cardsInDeck[1] = "C2";
cardsInDeck[2] = "C3";
cardsInDeck[3] = "C4";
cardsInDeck[4] = "C5";
cardsInDeck[5] = "C6";
cardsInDeck[6] = "C7";
cardsInDeck[7] = "C8";
cardsInDeck[8] = "C9";
cardsInDeck[9] = "C10";
cardsInDeck[10] = "C11";
cardsInDeck[11] = "C12";
cardsInDeck[12] = "C13";
cardsInDeck[13] = "D1";
cardsInDeck[14] = "D2";
cardsInDeck[15] = "D3";
cardsInDeck[16] = "D4";
cardsInDeck[17] = "D5";
cardsInDeck[18] = "D6";
cardsInDeck[19] = "D7";
cardsInDeck[20] = "D8";
cardsInDeck[21] = "D9";
cardsInDeck[22] = "D10";
cardsInDeck[23] = "D11";
cardsInDeck[24] = "D12";
cardsInDeck[25] = "D13";
cardsInDeck[26] = "H1";
cardsInDeck[27] = "H2";
cardsInDeck[28] = "H3";
cardsInDeck[29] = "H4";
cardsInDeck[30] = "H5";
cardsInDeck[31] = "H6";
cardsInDeck[32] = "H7";
cardsInDeck[33] = "H8";
cardsInDeck[34] = "H9";
cardsInDeck[35] = "H10";
cardsInDeck[36] = "H11";
cardsInDeck[37] = "H12";
cardsInDeck[38] = "H13";
cardsInDeck[39] = "S1";
cardsInDeck[40] = "S2";
cardsInDeck[41] = "S3";
cardsInDeck[42] = "S4";
cardsInDeck[43] = "S5";
cardsInDeck[44] = "S6";
cardsInDeck[45] = "S7";
cardsInDeck[46] = "S8";
cardsInDeck[47] = "S9";
cardsInDeck[48] = "S10";
cardsInDeck[49] = "S11";
cardsInDeck[50] = "S12";
cardsInDeck[51] = "S13";
cardsInDeck[52] = "black_joker";
function dealCard(i) {
if (numberOfCardsInDeck == 0) return false;
var img = document.createElement("img");
img.src = "http://deetito.com/images/" + cardsInDeck[i] + ".png";
img.id = cardsInDeck[i];
img.width = 100;
img.height = 125;
document.body.appendChild(img);
$('#C1').draggable();
$('#C2').draggable();
$('#C3').draggable();
$('#C4').draggable();
$('#C5').draggable();
$('#C6').draggable();
$('#C7').draggable();
$('#C8').draggable();
$('#C9').draggable();
$('#C10').draggable();
$('#C11').draggable();
$('#C12').draggable();
$('#C13').draggable();
$('#D1').draggable();
$('#D2').draggable();
$('#D3').draggable();
$('#D4').draggable();
$('#D5').draggable();
$('#D6').draggable();
$('#D7').draggable();
$('#D8').draggable();
$('#D9').draggable();
$('#D10').draggable();
$('#D11').draggable();
$('#D12').draggable();
$('#D13').draggable();
$('#H1').draggable();
$('#H2').draggable();
$('#H3').draggable();
$('#H4').draggable();
$('#H5').draggable();
$('#H6').draggable();
$('#H7').draggable();
$('#H8').draggable();
$('#H9').draggable();
$('#H10').draggable();
$('#H11').draggable();
$('#H12').draggable();
$('#H13').draggable();
$('#S1').draggable();
$('#S2').draggable();
$('#S3').draggable();
$('#S4').draggable();
$('#S5').draggable();
$('#S6').draggable();
$('#S7').draggable();
$('#S8').draggable();
$('#S9').draggable();
$('#S10').draggable();
$('#S11').draggable();
$('#S12').draggable();
$('#S13').draggable();
$('#black_joker').draggable();
removeCard(i);
}
function randomCard() {
return Math.floor(Math.random() * numberOfCardsInDeck);
}
function handleDropEvent(event, ui) {
var card = ui.draggable;
if (card == 'black_joker') {
$('#dropZone').html('victory!');}
else {
$('#dropZone').html('betrayal!');}
/*$('#dropZone').droppable({
drop: function(event, ui) {
ui.draggable.remove();
}
});*/
$("#dropZone").on('mouseover', function() {
//alert('bye draggable!');
//ui.draggable.draggable('disable');
//$(this).droppable('disable');
ui.draggable.remove();
})
}
function removeCard(c) {
// simply make every higher numbered card move down 1
for (j = c; j <= numberOfCardsInDeck - 2; j++) {
cardsInDeck[j] = cardsInDeck[j + 1];
}
numberOfCardsInDeck--;
}
});
I believe you are comparing object with string.
ui.draggable should be jQuery object
let card = ui.draggable.attr("id");
compare it with your id or other attribute you wanted to use should work
I have the following sample grid in which I push some new values to the bound list.
Press anywhere in the grid to push a new value to the grid.
As you can see in the fiddle, the updated cell will have a green color for 500 ms, and all the re-rendered elements will have yellow color.
The question is how we should configure Vue component so that it only re-render the changed element instead of them all?
If you look at the fiddle console output, you will see numbers like (13001, 26001, ...) and this equals to the number of all cells (1000 rows x 13 columns).
.yellow {
background-color: yellow;
}
.pushed {
background-color: lightgreen
}
<script src="https://unpkg.com/vue">
var globalCount = 0;
</script>
<head>
<title>Vue Render Performance</title>
</head>
<div id="demo">
<demo-grid :data="gridData" :columns="gridColumns"> </demo-grid>
</div>
<script type="text/x-template" id="grid-template">
<table #click="pushData()">
<thead>
<tr>
<th v-for="key in columns">
{{key}}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(entry, i) in data">
<td v-for="(key, j) in columns" :id="'a'+i +'_'+j">
{{renderMe(entry[key], 'a'+i +'_'+j)}}
</td>
</tr>
</tbody>
</table>
</script>
<script>
const data = newData(1000);
var renderedCount = 0;
var startTime = performance.now();
Vue.component('demo-grid', {
props: {
data: Array,
columns: Array,
renderCount: Object,
},
template: '#grid-template',
methods: {
renderMe(el, id) {
const elm = document.getElementById(id);
if (elm) {
elm.className += " yellow";
}
if (!renderedCount) {
renderedCount = 0
} else {
renderedCount++;
}
return el;
},
pushData() {
debugger
var push = function() {
let cols = ["Col1", "Col2", "Col3", "Col4", "Col5", "Col6", "Col7", "Col8", "Col9", "Col10", "Col11", "Col12", "Col13"];
var t0 = performance.now();
for (let i = 0; i < 1; i++) {
let newVal = Math.random() * 10000,
row = Math.round(Math.random() * 1000),
cellIndex = Math.floor(Math.random() * cols.length);
cell = cols[cellIndex];
if (data[row])
data[row][cell] = newVal;
var el = document.querySelector('tbody tr:nth-child(' + row + ') td:nth-child(' +
cellIndex +
')');
if (el) {
el.className = 'pushed';
el.scrollIntoView();
var t = function() {
if (el) {
el.className = '';
}
clearTimeout(t);
};
setTimeout(t, 500);
}
console.log('pushed to cell [' + row + ',' + cellIndex + '] :' + newVal);
console.log('Rendered Count: ' + renderedCount)
renderedCount++;
};
var t1 = performance.now();
console.log(t1 - t0)
};
push();
}
}
});
// bootstrap the demo
var demo = new Vue({
el: '#demo',
data: {
searchQuery: '',
gridColumns: ["Col1", "Col2", "Col3", "Col4", "Col5", "Col6", "Col7", "Col8", "Col9", "Col10", "Col11", "Col12", "Col13"],
gridData: data
}
})
Vue.config.devtools = true;
function newData(count) {
const data = [];
for (let i = 0; i < count; i++) {
data.push({
Col1: "Record",
Col2: 818959475,
Col3: 467587749,
Col4: 438,
Col5: 439,
Col6: 440,
Col7: 2.1,
Col8: 436.2,
Col9: 2.4,
Col10: 5770,
Col11: 5771,
Col12: 5772,
Col13: 5773
});
}
return data;
}
</script>
When you don't want to re-render and entire list of information, the typical way to handle it is to push the things that need to re-render into a component. Here is an updated version of your code that pushes the rows into a component and renders a fraction of what you were doing before.
Vue.component("demo-row", {
props:["entry", "columns", "rowIndex"],
template:`
<tr>
<td v-for="(key, j) in columns" :id="'a'+rowIndex +'_'+j">
{{renderMe(entry[key], 'a'+rowIndex +'_'+j)}}
</td>
</tr>
`,
methods:{
renderMe(el, id) {
const elm = document.getElementById(id);
if (elm) {
elm.className += " yellow";
}
if (!renderedCount) {
renderedCount = 0
} else {
renderedCount++;
}
return el;
},
}
})
Vue.component('demo-grid', {
props: {
items: Array,
columns: Array
},
template: '#grid-template',
methods: {
pushData() {
this.$parent.pushData(this.$parent.gridItems, this.$parent.gridColumns);
}
}
});
Example codepen.
Note, I did not change anything else that you are doing that could probably be done more idiomatically in Vue, I just wanted to demonstrate that there is no need for everything to re-render.
http://jsfiddle.net/Kapil_B/vz3r0bs3/9/
In this fiddle I am trying to update the formattedPrice2 value on changing the rates in the textbox.I am able to get the updated price but the price1 is not getting updated value.
Can you please tell me the reason why the price1 value is not getting updated? That is why formattedPrice2 is not getting updated.
<select data-bind="options: $root.newLot, value: dropdownAValue, optionsText: 'type'"></select>
<table align="left">
<thead>
<tr align="left">
<th width="10%">Pair</th>
<th width="10%">Rate</th>
<th width="10%">formattedPrice2</th>
</tr>
</thead>
<!-- Todo: Generate table body -->
<tbody data-bind="foreach:curArray">
<tr>
<td data-bind="text: rate().pair"></td>
<td> <input data-bind="value: myQuote, valueUpdate:'afterkeydown'" />
</td>
<td data-bind="text: formattedPrice2"></td>
</tr>
</tbody>
</table>
// Class to represent a row in the price calculation grid
function PriceCalculation(rate, myQuote, newPairs, nl, currentlotvalue) {
var self = this;
self.rate = ko.observable(rate);
self.newPairs = newPairs;
self.nl = ko.observable(nl);
self.myQuote = ko.observable(myQuote);
self.currentlotvalue = currentlotvalue;
self.leverage = self.rate().leverage;
self.formattedPrice2 = ko.computed(function () {
var cur = self.rate().pair;
//var price = self.rate().price;
var price = self.myQuote();
var pip = 1;
var lot1 = self.currentlotvalue;
var JPlot = lot1 * 100;
if (cur.indexOf("/USD") > -1) {
pip = lot1;
} else if (cur.indexOf("/JPY") > -1) {
pip = JPlot / price;
} else if (cur.indexOf("USD/") > -1) {
pip = lot1 / price;
} else {
var base = cur.split("/")[0];
var counter = cur.split("/")[1];
for (var i = 0; i < self.newPairs.length; i++) {
var base1 = self.newPairs[i].pair.split("/")[0];
var counter1 = self.newPairs[i].pair.split("/")[1];
var price1 = self.newPairs[i].price;
alert(price1);
if (base1 == "USD") {
if ((self.newPairs[i].pair) == ("USD/" + counter)) {
pip = lot1 / price1;
}
} else if (counter1 == "USD") {
if ((self.newPairs[i].pair) == (counter + "/USD")) {
pip = lot1 * price1;
}
}
}
}
//alert(pip? "$" + pip.toFixed(2): "None");
return pip ? "$" + pip.toFixed(2) : "None";
});
}
// Overall viewmodel for this screen, along with initial state
function ReservationsViewModel() {
var self = this;
self.curArray = ko.observableArray([]);
self.rates = ko.observableArray([]);
// Non-editable catalog data - would come from the server
self.rates = [ {
pair: "EUR/HUF",
price: 318.815,
leverage: "20:1*"
}, {
pair: "USD/HUF",
price: 265.13,
leverage: "20:1*"
}, {
pair: "XAG/USD",
price: 15.734,
leverage: "1:1*"
}, {
pair: "XAU/USD",
price: 1184.43,
leverage: "1:1*"
}];
self.newLot = [{
type: "Micro",
lotSize: 0.1
}, {
type: "Mini",
lotSize: 1
}, {
type: "Standard",
lotSize: 10
}];
self.newlots = ko.observableArray(self.newLot);
self.dropdownAValue = ko.observable(self.newlots);
var currentlotvalue = 0.1;
self.dropdownAValue.subscribe(function () {
if (self.dropdownAValue().type == "Micro") {
//alert("Micro");
currentlotvalue = 0.1;
} else if (self.dropdownAValue().type == "Mini") {
//alert("Mini");
currentlotvalue = 1;
} else if (self.dropdownAValue().type == "Standard") {
//alert("Standard");
currentlotvalue = 10;
}
var newItems = ko.utils.arrayMap(self.rates, function (item) {
return new PriceCalculation(item, item.price, self.rates, self.newLot[0], currentlotvalue)
});
self.curArray(newItems);
},this, "change");
}
ko.applyBindings(new ReservationsViewModel());
How to give Input tag Attribute type button value at Runtime in Meteor JS as shown below:
newButton = document.createElement('input');
newButton.value = ''; - Here value i need like as i.e , val ="{{btnValue}}"
I'm not familiar with Meteor JS, so please offer any suggestions.
Html Code I need like as below in Runtime JS:
// Manually Creating button
<input type="button" id="no" val ="{{btnValue}}">
My HTML Code :
<head>
<title>TICTACTOE App 1.3</title>
</head>
<body>
{{> uname}}
{{> main}}
{{> games }}
</body>
<template name="uname">
<h1>Welcome to TICTACTOE App</h1>
<p id="pname"><b>User Name :</b> <input type="text" id="uname" ></p>
</template>
<template name="main">
<p id="pno"><b>Layout Number :</b> <input type="text" id="no" ></p>
<div name="main"></div>
</template>
<template name="games">
{{#each game}}
<div>{{turn}} </div>
<div> {{wturn}}</div>
<div>{{bval}}</div>
{{/each}}
</template>
Meteor JS:
Counts = new Meteor.Collection('count');
TurnData= new Meteor.Collection('tdata');
BtnValues= new Meteor.Collection('btnvalues');
var x = "X";
var o = "O";
var Whoseturn = "";
var no;
var newButton;
var count = 0;
var IsWin = false;
var IsTurn = true;
var val = "";
var ButtonValue= "";
var btnval;
if (Meteor.isClient)
{
Template.main.helpers
({
btnValue: function()
{
return BtnValues.findOne();
}
});
Template.main.events
({
'click input' : function ()
{
// template data, if any, is available in 'this'
var name = document.getElementById('uname');
console.log(name.value);
var btnid = event.currentTarget.id;
ButtonValue = btnid;
btnval = document.getElementById(btnid);
console.log(btnid);
if(btnval.value == '' && btnid != "no" )
{
calculateTurn();
console.log(Whoseturn);
btnval.value = Whoseturn;
var myBtnData = BtnValues.findOne();
BtnValues.update( {_id: myBtnData._id},{ $set:{bval : btnval} });
}
}
});
Template.main.events
({
'keydown input#no' : function ()
{
// template data, if any, is available in 'this'
if (event.which == 13)
{
// 13 is the enter key event
console.log("You pressed enter key");
no = document.getElementById('no');
count = 0;
var myTurnData = Counts.findOne();
Counts.update( {_id: myTurnData._id},{ $set:{turn : count } });
if(no.value != '')
{
document.getElementById('pname').style.visibility = 'hidden';
document.getElementById('pno').style.visibility = 'hidden';
UI();
}
}
}
});
}
function UI()
{
console.log("*** UI() ***");
for(var i = 1 ; i <= no.value ; i++)
{
//var body=document.getElementsByTagName('body')[0];
var body = document.getElementsByName('main')[0];
for(var j = 1 ; j <= no.value ; j++)
{
newButton = document.createElement('input');
newButton.type = 'button';
newButton.id = 'btn'+i+j;
newButton.value = '';////Here value i need like as val ="{{btnValue}}
body.appendChild(newButton);
}
var newline = document.createElement('br');
body.appendChild(newline) ;
}
}
function calculateTurn()
{
var myTurnData = Counts.findOne();
count = myTurnData.turn;
console.log("count="+count);
count = count + 1;
console.log("updated count="+count);
Counts.update( {_id: myTurnData._id},{ $set:{turn : count } });
if(count <= 9)
{
var TData = TurnData.findOne();
IsTurn = true;
if(count % 2 == 0)
{
Whoseturn = o ;
TurnData.update( {_id: TData._id},{ $set:{wturn : Whoseturn } });
}
else
{
Whoseturn = x ;
TurnData.update( {_id: TData._id},{ $set:{wturn : Whoseturn } });
}
}
else
{
IsTurn = false;
console.log(" >= 9");
}
}
if (Meteor.isServer)
{
Meteor.startup(function ()
{
// code to run on server at startup
Counts.insert({turn : count});
TurnData.insert({wturn : Whoseturn});
BtnValues.insert({bval : val});
});
}