Meteor and Data Binding - meteor

Assume you have a list of items from an object array onRendered. Your list items are buttons with specific css. When you click the button you choose an item to be selected, the button changes its class using jQuery. So, now you grant the user to search within another array and show the results using the same helper function. The result is, you click the first button inside the list and when you start the search the first element of the visible element is always selected because the css value is this there. Meteor only displays data and does not actually render this list again. How can I get rid of the selected button without using jQuery. Any idea?
List with selected button
Result list after search with button that is still selected
Template['brands'].events({
'keyup #brand-filter': function (e,t) {
var search:string = $(e.target).val().toLowerCase(),
liveBrands = LIVEBRANDS.brands || {},
returnBrands = [];
if(search.length > 0)
{
var searchRegex = new RegExp('^' + search.toLowerCase(), 'i');
// iterate over each element in the array
for (var i = 0; i < LIVEBRANDS.brands.length; i++){
// look for the entry with a matching `code` value
if(searchRegex.test(LIVEBRANDS.brands[i].name))
{
returnBrands.push(_.extend(liveBrands[i],{"shortName":"b"}));
}
}
Session.set('collection',returnBrands);
}
else
{
Session.set('collection',originBrandsArry);
}
}});
<template name="ob_brands">
<div class="modal-content flow-text">
{{>order_card data=data}}
<div class="row">
<div class="col l12 m12 s12 center">
{{>ob_title data=data}}
</div>
<p class="col l3 m3 s3"> </p>
<div class="col l6 m6 s6 brand-search input-field">
<i class="ion-ios-search-strong prefix"></i>
<input id="brand-filter" type="text" placeholder="Brands.."/>
</div>
<p class="col l3 m3 s3"> </p>
<div class="col l12 m12 s12 center">
<!--This part is what I am looking for-->
{{#each brands}}
<a class="btn btn-flat active" data-name="{{this.name}}" data-id="{{this.shortName}}{{this.id}}" href="#{{this.id}}">{{this.name}}</a>
{{/each}}
</div>
</div>
</div>
<div class="modal-footer">
</div>

Related

Use checkboxes to add and remove items from a list

I'm working with asp.net core mvc and I have two views, one to edit a profile and another to show the profile. The view to edit the profile has checkboxes and the view to show the profile has a list with the items that got selected in the edit view. Whenever I edit the profile, all the checkboxes are unselected. I want that whenever I'm on the EditProfile view, the items that were on the ShowProfile view get selected and the others unselected. If I select a checkbox, that item gets added to the list and if I unselect a previous selected item, that item gets removed from the list. Since I'm a beginner, I have no idea how to do this working with both views. I did multiple things and it didn't work
Part of the ShowProfile view
#model ModifyProfile
#{
}
<div class="card">
<div class="card-body">
<a class="btn btn primary"href="\ProfileDetails\EditProfile">Edit</a>
</div>
</div>
<div class="card-body">
<h3 class="mb-3">Interests</h3>
<div class="mb-3">
<div class="text">Interests:</div>
#if (Model.InterestProfile != null){
<ul>
#foreach(InterestProfile interestProfile in Model.InterestProfiles{
<li class="mb-3">
#interestProfile.Interest.InterestName
</li>
}
</ul>
}else
{
#:No interests
}
</div>
</div>
Part of the EditProfileView
#model ProfileViewModel
#{
}
<form action="EditProfile" method="post">
<div class="card">
<div class="card-body">
<button class="btn btn-primary" type="submit">Submit changes</button>
</div>
</div>
<div class="card">
<div class="card-body">
<div>
<label class="form-label">Interested in</label>
<div class="checkbox">
#foreach (Interest interest in Model.Interests)
{
<label><input type="checkbox" name="interestId" value="#interest.InterestId">
#interest.InterestName </label>
}
</div>
</div>
</div>
</div>
Is there a way to do it with checkboxes? I think that a dropdown list could be helpful here but I don't know if it's worth deleting all the code I have already to make that change

Materialize Modal and Dropdown Problems with Meteor Blaze

