I'm having a bit of trouble implementing an idea I had to make twitter's typeahead suggestion property a little dynamic.
I have the following piece of code:
$(inputElement).typeahead({
highlight: true,
hint: false
}, {
name: 'engine',
limit: 15,
displayKey: config.displayKey,
source: config.engine.ttAdapter(),
templates: {
empty: [
'<div class="empty-suggestion-message">',
'No results matched your query.',
'</div>'
].join('\n'),
suggestion: Handlebars.compile('<p> <span>{{name}}</span> - <span>{{email}}</span> - <span>{{phone}}</span> </p>'),
}
});
In the Handlebars.compile part, I'm printing the source's response keys, name, email and phone. What I want to do is, having set an object to hold some config:
var _setConfig = function (url, query, displaykey, suggestion) {
config.url = url;
config.query = query;
config.displayKey = displaykey;
config.suggestion = suggestion;
console.log(config.suggestion);
};
I would like to change the suggestion part to:
suggestion: Handlebars.compile('<p> <span>{{config.suggestion[0]}}</span> - <span>{{config.suggestion[1]}}</span> - <span>{{config.suggestion[2]}}</span> </p>')
Assuming I pass in an array (e,g ['name', 'email', 'phone']) as the suggestion parameter to the _setConfig() function.
Any ideas ??
Thanks :D
Related
I'm working on a client script, but when I do a simple getValue() on the customer field and log.debug, I get repeating output lines and I'm not sure why. Is this normal?
Output
This my fieldChanged code:
function fieldChanged(context) {
var newRec = context.currentRecord;
if(newRec.fieldId = 'entity') {
var custId = newRec.getValue ({
fieldId: 'entity'
});
log.debug({
title: 'id: ' + custId
});
}
}
Change the line below:
if(newRec.fieldId = 'entity')
To something like
if(context.fieldId === 'entity')
You're getting repeating output lines because whenever a field is changed, you're not doing a check on the current fieldId in the context object instead checking the context.currentRecord.fieldId which I'm not sure what evaluates to.
Check this out for more info: fieldChanged(scriptContext)
I am using Simple Schema,collection hooks and Autoform packages in Meteor and I am trying to update a Embedded object in my schema in the after update collection hook. I feel I might doing something silly, but was just unable to solve this problem. I am getting the exeption while saving: Exception while invoking method '/providers/update' Error: 0 must be an integer
My schema:
Schemas.Providers = new SimpleSchema({
email: {
type: String,
label: 'Email Address',
autoValue: function() {
if (this.isInsert || this.isUpdate) {
return Meteor.user().emails[0].address;
}
},
autoform: {
afFieldInput: {
type: 'email'
}
}
},
officelocation: {
type: String,
label: 'Location of Office',
optional:true
},
location: {
type: [LocationSchema],
optional:true
}});
The collection hook that works:
Providers.after.update(function (userId, doc) {
var oldDoc = this.previous;
Providers.direct.update({_id: doc._id},{$set: {location:{
type:'Point',
coordinates:[0,0]
}}});
});
The collection hook that does not work.. Ideally I should not be updating after the collection update, but wanted to make sure this works:
Providers.after.update(function (userId, doc) {
var oldDoc = this.previous;
var array=[];
var iArray=doc.officelocation.split(",");
array.push(Number(iArray[1]));
array.push(Number(iArray[0]))
Providers.direct.update({_id: doc._id},{$set: {location:[{
type:'Point',
coordinates:array
}]}});
});
Looking at what you are trying to store, use parseInt instead of Number that you are using. It will return an integer that mongo can store.
The issue is not with the method that you are using. It is with the way you are storing data in mongo. Show us how your LocationSchema looks like.
Detail:
Mongo uses a different number format that what javascript uses. In javascript, a Number can be an integer, a float, a decimal or anything that you want. Mongo has very strict demands when it comes to integer or floats.
Overall, what it means is that if you want to store an accurate decimal number in mongo (which I suspect what you are trying to do), you have to either store it as a string (you loose the ability to do direct mongo operation such as $inc $gt etc) or divide it into two parts and store separably. The third option is to store it as a float which isn't accurate an is only useful if you want some kind of approximate value.
I have a list of company names I'm populating from a collection
the helper function I have is:
Template.companyList.helpers({
companies: function () {
return Companies.find({owner: Meteor.userId()}, {sort: {a: 1}, name:1, createdAt:1});
}
});
It's looped through using a
{{#each companies}}
which outputs
<LI> Company Name </LI>
Above this I have a text box, and would like to filter the list of companies by what I type in the textbox - I'd prefer to have a "containing" filter as opposed to "starting with" filter, but i'll take either one - is there an established way of doing this in Meteor? If not, is there a plugin that someone wrote that does this?
Also, whatever answer you give, please consider the fact that I've been using Meteor for, oh, 5 days now, and i'm still learning it, so, a Newbie style answer would be great.
Thanks for Reading!
edit
This is the updated answer I came up with - combining David's answer with my previous companies helper:
Template.companyList.helpers({
companies: function () {
var query = Session.get('query');
selector = {owner: Meteor.userId()};
options = {sort: {a: 1}, companyName:1, createdAt:1};
if (query && query.length) {
var re = new RegExp(query, 'i');
selector.companyName = re;
}
return Companies.find(selector, options);
}
});
Here is the outline for a simple search-as-you-type interface:
Template.myTemplate.helpers({
companies: function() {
// build a regular expression based on the current search
var search = Session.get('search');
var re = new RegExp(search, 'i');
selector = {owner: Meteor.userId()};
// add a search filter only if we are searching
if (search && search.length)
selector.name = re;
options = {sort: {createdAt: -1}};
return Companies.find(selector, options);
}
});
Template.myTemplate.events({
'keyup #search': function() {
// save the current search query in a session variable as the user types
return Session.set('search', $('#search').val());
}
});
This assumes:
You are trying to search Companies by name.
You have an input with an id of search.
Please modify as needed for your use case. Let me know if you have any questions.
I'm trying to populate a KendoUI grid with JSON data where the server returns the total number of rows along with the data, but I'm having some trouble getting serverPaging to work properly. I create and assign the dataSource of the grid as follows:
var oDS = new kendo.data.DataSource({
schema: {
data: "data",
total: "total"
},
data: self.grdTableData,
serverPaging: true,
pageSise: 50,
total: joOutput["TotalRecords"]
});
grdTableResults.setDataSource(oDS);
and the first page shows the first 50 of 939 records but there is only ever 1 page (the navigation arrows never respond to anything) and I see NaN - NaN of 939 items and the rotating circle of dots in the centre of the grid that never goes away.
One thing that is different in all the examples I've looked at is that my $.ajax call and the the processing of the JSON data in .done doesn't use "transport: read" but I'm thinking how I send the data and get it back shouldn't matter (or does it because every page request is a new server read?). But I don't think I'm doing enough to handle the server paging properly even though it seems I'm setting data source values similar to those set in the example at http://jsfiddle.net/rusev/Lnkug/. Then there's the "take" and "skip" values that I'm not sure about, but I do have "startIndex" and "rowsPerPage" that I'm sending to the server that can be used there. I assume the grid can tell me what page I'm on show I can set my "startIndex" appropriately and if I have an Items per Page" drop down I can reset my "rowsPerPage" value?
Anyway, sorry for all the newbie questions. Any help and suggestions is genuinely appreciated. Thanks!
transport: read
You should be able to use "transport: read" even if you have custom logic by setting the value to a function. I have created a JS Fiddle to demonstrate this functionality.
dataSource: {
serverPaging: true,
schema: {
data: "data",
total: "total"
},
pageSize: 10,
transport: {
read: function(options) {
var data = getData(options.data.page);
options.success(data);
}
},
update: function() {}
}
Your read function contains a parameter that contains the following paging properties: page, pageSize, skip, take. Keep in mind that all transport operations need to be functions if one operation contains a function.
startIndex and rowsPerPage
If your server accepts these parameters, you should be able to submit them in the read function. Create a new ajax call that post customized data
var ajaxPostData = { startIndex: options.data.skip, rowsPerPage: options.data.pageSize }
This is the code for server side wrapper that I'm using to implement server paging with kendo grid:
#(Html.Kendo().Grid<IJRayka.Core.Utility.ViewModels.ProductDto>()
.Name("productList")
.Columns(columns =>
{
columns.Bound(prod => prod.Name);
columns.Bound(ord => ord.Brand);
columns.Bound(ord => ord.UnitPackageOption);
columns.Bound(ord => ord.CategoryName);
columns.Bound(ord => ord.Description);
})
.Pageable(pager => pager.PageSizes(true))
.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
.PrefixUrlParameters(false)
.DataSource(ds => ds.Ajax()
.Model(m => m.Id(ord => ord.ID))
.PageSize(5)
.Read(read => read
.Action("FilterProductsJson", "ProductManagement")
.Data("getFilters"))
)
)
Where getFilters is a javascript function that passes my custom filter parameters to the grid when it wants to get data from url/service:
function getFilters() {
return {
brand: $("#Brand").val(),
name: $("#Name").val(),
category: $("#CategoryName").val()
};
}
In addition you should implement your controller's action method using kendo's DataSourceRequest class like below, or otherwise it won't work the way you want:
public JsonResult FilterProductsJson([DataSourceRequest()] DataSourceRequest request,
// three additional paramerters for my custom filtering
string brand, string name, string category)
{
int top = request.PageSize;
int skip = (request.Page - 1) * top;
if(brand != null)
brand = brand.Trim();
if(name != null)
name = name.Trim();
if(category != null)
category = category.Trim();
var searchResult = new ManageProductBiz().GetPagedFilteredProducts(brand, name, category, top, skip);
// remove cyclic references:
searchResult.Items.ForEach(prd => prd.Category.Products = null);
return Json(new DataSourceResult { Data = searchResult.Items, Total = searchResult.TotalCount }, JsonRequestBehavior.AllowGet);
}
How can I get JSON array from Ext.data.Store outside the function?
The code:
var store = new Ext.data.Store({
model: 'nested' + type,
proxy: {
type: 'ajax',
url: '/Grid/GetDetailed?InvoiceId=' + $(row).attr('id'),
reader: {
type: 'json',
root: 'items',
totalProperty: 'totalCount'
}
}
});
store.load();
And I want to use something like this:
store.getAt(0);
but it's undefined.
someone said it beacaouse of the ajax which is asynchronic.
If you use store.getAt(0) immediately after the store.load() is called then yes, the problem is that the load is asynchronic so you should use the callback method of the load to fix this.
store.load({
scope : this,
callback: function(records, operation, success) {
//here the store has been loaded so you can use what functions you like
store.getAt(0);
}
});
Use Ext.create instead of new keyword when creating the store, and define a storeId for the store. Then you can use Ext.getStore() method to retrieve the store.
You can also make it work by doing the following:
//This function will be called only after the store has been loaded successfully.
store.on('load',function(this, records, successful, eOpts){
store.getAt(0);
}, this);