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);
}
});
Related
I need to reload the entire WooCommerce checkout page after adding a coupon code.
I tried the following code but it doesn't reload it.
The reason why I need this function:
Prices of the review table turns to defalut language prices after adding the coupon code.
When I refresh the page, it shows translated language prices, so I need to reload it.
Would you please let me know how to reload it?
Added this code in a checkout page:
jQuery(document).ajaxComplete(function(event, xhr, settings) {
if (settings.url === '/?wc-ajax=apply_coupon') {
location.reload();
}
});
jQuery(document).ajaxComplete(function(event, xhr, settings) {
if (settings.url === '/?wc-ajax=apply_coupon') {
jQuery('body').trigger('update_checkout');
}
});
Order review table:
<div class="ea-woo-checkout-order-review">
<div class="ea-checkout-review-order-table">
<ul class="ea-order-review-table">
<li class="table-header">
<div class="table-col-1"></div>
<div class="table-col-2"></div>
<div class="table-col-3"></div>
</li>
<li class="table-row cart_item">
<div class="table-col-1 product-thum-name">
<div class="product-thumbnail">
<img width="300" height="200" src="https://www.myweb.com/wp-content/uploads/2021/06/LineOne_22-300x200.jpg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" loading="lazy"> </div>
<div class="product-name">Template Type </div>
</div>
<div class="table-col-2 product-quantity">1</div>
<div class="table-col-3 product-total"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>820,000</bdi></span></div>
</li>
</ul>
<div class="ea-order-review-table-footer">
<div class="footer-content">
<div class="cart-subtotal">
<div></div>
<div><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>820,000</bdi></span></div>
</div>
<div class="order-total">
<div></div>
<div><strong><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">$</span>820,000</bdi></span></strong> </div>
</div>
</div>
</div>
</div>
</div>
Apply coupon:
<div class="woo-checkout-coupon">
<div class="ea-coupon-icon"><i aria-hidden="true" class="fas fa-percent"></i></div>
<div class="woocommerce-form-coupon-toggle">
<div class="woocommerce-info">
Have a coupon? Click here to enter your code </div>
</div>
<form class="checkout_coupon woocommerce-form-coupon" method="post" style="">
<p>If you have a coupon code, please apply it below.</p>
<p class="form-row form-row-first">
<input type="text" name="coupon_code" class="input-text" placeholder="Coupon code" id="coupon_code" value="">
</p>
<p class="form-row form-row-last">
<button type="submit" class="button" name="apply_coupon" value="Apply Coupon">Apply Coupon</button>
</p>
<div class="clear"></div>
</form>
</div>
You should use
jQuery('body').trigger('update_checkout');
instead of
location.reload();
Alternative
add_action('wp_footer', 'woocommerce_custom_update_checkout', 50);
function woocommerce_custom_update_checkout()
{
if (is_checkout()) {
?>
<script type="text/javascript">
jQuery(document).ready($ => {
$('input').on('change', () => {
$('body').trigger('update_checkout');
});
});
</script>
In case someone who needs it
It's working with the following code:
jQuery( document.body ).on( 'applied_coupon_in_checkout removed_coupon_in_checkout', function () {
location.reload();
} );
I don't know how I look for this or how this method is called, but what I am trying to do is adding items dynamically with a form using AngularJS.
This is all working fine, but how are these items passed to the controller when submitted?
These are snippets from code:
AngularJS part:
angular
.module('Administration', [])
.controller('addParents', ['$scope', function ($scope) {
$scope.parents = [];
$scope.addParent = function () {
$scope.parents.push({
'firstname': $scope.Firstname,
'lastname' : $scope.Lastname,
'done': false
})
$scope.Firstname = ''
$scope.Lastname = ''
}
$scope.deleteParent = function (index) {
$scope.parents.splice(index, 1);
}
}])
The list:
<div role="tablist" aria-multiselectable="true" class="panel-group" id="accordion-1">
<div class="panel panel-default {'fadeOut' : parent.done}" ng-repeat="parent in parents">
<div role="tab" class="panel-heading">
<h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion-1" aria-expanded="true" href="#accordion-1 .item-1">{{parent.firstname}}</a> <span class="fa fa-close pull-right" ng-click="deleteParent($index)"></span></h4>
</div>
<div role="tabpanel" class="panel-collapse collapse in item-1">
<div class="panel-body">
<fieldset>
<legend>Personal</legend>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Firstname</label>
<div class="col-sm-10">
<p class="form-control-static">{{parent.firstname}}</p>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Lastname</label>
<div class="col-sm-10">
<p class="form-control-static">{{parent.lastname}}</p>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
As you can see I am using an accordion, it is a personal touch to have a nice layout of added items and to have a nice overview of all items.
Hope you can help me in this issue or give me some usefull links
Thanks!
I've tried half a dozen different ways to do this but i'm not sure what the issue is.
To start, here is a quick drawing of what im trying to accomplish:
What I want:
http://prntscr.com/br8xh6
whats happening:
http://prntscr.com/br8z8p
What seems to be happening is that my .row .full-row is being rendered twice, and the dynamic template is not being loaded into my <div class="col-md-10> as defined. Why would this be?
Heres my current code:
<body>
<div class="container full-container">
{{> navbar}}
{{> middle}}
</div>
</body>
<template name="navbar">
...
</template>
<template name="middle">
<div class="row full-row">
<div class="col-md-2 left-bar" style="background:#800000;">
{{> Template.dynamic template=sidebar}}
</div>
<div class="col-md-10">
{{> Template.dynamic template=content}}
</div>
</div>
<!-- </div> -->
</template>
<template name="leftbar">
<div class="row">
<div class="col-md-12">
{{> avatar size="large" shape="circle"}}
</div>
</div>
</template>
<template name="usercard">
<div class="col-md-4">
<div class="thumbnail thumb-dark">
<img src="default.png" alt="...">
<div class="caption">
<h3>Player name</h3>
<p>...</p>
Join
</div>
</div>
</div>
</template>
<template name="home">
<div class="row">
{{#each playerslooking}}
{{> usercard}}
{{/each}}
</div>
</template>
<template name="find_page">
<div style="height:150px;width:150px;background:blue;">hello</div>
</template>
JS:
FlowRouter.route('/', {
action: function() {
BlazeLayout.render("middle", {sidebar: 'leftbar', content: "home"});
}
});
FlowRouter.route('/find/:_id', {
name: 'postfind.show',
action: function() {
BlazeLayout.render('middle', {sidebar: 'leftbar', content: "find_page"});
}
});
I've refactored my code several times trying to debug this, as I'm not sure how BlazeLayout is suppose to work with nested templates.
All input appreciated, thanks.
Just in case, did you have a try at Blaze Layout root modification?
See: https://github.com/kadirahq/blaze-layout#set-different-root-node
I'm trying to use iron:router's yieldTemplatesproperty to render multiple templates on the same layout.
According to this tutorial, we should be abble to do something like this:
template.html
<template name="complexLayout">
<div class="left">
{{> yield region="menu"}}
</div>
<div class="main">
{{> yield}}
</div>
<div class="bottom">
{{> yield region="footer"}}
</div>
</template>
route.js
this.route('home', {
path: '/',
layoutTemplate: 'complexLayout',
yieldTemplates: {
'myMenu': {to: 'menu'},
'myFooter': {to: 'footer'}
}
});
I tried to do it, but the yieldTemplates part doesn't work.
Here is the relevant code:
Router.js
Router.map(function() {
this.route('home', {
path: '/home',
controller: 'homeController'
});
});
Controllers.js
baseController = RouteController.extend({
layoutTemplate: 'baseLayout'
});
homeController = baseController.extend({
yieldTemplates: {
'homeNavTop': {to: 'top'}
}
});
Templates.html
<template name="baseLayout">
<main>
<!-- NAV TOP -->
<div id="nav-top" class="hide-on-large-only light-blue darken-3 white-text">
<div class="row nomargin valign-wrapper hide-on-large-only">
{{> yield region='top'}}
</div>
</div>
<!-- / NAV TOP -->
<!-- BODY -->
<div class="row nomargin">
<div class="col s12">
{{> yield}}
</div>
</div>
<!-- / BODY -->
</main>
</template>
<template name="homeNavTop">
<a href="#" data-activates="slide-out" class="menu button-collapse btn-flat waves-effect">
<i class="material-icons">menu</i>
</a>
</template>
As explained, the BODY part works fine. The top region remains empty.
I have no console errors at all.
Do you have any clue of what is wrong in my code?
Perhaps the syntax has changed since that tutorial was written, but according to the IronRouter guide you should be doing this:
{{> yield 'top'}}
rather than this
{{> yield region='top'}}
I have a modal window with angular-material tabs and a ui-bootstrap datepicker. When I open datepicker, the text field moves up, and I cannot access either the datepicker or the field.
Here's a demo in jsFiddle
Here's my code:
var app = angular.module('myApp', ['ui.bootstrap', 'ngAnimate', 'ngAria', 'ngMaterial'])
.controller('myController', function ($scope, $modal) {
$scope.showModal = function () {
var modalInstance;
modalInstance = $modal.open({
templateUrl: "addNew.html",
controller: 'myController2',
size: 'lg'
});
};
$scope.showModal();
})
.controller('myController2', function ($scope, $modal) {
$scope.datepickers = {
start: false
}
$scope.openDatepicker = function ($event, which) {
$event.preventDefault();
$event.stopPropagation();
$scope.datepickers[which] = true;
};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
$scope.dateFormat = 'mediumDate';
});
<div ng-app="myApp">
<div ng-controller="myController">
<script type="text/ng-template" id="addNew.html">
<div class="modal-body">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Add</h3>
</div>
<div class="panel-body">
<md-tabs md-dynamic-height md-border-bottom>
<md-tab label="date">
<div class="form-horizontal">
<div class="row">
<div class="col-md-6">
<div class="row form-group">
<label for="dateStart" class="col-sm-2 col-md-4 control-label">
Date Start
</label>
<div class="col-sm-10 col-md-8">
<div class="input-group ui-datepicker">
<input type="text"
class="form-control"
name="dateStart"
id="dateStart"
datepicker-popup="{{dateFormat}}"
ng-model="campaign.dateStart"
is-open="datepickers.start"
datepicker-options="dateOptions"
ng-required="true"
ng-click="openDatepicker($event, 'start')"
close-text="Close"/>
<span class="input-group-addon" ng-click="openDatepicker($event, 'start')">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</md-tab>
<md-tab label="other tabs"></md-tab>
<md-tab label="other tabs"></md-tab>
<md-tab label="other tabs"></md-tab>
<md-tab label="other tabs"></md-tab>
</md-tabs>
</div>
</div>
</div>
</script>
</div>
</div>
I used a css trick to add the scroll bar in this fiddle, but it's not very neat. So I was wondering if there is a way to expand the tab height when the datepicker is opened or the datepicker is shown over a modal window like the select window opens.
You'll want to have the dropdown datepicker appear as part of the regular document flow, that way it will occupy space and the tab picker will automatically make room for it. It doesn't do that currently because it uses .dropdown-menu, to which Bootstrap adds position: absolute;
Just override like this:
.dropdown-menu[datepicker-popup-wrap] {
position: static;
}
There are some other stylistic things you can do, but that is the basic principle.
Demo in jsFiddle