I might be wrong about what is actually happening here but i have 3 Html.dropdownlists. And im using jquery to handle filtering which does actually work. However, there is some odd behaviour which i think might be because data isnt finished loading before the next function is called.
For instance:
Some background.
Company: Owns several field offices
Field Office: Owns several facilties
So logically, when you change company, field offices should change, which then changes facilities.
$(function () {
$(document).ready(function () {
var cid = $("#CompanyId").val();
$.post("/ManifestSearch/GetFilteredFieldOffices", { id: cid }, function (data) {
$("#FieldOfficeId").loadSelect(data);
});
var fid = $("#FieldOfficeId").val();
$.post("/ManifestSearch/GetFilteredFacilities", { id: fid }, function (data) {
$("#FacilityId").loadSelect(data);
});
});
});
Now, when the page loads, everything looks fine. All the dropdownlists have the correct data.
When i change company, this calls.
$(function () {
$('#CompanyId').change(function () {
var cid = $(this).val();
$.post("/ManifestSearch/GetFilteredFieldOffices", { id: cid }, function (data) {
$("#FieldOfficeId").loadSelect(data);
});
var fid = $("#FieldOfficeId").val();
$.post("/ManifestSearch/GetFilteredFacilities", { id: fid }, function (data) {
$("#FacilityId").loadSelect(data);
});
});
});
This changes the field offices to the correct list, however facilities changes to whatever field offices was set to before the company change occured. I dont know enough about jquery to figure out exactly what is going on, but my instinct tells me that the two posts are happening at the same time, and the second post happens before the first one is finished.
It's the nature of an asynchronous request.. you don't know which order they will finish in so you can't always assume the data from the first one will be available to the second one.
Ideally, your second request should be within the onSuccess callback function of the first request, with an onFailure/onError function handler to take care of any problems that arise.
Related
I have the following route defined in my iron-router:
this.route("/example/:id", {
name: "example",
template: "example",
action: function () {
this.wait(Meteor.subscribe('sub1', this.params.id));
this.wait(Meteor.subscribe('sub2', <<data of sub1 needed here>>));
if (this.ready()) {
this.render();
} else {
this.render('Loading');
}
}
});
I want to wait for sub1 and sub2 before rendering my actual template. The problem is that I need a piece of data which is part of the result of sub1 for the sub2 subscription.
How can I wait sequential for subscriptions? So that I can split the wait in two steps and wait for my first subscription to be finished. Then start the second subscription and then set this.ready() to render the template?
A workaround that I thought of was to use Reactive-Vars for the subscriptions and dont use .wait and .ready which is provided by iron-router. But I would like to use a more convenient solution provided by iron-router or Meteor itself. Do you know a better solution for this?
Thanks for your answers!
Publish Composite Package:
If the second subscription is reactively dependent on certain fields from the first dataset -- and if there will be a many-to-many "join" association, it might be worth looking into reywood:publish-composite package:
It provides a clean and easy way to manage associated subscriptions for collections with hierarchical relations.
Publication:
Meteor.publishComposite('compositeSub', function(id) {
return {
find: function() {
// return all documents from FirstCollection filtered by 'this.params.id' passed to subscription
return FirstCollection.find({ _id: id });
},
children: [
find: function(item) {
// return data from second collection filtered by using reference of each item's _id from results of first subscription
// you can also use any other field from 'item' as reference here, as per your database relations
return SecondCollection.find({ itemId: item._id });
}
]
}
});
Subscription:
Then you can just subscribe in the router using:
Meteor.subscribe('compositeSub', this.params.id);
Router hooks:
As a suggestion, hooks in iron-router are really useful, as they take care of a lot of things for you. So why not use the waitOn hook that manages this.wait and loading states neatly?
this.route('/example/:id', {
name: "example",
template: "example",
// this template will be rendered until the subscriptions are ready
loadingTemplate: 'loading',
waitOn: function () {
// return one handle, a function, or an array
return Meteor.subscribe('compositeSub', this.params.id);
// FYI, this can also return an array of subscriptions
},
action: function () {
this.render();
}
});
You can use the configure option to add a template for loading event:
Router.configure({
layoutTemplate: 'layout',
loadingTemplate: 'loading'
});
Note regarding the comment in question:
If both subscriptions only depend on the same id parameter passed to it, you can use the following, as mentioned by #abj27 in the comment above -- however, this does not seem to be the case, going by your example:
Publication:
Meteor.publish("subOneAndTwo", function (exampleId) {
check(exampleId, String);
return [
FirstCollection.find({ _id: exampleId });
SecondCollection.find({ firstId: exampleId })
];
});
Subscription:
Meteor.subscribe('subOneAndTwo', this.params.id);
So just check what you need and use a solution accordingly.
https://github.com/kadirahq/subs-manager
With this package, you can assign a subscription to a variable. Then, you can check that variable's ready state. I just got this working... after years of trying to understand.
Here is my code snippet that works, but oddly I had to wrap it in a 1ms timeout to work...
```
Router.route('/activity/:activityId', function (params) {
var params = this.params;
setTimeout(function(){
var thePage = window.location.href.split("/");;
window.thePage = thePage[4];
dbSubscriptionActivites.clear();
window.thisDbSubscriptionActivites = "";
window.thisDbSubscriptionActivites = dbSubscriptionActivites.subscribe("activityByPage", window.thePage);
Tracker.autorun(function() {
if(window.thisDbSubscriptionActivites.ready()) {
dbSubscriptionComments.clear();
window.thisDbSubscriptionComments = "";
window.thisDbSubscriptionComments = dbSubscriptionComments.subscribe('fetchComments', "activity", Activities.findOne({})._id);
BlazeLayout.render("activity");
$('body').removeClass("shards-app-promo-page--1");
}
});
},1); // Must wait for DOM?
});
```
Examine: window.thisDbSubscriptionActivites = dbSubscriptionActivites.subscribe("activityByPage", window.thePage);
I'm setting as a window variable, but you could do a const mySub = ...
Then, you check that in the autorun function later.
You can see there is where I am doing subscriptions.
I suppose I really should move the BlazeLayout render in to another .ready() check for the comments.
I'm not sure why this code works once in a while and fails other times:
var u = Meteor.users.findOne(username:'john');
console.log(u);
When I go to my page for the first time, sometimes the console.log(u) shows some results. But if I press refresh, console.log(u) shows undefined. I can't consistently reproduce one issue or the other. It seems pretty random when i get undefined or a collection. What's wrong with my code? How do I consistently get a collection for the variable u?
Like Christian Fritz said in comment on your question, it's probably a matter of collection not being fully loaded when your code is executed. If you use iron:router, you can use subscribe or waitOn as described there: http://iron-meteor.github.io/iron-router/#the-waiton-option so the page is loaded only when the collections are ready (meaning they are fully loaded).
You can also put it in a helper or use a Tracker Autorun to detect when your entry is available and then do whatever you want to do with it.
Edit: A sample for iron:router below
// myproject.jsx
var Cars = new Mongo.Collection('cars');
if(Meteor.isServer)
{
Meteor.publish("myCollections", function () {
return Meteor.users.find();
});
Meteor.publish("anotherCollection", function(){
return Cars.find();
});
}
//lib/router.js
Router.route('/my-page', {
name: 'myPage',
layoutTemplate: 'myPage',
waitOn: function() {
'use strict';
return [Meteor.subscribe('myCollection'),Meteor.subscribe('anotherCollection')];
},
data: function() {
'use strict';
return Collection.findOne();
}
});
My Meteor app runs slowly in the beginning for about ten seconds, and then becomes fast again. I am trying to improve the performance but having troubles to find the real cause.
I thought the problem was that I am publishing all the course information like following:
if (Meteor.isServer) {
Meteor.publish("courses", function() {
return Courses.find();
});
}
I tried using Kadira to monitor exactly what's happening. However, looking at the result, I am starting to think maybe it's not the real problem.
If it only takes 292ms for pubsub response time, it shouldn't feel that laggy but I cannot think of any other reason why the app would be so slow in the beginning and become fast again. Can an expert point me to the redirection?
UPDATE:
I could improve the duration of lagginess in the beginning by making the following changes:
in /server/publications.js
if (Meteor.isServer) {
Meteor.publish("courses", function() {
// since we only need these two fields for the search bar's autocomplete feature
return Courses.find({}, {fields: {'catalog':1, 'titleLong':1}});
});
Meteor.publish("courseCatalog", function(catalog) {
// publish specific information only when needed
return Courses.find({"catalog": catalog});
});
}
and in router.js I made changes accordingly so I subscribe based on specific pages. But there's still some lag in the beginning and I wonder if I can make more optimizations, and what is the real cause of the slowness in the beginning.
UPDATE2:
I followed the suggestion and made changes like below:
Session.set('coursesReady', false); on startup.
and in router:
Router.route('/', function () {
Meteor.subscribe("courses", function(err) {
if (!err) {
console.log("course data is ready")
Session.set('coursesReady', true);
}
});
....
and in /lib/helpers.js which returns data for typeahead library
if (Meteor.isClient) {
Template.registerHelper("course_data", function() {
console.log("course_data helper is called");
if (Session.get('coursesReady')) {
var courses = Courses.find().fetch();
return [
{
name: 'course-info1',
valueKey: 'titleLong',
local: function() {
return Courses.find().fetch();
},
template: 'Course'
},
But now the problem is that when the helper function is called, the data is never ready. The console print:
Q: How do I ensure that the helper function is called only after the data is ready, OR called again when the data is ready? Since Session is reactive, shouldn't it be called again automatically?
I can't check this right now, but I believe your issue might be that the course_data helper is being run multiple times before all 1000+ documents in the subscription are ready, causing the typeahead package to re-run some expensive calculations. Try something like this:
/client/views/global/helpers.js
Template.registerHelper("course_data", function() {
if (!Session.get('coursesReady')) return [];
return [ //...
/client/subscriptions.js
Meteor.subscribe("courses", function(error) {
if (!error) Session.set('coursesReady', true);
});
Update:
Really, Meteor's new features this.subscribe() and Template.instance().subscriptionsReady() are ideal for this. Session isn't really the right choice, but it should still be reactively updating (not sure why it isn't for you). Try instead making the following changes to /client/views/navwithsearch.js (and main, though ideally both templates should share a single search template):
Template.NavWithSearch.onCreated(function() {
this.subscribe('courses');
});
Template.NavWithSearch.onRendered(function() {
this.autorun(function() {
if (Template.instance().subscriptionsReady()) {
Meteor.typeahead.inject();
}
});
});
The idea is to tie the lifecycle of the subscription to the view that will actually be using that subscription. This should delay the typeahead injection until the subscription is completely ready.
I've been looking at many two-way data binding libraries and so far haven't found one that will fire onchange events when the input's value is set from a change on the model. Is there any way to do that with ractive.js?
It's possible, but is a little bit hacky. Browsers only fire the change event as a result of user interaction (rather than input.value = 'someNewValue'), so you have to watch the model and fire the event yourself:
var ractive = new Ractive({
el: 'main',
template: '#template',
data: { name: 'world' },
twoway: false
});
ractive.observe( 'name', function () {
// name has changed, need to simulate an event
var event = new Event( 'change' );
ractive.find( 'input' ).dispatchEvent( event );
});
ractive.find( 'input' ).addEventListener( 'change', function ( event ) {
console.log( 'event was fired', event );
});
// check the console!
ractive.set( 'name', 'everybody' );
<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>
<main></main>
<script id='template' type='text/ractive'>
<h1>Hello {{name}}!</h1>
<input value='{{name}}'/>
</script>
Note that twoway binding has been disabled, otherwise you'd get extra events firing all over the place when the user did interact with the input - so you would need to listen for input/change events and handle those interactions yourself.
The answer (for my purposes) is actually quite simple. First a little background - which I probably should have outlined in the original question. Let's say you're viewing/editing a customer profile. Meanwhile someone else is doing the same. They update a phone# and resave the profile. Without anything special being done you aren't going to see that new phone# unless you reload the profile. My goal is to make our data/forms 'reactive'. One of the difficulties was updating a form. In itself that's easy enough but how to handle any onchange events on inputs. Let's say a country is changed so a new list of regions needs to appear. Me changing the country would fire off the country's onchange event and a new list would appear. If a reactive change occurred and updated the country the onchange wouldn't fire. That's a problem. To make a long story short, the answer is to not have any onchange events on inputs but have a Ractive.on('change') event and then parse the key path for anything of interest. That will catch changes from the human and changes from the 'beyond', either with set or merge.
var cust = {
firstname: 'Fred',
lastname: 'Flintstone'
}
ractive = new Ractive({
el: '#spot',
template: '#tmpl1',
data: {customer: cust},
lazy: true
})
ractive.on('change', function(kp) {
console.log(kp)
})
setTimeout(function() {
ractive.set('customer.firstname', 'Wilma')
}, 2000)
setTimeout(function() {
ractive.merge('customer', {firstname: 'Barney', lastname: 'Rubble'})
}, 4000)
<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>
<body>
<div id='spot'></div>
<script id='tmpl1' type='text/tmpl'>
<input value={{customer.firstname}}>
<input value={{customer.lastname}}>
</script>
</body>
FullCalendar is working great apart from 1 issue I'm having.
The monthview div which loads a calendar in monthview mode, seems to show duplicate holidays loaded in. This happens when I add an event, and then call my calendar bind function, which basically runs the code below.
Has anyone else had a similar issue? It looks like 'removeEvents' function is working ok against the data feed which comes from an internal database, but seems to leave the google dates. When the addEventSource is called, it's adding the same events again.
var googleUkHolidaysFeed = {
url: 'http://www.google.com/calendar/feeds/uk__en%40holiday.calendar.google.com/public/basic',
cache: true,
color: "green"
};
$.getJSON(url, {}, function (data) {
$('#dayview').fullCalendar('removeEvents');
$('#dayview').fullCalendar('addEventSource', data);
if ($("#monthview")[0]) {
$('#monthview').fullCalendar('removeEvents');
$('#monthview').fullCalendar('addEventSource', data);
$('#monthview').fullCalendar('addEventSource', googleUkHolidaysFeed);
}
});
I resolved this issue myself. The 'removeEvents' has to be called followed by 'removeEventSource' like so:
('data' is json array of events provided by the app, 'googleCalendarUkHolidayFeed' is the url feed from google).
var googleCalendarUkHolidayFeed = {
url: "http://www.google.com/calendar/feeds/bla..."
}
$('#dayview').fullCalendar('removeEvents');
$('#dayview').fullCalendar('addEventSource', data);
if ($("#monthview")[0]) {
// remove events and re-add event source to reflect search/non-search
$('#monthview').fullCalendar('removeEvents');
$('#monthview').fullCalendar('removeEventSource', googleCalendarUkHolidayFeed);
$('#monthview').fullCalendar('removeEventSource', data);
$('#monthview').fullCalendar('addEventSource', googleCalendarUkHolidayFeed);
$('#monthview').fullCalendar('addEventSource', data);
}