Fullcalendar with JSON feed returning eventSource in extended form - fullcalendar

I'm using the excellent fullcalendar by arshaw with Angular UI and right now I'm having a problem with eventSource objects in extended form not rendering when fetched as JSON feeds.
The data is fetched using the following code in the controller:
$scope.events = [
'/api/v1/users/104/events?format=cal&type=9',
'/api/v1/users/104/events?format=cal&type=10'
];
$scope.eventSources = $scope.events;
When the JSON feed returns an array with event objects it actually works:
// returned by - /api/v1/users/104/events?format=cal&type=9
[
{
url: "/#/events/86893",
start: "2013-03-15",
title: ": Event - 86893"
},
{
url: "/#/events/31348",
start: "2013-03-27T09:30Z",
title: "Event - 31348"
}
],
// returned by - /api/v1/users/104/events?format=cal&type=10
[
{
url: "/#/events/86899",
start: "2013-03-25",
title: ": Event - 86899"
},
{
url: "/#/events/31349",
start: "2013-03-17T09:30Z",
title: "Event - 31349"
}
]
However I would like to specify some options along with the event data, for example different colors for different JSON feeds. Hence I settled for the API to return the event source in its extended form . This is what it API returns.
// returned by - /api/v1/users/104/events?format=cal&type=9
{
events: [
{
url: "/#/events/86893",
start: "2013-03-15",
title: "Event - 86893"
},
{
url: "/#/events/31348",
start: "2013-03-27T09:30Z",
title: "Event - 31348"
}
],
color: "#ff9900",
allDayDefault: false,
ignoreTimezone: true
},
// returned by - /api/v1/users/104/events?format=cal&type=10
{
events: [
{
url: "/#/events/86899",
start: "2013-03-25",
title: "Event - 86899"
},
{
url: "/#/events/31349",
start: "2013-03-17T09:30Z",
title: "Event - 31349"
}
],
color: "#3366FF",
allDayDefault: false,
ignoreTimezone: true
}
Unfortunately this format isn't rendered when fetched as JSON. When fetching the extended format I changed the eventSources assignment somewhat to look like this:
$scope.eventSources = [ $scope.events ];
If I cut and paste the raw JSON response (with the event source in its extended form) from the API straight into the eventSources method it works. Isn't it possible to consume the event source in extended form when it is returned as a JSON feed?

Could it be that the eventSource being returned from the API is not where the extended form options should be used, but rather in the event functions used as the eventSource's.
The documentation states that the extended form should be used inside of the Json object used to call the API.
http://arshaw.com/fullcalendar/docs/event_data/events_json_feed/
If the API was too return the extra options for the events, then it would need to set each one individually.
Currently in this post, The only place I see where the extended options are called is from the returned api data.
I think this should be the other way around. And the calendar should know about the extended form before it even requests the data at all. This would mean the server will not need to return any extra options and the calendar will organize the event objects by feed and extended options.
If you could post a plunk, then we could nail this.

Related

How to push Ecommerce Transactions to GTM Data Layer

I'm pushing some tags to the data layer and they all seem to be working as expected except for ecommerce transaction data. I have confirmed that the transaction data is being pushed to the data layer but for some reason I'm not seeing any results in Google Analytics—even after waiting 48 hours.
I should mention that this is an SPA so there is no page refreshing. The data is pushed to the data layer after the payment is successfully processed.
This is the data I'm sending:
{
event: 'subscribe',
user: <USER_ID>,
subscribe: {
transactionId: <CUSTOMER>,
transactionAffiliation: <AFFILIATION>,
transactionTotal: <PRICE>,
transactionProducts: [
{
id: <CUSTOMER>,
sku: <SUBSCRIPTION>,
name: <PLAN>,
price: <PRICEPER>,
quantity: <QUANTITY>
}
]
}
};
Is there something wrong with the way I'm formatting this? Any ideas why this doesn't seem to be working?
For just regular NOT enchanced ecomm, you need to make some adjustments to your datalayer first:
{
event: 'subscribe',
user: <USER_ID>,
transactionId: <CUSTOMER>,
transactionAffiliation: <AFFILIATION>,
transactionTotal: <PRICE>,
transactionProducts: [{
id: <CUSTOMER>,
sku: <SUBSCRIPTION>,
name: <PLAN>,
price: <PRICEPER>,
quantity: <QUANTITY>
}]
};
Then create a custom event trigger referencing the subscribe event:
Then create a GA tag and select Track Type of Transaction, elect your GA settings variable and set the trigger to that custom event trigger we created above:

meteor autocomplete server-side

I'm writing a meteor app and I'm trying to add an autocomplete feature to a search box. The data is very large and is on the server, so I can't have it all on the client. It's basically a database of users. If I'm not wrong, the mizzao:autocomplete package should make that possible, but I can't seem to get it to work.
Here's what I have on the server:
Meteor.publish('autocompleteViewers', function(selector, options) {
Autocomplete.publishCursor(viewers.find(selector, options), this);
this.ready();
});
And here are the settings I use for the search box on the client:
getSettings: function() {
return {
position: 'bottom',
limit: 5,
rules: [{
subscription: 'autocompleteViewers',
field: '_id',
matchAll: false,
options: '',
template: Template.vLegend
}],
};
}
But I keep getting this error on the client:
Error: Collection name must be specified as string for server-side search at validateRule
I don't really understand the problem. When I look at the package code, it just seems like it's testing whether the subscription field is a string and not a variable, which it is. Any idea what the problem could be? Otherwise is there a minimum working example I could go from somewhere? I couldn't find one in the docs.
Error: Collection name must be specified as string for server-side search at validateRule
You get this error because you don't specify a Collection name in quotes.
getSettings: function() {
return {
position: 'bottom',
limit: 5,
rules: [{
subscription: 'autocompleteViewers',
field: '_id',
matchAll: false,
collection: 'viewers', // <- specify your collection, in your case it is a "viewers" collection.
options: '',
template: Template.vLegend
}],
};
}
For more information please read here.
Hope this helps!

With Meteor, how can I update a document based on MongoDB's ObjectID()?

I created a child array of objects in a document. Each of these array objects have:
children: [
{
_id: ObjectID("lkajsdflkajdsf"),
title: "Something"
}, ...
]
I'm getting ObjectId undefined error when trying to update a document:
Category.update(
{ "_id": "C2Rcjivw96htJSHRq", "children._id": ObjectId("1c46382a25d3888165dd338a") },
{ "$set": { "children.$.title": "Hello World" }}
);
As you can see I'm attempting to update a specific array object by it's associated _id. This does not work. I was reading this thread: Meteor collection update with traditional id
But it's a little outdated, and I'm also getting errors when trying to use it.
Is there a solid method for handling things in this fashion? I can do this in Mongo shell with no problem, but not through Meteor methods.
Thanks!

Extjs 4 - Retrieve data in json format and load a Store. It sends OPTION request