I recently ran into some problems when trying to use the Materialize modal and dropdown features with Blaze, specifically when there are multiple instances of each.
I have this template called cadcall:
<template name="cadcall">
<tr>
<td class="truncate">{{id}}</td>
<td>FRI</td>
<td>{{time}}</td>
<td>{{type}}</td>
<td>{{location}}</td>
<td>{{notes}}</td>
<td>
<i class="material-icons call-dropdown-button" data-activates="cadcallactions">more_vert</i>
</td>
</tr>
<div id="call-details-modal" class="modal">
<div class="modal-content">
<h4>Call Details</h4>
<div class="row">
<form class="new-call col s12">
<div class="row">
<div class="input-field col s6">
<input id="call-id" type="text" class="validate" disabled>
<label for="call-id">ID</label>
</div>
<div class="input-field col s6">
<input id="call-time" type="text" class="validate" disabled>
<label for="call-time">Time</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="call-location" type="text" autocomplete="off">
<label for="call-location">Location</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<textarea id="call-notes" class="materialize-textarea" length="100000" autocomplete="off"></textarea>
<label for="call-notes">Notes</label>
</div>
</div>
<div class="modal-footer">
<button type="submit" href="#!" class="modal-action modal-close waves-effect waves-grey btn-flat center">Submit</button>
</div>
</form>
</div>
</div>
</div>
<ul id='cadcallactions' class='dropdown-content'>
<li><a class="callupdate" href=""><i class="material-icons">update</i>Update</a></li>
<li><a class="callresolve" href=""><i class="material-icons">check</i>Resolve</a></li>
</ul>
</template>
Here is the cadcall events:
Template.cadcall.events({
'click .callresolve'(e) {
Calls.remove(this._id);
},
});
Here is the cadcall onRendered:
Template.cadcall.onRendered(function() {
$(document).ready(function () {
$('.call-details').leanModal();
});
$('.call-dropdown-button').dropdown({
inDuration: 300,
outDuration: 225,
constrainWidth: false, // Does not change width of dropdown to that of the activator
hover: false, // Activate on hover
gutter: 0, // Spacing from edge
belowOrigin: true, // Displays dropdown below the button
alignment: 'right', // Displays dropdown with edge aligned to the left of button
stopPropagation: false // Stops event propagation
});
});
Essentially, for each call there is in the Mongo database, I iterate each call entry. However, if there are multiple calls, the modal doesn't function correctly. If I try to close the modal (by clicking the class callupdate after opening it, the gray area behind it stays.
In addition to the modal not working correctly, the dropdown menu also acts funky, specifically when I try to delete a field (by clicking the class callresolve). Whenever I try to delete a call entry it works, but thereafter the dropdown menus on the other call entries stop working altogether. Furthermore, for some reason when I add an entry then delete it, an error pops up in the Chrome console:
blaze.js:650 Uncaught Error: Must be attached
at Blaze._DOMRange.DOMRange.containsElement (blaze.js:650)
at Blaze._DOMRange.<anonymous> (blaze.js:2612)
at HTMLAnchorElement.<anonymous> (blaze.js:863)
at HTMLTableSectionElement.dispatch (jquery.js:4723)
at HTMLTableSectionElement.elemData.handle (jquery.js:4391)
Presumably, since these problems only occur when I have multiple call entries, I think the HTML may be conflicting with each iteration of the call entry. Is there a way to remedy this issue?

how to properly use meteor's ironRouter waitOn?

