I have a Meteor template that uses a dynamic subscription:
var templateId = event.target.value;
Meteor.subscribe('orderTemplateShow', templateId)
templateId changes depending on the select value I choose:
<p><label>Select Template</label></p>
<select id="templateSelect" name="templateSelect">
<option disabled selected> Select Template </option>
{{#each orderTemplates}}
<option value="{{this._id}}">{{this.templateName}}</option>
{{/each}}
</select>
Once I select a template, the template's information renders on a table that I have on the template.
My table:
<table id="templateItems" class="table">
<thead>
<tr>
<th>Product Code</th>
<th>Brand</th>
<th>Description</th>
<th>Member Price</th>
<th>Quantity</th>
<th></th>
</tr>
</thead>
<tbody>
{{#each templateItems}}
<tr>
<td>{{productCode}}</td>
<td>{{brand}}</td>
<td>{{description}}</td>
<td>${{memPrice}}</td>
<td><input type="text" id="qty" value ="{{quantity}}"></td>
<td><button class="btn btn-primary removeCartItem">Remove</button></td>
</tr>
{{/each}}
</tbody>
</table>
</form>
However, when I click on a new template, data from the old template still appears on the table, in addition to data from the new template that I select. Therefore, is there a way for me to dynamically remove data from an old subscription?
Thanks!
When you subscribe to the publication, keep a subscription handle. Then when you want to cancel that subscription, invoke .stop() to cancel it.
var subHandle = Meteor.subscribe('orderTemplateShow', templateId);
...
subHandle.stop()
Related
I have a wait list type application I am creating. I currently have it where my table will populate with the collection. I want to be able to press a button and that row in the table be moved to the bottom of the table. Here is where the table is populated.
<tbody>
{{#each student}}
<tr class="accordion-toggle mainRow"> <!--mainRow if want whole row to change green-->
<td>{{> expandButton}}</td>
<td>{{Name}}</td>
<td>{{PhoneNumber}}</td>
<td>{{VipID}}</td>
<td class="selectionChange">{{> buttonSelections}}</td>
</tr>
<tr>
<td colspan="12" class="hiddenRow">
<div class="accordian-body collapse" id="{{this._id}}">
<table class="table table-striped">
<thead id="innter-table">
<tr class="info">
<th id="inner-heading">Reason for Visit</th>
<th id="inner-heading">Current Major</th>
<th id="inner-heading">Intended Major</th>
<th id="inner-heading">Comments</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ReasonForVisit}}</td>
<td>{{CurrentMajor}}</td>
<td>{{IntendedMajor}}</td>
<td>{{Comments}}</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
{{> autoformModals}}
{{/each}}
</tbody>
Here is the template for the button:
<template name="buttonSelections">
...//other code for different buttons
<button class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-arrow-down"></span>
</button>
... //other code for different buttons
</template>
I know I'll need some type of event for the button. but I'm not sure how to go about getting the item in the collection to move in the collection so that when it populates the table again, it will move to the bottom.
How do I get the collection to reorder itself so that the selected item will move to the end of the collection?
you won't "move" the item in your collection, what you'll do is sort the collection on the client so it shows how you want. i don't see the relevant helper, but it would all look something like this:
<template name="Students">
{{#each student in students}}
{{student.name}}
{{/each}}
</template>
in the JS, it's pretty standard stuff: subscribe to the collection in the onCreated(), then the helper sorts the collection how you want. here, i'm making up a field, "waitListedTime", by which the collection sorts. your button press could timestamp it for the selected student, and the helper would run reactively and your student list would update on screen.
Template.Students.onCreated(function() {
this.subscribe('students');
});
Template.Students.helpers({
students() {
return Students.find({}, {sort: {waitListedTime: 1}});
}
});
This is a table of one of my jsp page. I want to take the selected value of the column empId for a javascript method.
<table class="table table-bordered">
<thead>
<tr>
<th>Employee ID</th>
<th>Employee Name</th>
<th>Casual Leave Balance</th>
<th>Annual Leave Balance</th>
<th>Sick Leave Balance</th>
</tr>
</thead>
<tbody>
<c:forEach var="leavebalances" items="${LeaveAllBalanceList}">
<tr>
<td><dev class="correct" name="empId" onclick="selectempId(this)"> ${leavebalances.empId}</dev></td>
<td>${leavebalances.empId}</td>
<td>${leavebalances.casual}</td>
<td>${leavebalances.annual}</td>
<td>${leavebalances.sick}</td>
</tr>
</c:forEach>
</tbody>
</table>
my javascript code segment
function selectempId(emp){
alert(emp);
}
But It (onclick) doesn't work. There are only methods to get selected values of dynamic dropdowns. Please tell me how to do this.
Thank you.
<dev class="correct" name="empId" onclick="selectempId(this)"> ${leavebalances.empId}</dev>
You don't need ()
You can pass value to javascript. But I don't know the dev tag in html. I think it is div.
<td><div class="correct" name="empId" onclick="selectempId(${leavebalances.empId})"> ${leavebalances.empId}</div></td>
Or you can pass to td's onclick action.
<td onclick="selectempId(${leavebalances.empId})">${leavebalances.empId}</td>
Here, my problem was being unable to pass td's values to javascript function, because there were no unique id's assigned for required td tags (dynamic table). So I gave dynamic ids.
<c:forEach var="leavebalances" items="${LeaveAllBalanceList}">
<tr>
<td id ="${leavebalances.empId}" class="correct" name="empId" onclick="selectEmpId(this.id)">${leavebalances.empId}</td>
<td>${leavebalances.empId}</td>
<td>${leavebalances.casual}</td>
<td>${leavebalances.annual}</td>
<td>${leavebalances.sick}</td>
</tr>
</c:forEach>
/////////////////////javascript function///////////////////////////////
function selectEmpId(val) {
alert(val);
}
I'm working on an app where I need a calendar skeleton (without the standard events) so I can put tables inside each cell, so I'm using the Angular Bootstrap Calendar with custom cell templates. I have everything working fine in terms of displaying the custom template in each cell and being able to navigate between months, but I need to be able to access each individual day and make data available in each one.
Here's my controller:
(function() {
angular.module('myApp')
.controller('calendarController', function($scope, $state, moment, calendarConfig) {
var vm = this;
calendarConfig.templates.calendarMonthCell = 'views/calendar/dayTemplate.html';
calendarConfig.dateFormatter = 'moment';
vm.events = [];
vm.calendarView = 'month';
vm.viewDate = moment().startOf('month').toDate();
$scope.$on('$destroy', function() {
calendarConfig.templates.calendarMonthCell = 'mwl/calendarMonthCell.html';
});
});
})();
and the corresponding dayTemplate.html:
<div class="cal-month-day">
<span
class="pull-right"
data-cal-date
ng-click="calendarCtrl.dateClicked(day.date)"
ng-bind="day.label">
</span>
<!--
<small style="position: absolute; bottom: 10px; left: 5px">
There are {{ day.events.length }} events on this day
</small> -->
<!-- <table class="table table-bordered table-condensed"> -->
<table class="table table-bordered table-condensed">
<thead>
<tr>
<td>Station</td>
<td>Position</td>
<td>Name</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3" align="top">1</td>
<td>Position</td>
<td>Name</td>
</tr>
<tr>
<td>Position</td>
<td>Name</td>
</tr>
<tr>
<td>Position</td>
<td>Name</td>
</tr>
</tbody>
</table>
<table class="table table-bordered table-condensed">
<tbody>
<tr>
<td rowspan="3" align="top">2</td>
<td>Position</td>
<td>Name</td>
</tr>
<tr>
<td>Position</td>
<td>Name</td>
</tr>
<tr>
<td>Position</td>
<td>Name</td>
</tr>
</tbody>
</table>
<table class="table table-bordered table-condensed">
<tbody>
<tr>
<td rowspan="3" align="top">3</td>
<td>Position</td>
<td>Name</td>
</tr>
<tr>
<td>Position</td>
<td>Name</td>
</tr>
<tr>
<td>Position</td>
<td>Name</td>
</tr>
</tbody>
</table>
</div>
When using the calendar as it normally is used, you can see that the days.events object has the data, but I need to access that object, or create my own so I can fill my tables. Is there a simple (or even not so simple) way to do that?
Thanks.
UPDATE: I just went back and read the docs and noticed this
An optional expression that is evaluated on each cell generated for
the year and month views. calendarCell can be used in the expression
and is an object containing the current cell data which you can modify
(see the calendarHelper service source code or just console.log it to
see what data is available). If you add the cssClass property it will
be applied to the cell.
Due to my lack of knowledge, I'm not understanding how to use this to override. If I console.log calendarCell in my calendarController it chokes because that object doesn't exist. If I'm reading this correctly, I can intercept the cell data and modify, but I'm not understanding how.
In this case, RTFM turned out to be the correct answer. Per the docs:
<div ng-controller="CellModifierCtrl as vm">
<ng-include src="'calendarControls.html'"></ng-include>
<mwl-calendar
events="vm.events"
view="vm.calendarView"
view-date="vm.viewDate"
cell-modifier="vm.cellModifier(calendarCell)">
</mwl-calendar>
</div>
goes with this in the controller:
vm.cellModifier = function(cell) {
console.log(cell);
if (cell.label % 2 === 1 && cell.inMonth) {
cell.cssClass = 'odd-cell';
}
cell.label = '-' + cell.label + '-';
};
and voila!, you have access to the data. I'm still trying to figure out how to pass additional data into the function, but I'll open a separate question for that.
I am new to meteor and my background is JDEdwards consultant with 15 years of experience. Recently interested in web application and building small application with meteor. Here is my issue.
I have five rows of data in HTML table with checkbox and it has amount field. I have one input text just before table (Invoice Total:). I would like to select checkbox from table and it will display total value in Invoice Total. I have class in both places. For example, If I select three records with amount 55,10 and 5, Invoice total should be 70. How do I achieve this using meteor client JS. Can I get some help on this?
HTML
<template name="dashboard">
<div class="col-sm-9">
<div class="well">
<h4>Dashboard</h4>
<label class="totalamt">Invoice Total:
<input type="text" value={{invtotal}}>
</label>
<table class="table">
<thead>
<tr>
<th></th>
<th>Company Id</th>
<th>Invoice Id</th>
<th>Amount</th>
<th>Currency</th>
<th>Description</th>
</tr>
</thead>
<tbody>
{{#each invoiceList}}
{{>invoiceRow}}
{{/each}}
</tbody>
</table>
</div>
</div>
</template>
<template name="invoiceRow">
<tr class="success">
<td><input type="checkbox" checked="{{calcamt}}" class="toggle-checked"/></td>
<td>{{division_id}}</td>
<td>{{invoice_id}}</td>
<td>{{amount}}</td>
<td>{{currency}}</td>
<td>{{description}}</td>
</tr>
</template>
**
client JS
**
Router.route('/dashboard',function(){
this.render('dashboard');
Template.dashboard.invoiceList = function(){
return Invoice.find();
}
Template.invoiceRow.events({
'click.toggle-checked':function(evt,tmpl){
}
});
Template.invoiceRow.select_invoice = function(){
return Session.get('select_invoice')
}
})
Thanks,
Kaushik Roy
I have a single column table and each entry of the table is a text area. After user fills out the text area in multiple rows, I want to store the data of each text area in a collection on click of a button. How can I do this in Meteor? The HTML template looks like this:
<table id="myTable" class="table table-bordered">
<thead>
<tr>
<th>Notes</th>
</tr>
</thead>
<tbody>
{{#each items}}
<tr>
<td id="notes">
<textarea rows="4" cols="50">
</textarea>
</td>
</tr>
{{/each}
</tbody>
</table>
You could try to utilize the .each Method of JQuery.
Example:
Template.yourtemplate.events({
'click .button': function(e) {
$("textarea").each(function(i) {
YourCollection.insert($(this).val())
})
}
})