I'm developing an app with Spring MVC and the view in extjs 4. At this point, i have to create a Grid which shows a list of users.
In my Spring MVC controller i have a Get method which returns the list of users in a jsonformat with "items" as a root.
#RequestMapping(method=RequestMethod.GET, value="/getUsers")
public #ResponseBody Users getUsersInJSON(){
Users users = new Users();
users.setItems(userService.getUsers());
return users;
}
If i try to access it with the browser i can see the jsondata correctly.
{"items":[{"username":"name1",".....
But my problem is relative to request of the Ext.data.Store
My Script is the following:
Ext.onReady(function(){
Ext.define('UsersList', {
extend: 'Ext.data.Model',
fields: [
{name:'username', type:'string'},
{name:'firstname', type:'string'}
]
});
var store = Ext.create('Ext.data.Store', {
storeId: 'users',
model: 'UsersList',
autoLoad: 'true',
proxy: {
type: 'ajax',
url : 'http://localhost:8080/MyApp/getUsers.html',
reader: {type: 'json', root: 'items'}
}
});
Ext.create('Ext.grid.Panel',{
store :store,
id : 'user',
title: 'Users',
columns : [
{header : 'Username', dataIndex : 'username'},
{header : 'Firstname', dataIndex: 'firstname'}
],
height :300,
width: 400,
renderTo:'center'
});
});
When the store tries to retrieve the data and launchs the http request, in my firebug console appears OPTIONS getUsers.html while the request in the browser launchs GET getUsers.html
As a result, Ext.data.Store has not elements and the grid appears with the columnames but without data. Maybe i've missed something
Thank you
You can change the HTTP methods that are used by the proxy for the different CRUD operations using actionMethods.
But, as you can see in the doc (and as should obviously be the case), GET is the default for read operations. So the OPTIONS request you are observing is quite puzzling. Are you sure that there's not another part of your code that overrides the default application-wide? Maybe do a search for 'OPTIONS' in all your project's JS files, to try and find a possible suspect. Apparently there's no match in the whole Ext code, so that probably doesn't come from the framework.
Edit:
Ok, I think I've got it. If your page is not accessed from the same domain (i.e. localhost:8080, the port is taken into account), the XHR object seems to resort to an OPTIONS request.
So, to fix your problem, either omit the domain name completely, using:
url: '/MyApp/getUsers.html'
Or double check that your using the same domain and port to access the page and make the requests.

Mustache JS Template with JSON Collection

Hi this is my first attempt to use MustacheJS with a JSON webservice in .net
Currently I am struggling I can't seem to find what I am doing wrong setting this basic example:
My Webservice is returing the following string:
[
{
"ShortDescription":"BOX",
"Description":"BOXING",
"Id":1
},
{
"ShortDescription":"EPL",
"Description":"ENGLISH PREMIER LEAGUE",
"Id":2
}
]
I have validated its syntax with this website: http://json.parser.online.fr/
and here is the HTML code I am using:
google.load("jquery", "1");
google.setOnLoadCallback(function () {
$(document).ready(
function () {
$.ajax({
url: "../data.asmx/geteagues",
type: "POST",
dataType: "json",
data: "",
contentType: "application/json; charset=utf-8",
success: function (data) {
var template = "<h1>{{ShortDescription}} {{Description}}</h1>";
var html = Mustache.render(template, data);
$('#sampleArea').html(html);
alert(html);
}
})
}
)
});
I am posting the whole JS code, since I am not very good with javascript, basically I want to load always the latest JQuery version from google and then work my WS call.
The problem so far is that when I place a breakpoint in the following line:
var html = Mustache.render(template, data);
I see that the template is setn ok, and so does the data, same value as I posted above, but the .render function is returning: I seems It didnt like the data.
So far all the examples I have seen for inline data come as the following structure:
{
"repo": [
{ "name": "resque" },
{ "name": "hub" },
{ "name": "rip" },
]
}
And then a template defined like this:
{{#repo}}
<b>{{name}}</b>
{{/repo}}
But the only difference of that against my data is that I dont have a "parent" like "repo"
At server side, I am using a .net library called JSON.net and in the documentation of how are collections being serialized:
james.newtonking.com/projects/json/help/html/SerializingCollections.htm
the final result does not include the parent node's name, which I thing is missing from my Mustache Template definition:
[
{
"Name": "Product 1",
"ExpiryDate": "2000-12-29T00:00Z",
"Price": 99.95,
"Sizes": null
},
{
"Name": "Product 2",
"ExpiryDate": "2009-07-31T00:00Z",
"Price": 12.50,
"Sizes": null
}
]
Is this what I am missing? the "repo" parent node from my data so I can iterate my Template?
Thanks in advance for your time.
-ed
Per #stealth on this question Mustache.js: Iterate over a list received via json
{{ #. }}
<b>{{Name}}</b>
{{ /. }}
Note the only difference from #stealth's answer is a "#" instead of "/".
The line data = { 'roles': data }; is the most crucial. Its attaching the key to the data returned by web api or any other source of data like pagemethods or web service
$.ajax({
dataType: "json",
url: '/api/TestApi/GetAllRole',
success: function (data) {
data = { 'roles': data }; // formatting the data to support the mustache format
var html = Mustache.to_html($('#RoleTemplate').html(), data);
$('#tblRole').append(html);
}
});
Few of my articles on the MustacheJs can be found here
INLINE FILTER FOR BASIC GRID USING MUSTACHEJS
http://www.techguides.in/add-inline-filter-to-basic-grid-using-mustache/
Master Details Grid on Demand data loading : Using Mustache.JS
http://www.techguides.in/master-details-grid-on-demand-data-loading-using-mustache-js/
Sorting a Grid using MustacheJs
http://www.techguides.in/enable-sorting-in-a-grid-bound-using-mustache-js/
short answer: YES
long answer: for security reasons [1], you need to wrap your JSON aray in an object anyways. for Mustache or any other library to be able to access your array you need to have at least one parent key on which you can base your iterator.
The "repo" key on your sample is the helper you need to tell mustache "go and iterate on the array that is inside the repo key", otherwise you have no way to tell the template what you want to output where
[1] this is just one of many resources you can find about why you need to wrap your JSON response in an object http://incompleteness.me/blog/2007/03/05/json-is-not-as-safe-as-people-think-it-is/

Resources