I have abround 6000 documents in my mongo collection, which I need to load up into meteor client upon app startup.
In my routes (located under app/client), I have this:
Router.map(function() {
this.route('home', {
path: '/',
template: 'dashboardWrapper',
waitOn: function() {
return Meteor.subscribe('nasdaq');
},
cache: true
});
});
My dashboardWrapper template looks like this:
<template name="dashboardWrapper">
{{#if Template.subscriptionsReady}}
{{> dashboard}}
{{/if}}
</template>
My dashboard template looks like this:
<template name="dashboard">
<div class="container">
<h2>Priority - 1 Incidents Over Time</h2>
<div class="row">
<div id="yearly-bubble-chart" class="dc-chart">
<strong>Yearly Performance</strong> (radius: fluctuation/index ratio, color: gain/loss)
</div>
</div>
<div class="row">
<div id="gain-loss-chart">
<strong>Days by Gain/Loss</strong>
<a class="reset" href="javascript:gainOrLossChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
<div class="clearfix"></div>
</div>
<div id="quarter-chart">
<strong>Quarters</strong>
<a class="reset" href="javascript:quarterChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
<div class="clearfix"></div>
</div>
<div id="day-of-week-chart">
<strong>Day of Week</strong>
<a class="reset" href="javascript:dayOfWeekChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
<div class="clearfix"></div>
</div>
<div id="fluctuation-chart">
<strong>Days by Fluctuation(%)</strong>
<span class="reset" style="display: none;">range: <span class="filter"></span></span>
<a class="reset" href="javascript:fluctuationChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
<div class="clearfix"></div>
</div>
</div>
<div class="row">
<div id="monthly-move-chart">
<strong>Monthly Index Abs Move & Volume/500,000 Chart</strong>
<span class="reset" style="display: none;">range: <span class="filter"></span></span>
<a class="reset" href="javascript:moveChart.filterAll();volumeChart.filterAll();dc.redrawAll();"
style="display: none;">reset</a>
<div class="clearfix"></div>
</div>
</div>
<div class="row">
<div id="monthly-volume-chart">
</div>
<p class="muted pull-right" style="margin-right: 15px;">select a time range to zoom in</p>
</div>
<div class="row">
<div>
<div class="dc-data-count">
<span class="filter-count"></span> selected out of <span class="total-count"></span> records | Reset All
</div>
</div>
<table class="table table-hover dc-data-table">
</table>
</div>
<div class="clearfix"></div>
</div>
</template>
The relevant part of Meteor.client looks like this:
if (Meteor.isClient) {
var ndx,data;
Template.dashboardWrapper.onCreated( function() {
var template = this;
template.subscribe("nasdaq");
});
Template.dashboard.onCreated( function() {
data = Nasdaq.find().fetch();
ndx = crossfilter(data);
});
Template.dashboard.onRendered(function(){
var self = this;
self.subscribe("nasdaq", function() {
self.autorun(function() {
data = Nasdaq.find().fetch();
});
});
What I expect from this, is for the dashboard template to wait until all the data from the Nasdaq collection loads up.
What happens is absolutely nothing - no data and no errors.
If I remove ironRounter all together, and refresh, I can get a couple of dozen records (out of 6000 total).
Is there a way reliably force the app to wait until every single document loads up?
Try subscribe right before load the current template, may be it will work.
Router.route('/dashboardWrapper/:_id', {
name: 'dashboardWrapper',
waitOn: function () {
return [
Meteor.subscribe('nasdaq')
];
},
data: function () {
return Nasdaq.findOne(this.params._id);
}
});

ASP.net - open and close a list on button click

I am pretty advanced in C# but a newcomer in the world of ASP.NET.
My HomeController.cs:
public ActionResult Index()
{
// tuple -> item1 = key string / item2 = assigned list
var configList = new List<Tuple<string, List<string>>>();
configList = fillItWithSomeData(..)
ViewBag.ConfigSettings = configList;
return View();
}
My Index.cshtml:
<div>
<div class="row">
#foreach (var elements in ViewBag.configSettings)
{
<div class="col-md-8 checkbox">
/*I NEED A BUTTON HERE*/
<label>
<input type="checkbox">#elements.Item1
</label>
</div>
foreach (var listElement in elements.Item2)
{
<div class="col-md-8 col-md-offset-1 checkbox">
<label>
<input type="checkbox">#listElement
</label>
</div>
}
}
</div>
</div>
Every key string in my list contains a list of strings. (look at var configList)
In my view I want to have a button for each key string which should be able to open or close the assigned list of the respective key string. I currently use ASP.NET-MVC. How can I program that? In C# or do I need to use JS for that? I really have no idea. Thanks in advance.
You can use bootstrap Accordion or bootstrap Collapsible panel.
below code using bootstrap Collapsible panel.
<div>
<div class="row">
#foreach (var elements in ViewBag.configSettings)
{
<div class="col-md-8 checkbox">
/*I NEED A BUTTON HERE*/
<label>
<input type="checkbox" data-toggle="collapse" data-target="##elements.Item1">#elements.Item1
</label>
</div>
foreach (var listElement in elements.Item2)
{
<div class="col-md-8 col-md-offset-1 checkbox collapse" id="#elements.Item1">
<label>
<input type="checkbox">#listElement
</label>
</div>
}
}
</div>

Meter: embedding templates in Blaze

Using Bootstrap and Meteor / Blaze, I am trying to dynamically control the size of a template using a template helper. I'd like to have a button to switch between col-md-4 and col-md-12. The hard-coded column sizing looks like this:
<div class="panel-body">
<div class="row">
{{#each articles}}
<div class="col-md-4">
{{> article this}}
</div>
{{/each}}
</div>
I have a template helper that returns the div and found I needed a closing helper call, or Meteor could complain about an unbalanced <\div>. This seems a bit hacky.
Template.articles.helpers({
format: function() {
return '<div class="col-md-4">';
// return '<div class="col-md-12">';
},
end_format: function() {
return '</div>'
}
});
The markup is:
<div class="panel-body">
<div class="row">
{{#each articles}}
{{{format}}}
{{> article this}}
{{{end_format}}}
{{/each}}
</div>
</div>
But the div tags are returned closed and empty, with the markup I'd like enclosed underneath, as can be seen in this screen shot:
Don't return HTML from template helpers, there is usually a better way.
Why don't you return a dynamic class name from a template helper ?
HTML
<div class="panel-body">
<div class="row">
{{#each articles}}
<div class="{{columnSize}}">
{{> article this}}
</div>
{{/each}}
</div>
<button type="button" class="btn btn-primary js-toggle-column-size">Toggle column size</button>
</div>
ES2015
Template.articles.onCreated(function(){
this.largeColumns = new ReactiveVar(false);
});
Template.articles.helpers({
columnSize(){
const largeColumns = Template.instance().largeColumns.get();
return largeColumns ? 'col-md-12' : 'col-md-4';
}
});
Template.articles.events({
'click .js-toggle-column-size'(event, template){
const largeColumns = template.largeColumns.get();
template.largeColumns.set(!largeColumns);
}
});

Resources