i am using the following code to enable typeahead on input field
some times the regions are not displayed but when i see the "network xhr request" in inspect element. the url does return data.
Another issue the limit is not working in this example. i have tried different numbers but none of them works
var Regions = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('label'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: 'https://www.domain.com/getcities?query=%QUERY',wildcard: '%QUERY'
},
limit: 10
});
Regions.initialize();
var hotels = new Bloodhound({
datumTokenizer: function (datum) {
return Bloodhound.tokenizers.whitespace(datum.value);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: 'https://www.domain.com/gethotels?query=%QUERY',
wildcard: '%QUERY',
},
limit: 10
});
hotels.initialize();
function typeAhead()
{
$('#myinput').typeahead({
hint: true,
highlight: true,
minLength: 2
},
{
name: 'nba-teams',
displayKey: 'label',
source: Regions.ttAdapter() ,
templates: {
header: '<h3 class="league-name">Cities and regions</h3>'
}
},
{
name: 'nhl-teams',
displayKey: 'label',
source: hotels.ttAdapter() ,
templates: {
header: '<h3 class="league-name">Hotels</h3>'
}
});
}
Please check with below code.
var Regions = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('label'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: 'https://www.domain.com/getcities?query=%QUERY',wildcard: '%QUERY'
}
});
Regions.initialize();
var hotels = new Bloodhound({
datumTokenizer: function (datum) {
return Bloodhound.tokenizers.whitespace(datum.value);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: 'https://www.domain.com/gethotels?query=%QUERY',
wildcard: '%QUERY',
}
});
hotels.initialize();
function typeAhead(){
$('#myinput').typeahead({
hint: true,
highlight: true,
minLength: 2
},
{
name: 'nba-teams',
displayKey: 'label',
source: Regions.ttAdapter() ,
limit: 10,
templates: {
header: '<h3 class="league-name">Cities and regions</h3>'
}
},
{
name: 'nhl-teams',
displayKey: 'label',
source: hotels.ttAdapter() ,
limit: 10,
templates: {
header: '<h3 class="league-name">Hotels</h3>'
}
});
}
Related
I have a component:
App.MyChildComponent = Ember.Component.extend({
addTooltips: Ember.on('didInsertElement', function() {
var me = this;
var metrics = this.get('option.metrics');
metrics.forEach(function(e, i) {
me.get('option.metrics').objectAt(i - 1).set('tooltipDisabled', true);
});
});
})
Which is generated inside an each loop by a different component:
App.MyParentComponent = Ember.Component.extend({
...
})
And the template of MyParentComponent is:
{{#each option in options}}
{{my-child option=option}}
{{/each}}
All this, is called by a view with a template like this:
{{my-parent options=options}}
options is defined in the model of the view with:
App.MyViewModel = Ember.Object.extend({
options: Ember.A([
{ metrics: Ember.A([
{ name: 'a' },
{ name: 'b' },
{ name: 'c' }
]) },
{ metrics: Ember.A([
{ name: 'd' },
{ name: 'e' },
{ name: 'f' }
]) },
{ metrics: Ember.A([
{ name: 'g' },
{ name: 'h' },
{ name: 'i' }
]) }
]),
});
When I run me.get('option.metrics').objectAt(i - 1).set('tooltipDisabled', true); I get:
Uncaught TypeError: me.get(...).objectAt(...).set is not a function
What am I doing wrong?
Vanilla JavaScript objects don't have set methods. Use Ember.Objects instead:
App.MyViewModel = Ember.Object.extend({
options: Ember.A([
{ metrics: Ember.A([
Ember.Object.create({ name: 'a' }),
// ...
]) }
]),
});
Demo.
While trying to perform batch update, I am not able to post values to MVC WEB API controller neither I am getting Record IDs in mu PUT controller.
I have already visited some of the links egarding same problem but got no solution.
$(document).ready(function () {
debugger;
var webapiUrl = (My webapi);
dataSource = new kendo.data.DataSource({
type: "json",
transport: {
read: {
url: webapiUrl + api/GetProductsByShipID/1",
contentType: "application/json",
},
update: {
url: webapiUrl + api/OpportunityProducts/1",
contentType: "application/json",
type: "PUT"
},
destroy: {
url: webapiUrl + /api/OpportunityProducts/",
contentType: "application/json",
type: "DELETE"
},
create: {
url: webapiUrl + /api/OpportunityProducts/",
contentType: "application/json",
type: "POST"
},
parameterMap: function (options, operation) {
if (operation !== "read") {
return options;
}
}
},
batch: true,
pageSize: 10,
schema: {
model: {
id: "ID",
fields: {
ID: { editable: false, nullable: true },
ProductDesc: { type: "string" },
Quantity: {type: "number"},
UnitPrice: { type: "number"}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
toolbar: ["create", "save", "cancel"],
columns: [
"ProductName",
{ field: "ProductDesc", title: "Product Desc"},
{ field: "Quantity", title: "Quantity" },
{ field: "UnitPrice", width: 120 },
{ command: "destroy", title: " ", width:150 }],
editable: true
});
});
</script>
Well after some workaround, late night I was able to modify parameterMap section of my kendo grid which lead me to expected output.
This is how I updated my parameterMap section...
Previous
parameterMap: function (options, operation) {
if (operation !== "read") {
return options;
}
}
Updated
parameterMap: function (options, operation) {
debugger;
if (operation !== "read" && options.models) {
var webapiUrl = (my webapi);
var i = 0;
for (i = 0; i < options.models.length; i++) {
$.ajax({
cache: false,
async: true,
type: "PUT",
url: webapiUrl + "/api/OpportunityProducts/" + options.models[i].Id,
data: {
ID: options.models[i].ID,
ProductDesc: options.models[i].ProductDesc,
Quantity: options.models[i].Quantity
},
success: function (data) {
},
error: function (jqXHR, exception) {
alert(exception);
}
});
}
I use twitter's typeahead 0.10 with remote url to retrieve JSON results from server.
I would like to prevent tthe client caching so that the search takes place always on the
server. How can I do that?
Please see below my code:
// instantiate the bloodhound suggestion engine
var dataSource = new Bloodhound({
datumTokenizer: function (d) {
return Bloodhound.tokenizers.whitespace(d.value);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: "../" + autocompleteInfo.ControllerName + "/" + autocompleteInfo.MethodName + "?term=%QUERY&ts=" + (new Date().getTime()),
filter: function (res) {
var data = [];
data = $.map(res, function (item) {
return { label: item.Name, id: item.Id, autocompleteInfo: autocompleteInfo, cssClass: item.Class };
});
return data;
}
},
limit: 15,
name: 'typeaheadSourceCache',
ttl: 0,
ajax: {
cache: false
}
});
dataSource.initialize();
$("#" + autocompleteInfo.AutocompleteId).typeahead({
minLength: 3,
highlight: true,
autoselect: true
},
{
displayKey: 'label',
source: dataSource.ttAdapter(),
templates: {
suggestion: Handlebars.compile(
'<div class="searchItem {{cssClass}}">{{label}}</div>'
)
}
});
Just add cache field to remote object:
remote: {
'cache': false
...
}
Look at version 10.0.2. There is now a means to clear cache via Bloodhound.js (used in association with Typeahead.js):
engine.clearRemoteCache();
Here is the documentation from twitter typeahead:
https://github.com/twitter/typeahead.js/blob/master/doc/bloodhound.md#bloodhoundclearremotecache
Try to use typeahead destroy utils, i think in your case are:
$("#" + autocompleteInfo.AutocompleteId).typeahead('destroy');
The you reinizialize $("#" + autocompleteInfo.AutocompleteId)
To fix IE issues I've came to:
remote: {
url: '/myurl?par=%QUERY',
wildcard: '%QUERY',
prepare: function (q, o) {
o.url = o.url.replace('%QUERY', encodeURIComponent(q));
o.cache = false;
return o;
}
}
prefetch: {
url: '/myurl2',
ttl: 300000, //5min
thumbprint: userName,
prepare: function(o) {
o.cache = false;
return o;
}
I am just trying to get a better understanding of Jasmine unit tests with AngularJS. So I setup a test around an existing experimental project I started. I'll just start off with the code, my question is at the bottom.
First my app declaration:
(function () {
"use strict";
angular.module('iconic', [])
.constant('config', {
debug: true,
version: '1.0.0.1'
})
.value('globalStatus', {
currentArea: null,
progress: null,
notice: [
{ title: 'Notice 1 Title', message: 'Notice 1 Message' },
{ title: 'Notice 2 Title', message: 'Notice 1 Message' }
]
});
}());
Then a factory to get data (static now but would be an AJAX call):
(function () {
"use strict";
angular.module('iconic')
.factory('data', ['$http', function ($http) {
function areas() {
return [
{ name: 'home', text: 'Home', enabled: true, active: false },
{ name: 'gallery', text: 'Gallery', enabled: true, active: false },
{ name: 'services', text: 'Services', enabled: true, active: false },
{ name: 'pricing', text: 'Pricing', enabled: true, active: false },
{ name: 'test', text: 'Test', enabled: false, active: false }
];
}
return {
getAreas: areas
};
}]);
}());
Then my controller with the filter:
(function () {
"use strict";
angular.module('iconic')
.controller('NavController', ['$scope', 'data', function ($scope, data) {
$scope.menus = data.getAreas();
}])
.filter('EnabledFilter', ['config', function (config) {
return function (menus) {
if (config.debug)
console.log('matchEnabled', arguments);
var filtered = [];
angular.forEach(menus, function (menu) {
if (menu.enabled) {
filtered.push(menu);
}
});
return filtered;
};
}]);
}());
And then my actual Jasmine test (running this with Chutzpah):
(function () {
"use strict";
var staticData = [
{ name: 'home', text: 'Home', enabled: true, active: false },
{ name: 'gallery', text: 'Gallery', enabled: true, active: false },
{ name: 'services', text: 'Services', enabled: true, active: false },
{ name: 'pricing', text: 'Pricing', enabled: true, active: false },
{ name: 'test', text: 'Test', enabled: false, active: false }
];
describe("NavController Tests", function () {
//Mocks
//Mocks
var windowMock, httpBackend, _data;
//Controller
var ctrl;
//Scope
var ctrlScope;
//Data
var storedItems;
beforeEach(function () {
module('iconic');
});
beforeEach(inject(function ($rootScope, $httpBackend, $controller, data) {
//Mock for $window service
windowMock = { location: { href: "" } };
//Creating a new scope
ctrlScope = $rootScope.$new();
//Assigning $httpBackend mocked service to httpBackend object
httpBackend = $httpBackend;
_data = data;
storedItems = staticData;
//Creating spies for functions of data service
spyOn(data, 'getAreas').andCallThrough();
$controller('NavController', { $scope: ctrlScope, data: _data});
}));
it("should call getAreas on creation of controller", function () {
expect(_data.getAreas).toHaveBeenCalled();
});
});
}());
So this first and simple test to make sure getAreas gets called passes just fine. But I would like to add a test to basically make sure that the filter result is filtering out data from the factory where enabled is false. Any idea how I would go about doing that with Jasmine?
I'm building an app and i've got a list loaded with some info from store, it has a lot of items in it but when I try to scroll down it scrolls back up as if there were not enough items to scroll. Here is some code:
app.views.SearchTab = Ext.extend(Ext.Panel, {
iconCls: 'search',
id: 'search',
items: {
xtype: 'list',
store: app.stores.results,
scroll: 'vertical',
itemTpl: '<div class="list_left_panel"><div class="list_photo_wrapper"><div class="list_photo"><img src="http://realio.cz/images/{link}_0s.jpg" /></div></div></div><div class="list_right_panel"><div class="list_name">{titul}</div><div class="list_info"><div>{cena} Kč</div><div class="list_info_grey">{m2} m<sup>2</sup></div><div>{typ}</div></div></div>',
onItemDisclosure: function (record) {
Ext.dispatch({
controller: app.controllers.detail,
action: 'show',
id: record.getId()
});
}
},
initComponent: function() {
app.stores.results.load();
app.views.SearchTab.superclass.initComponent.apply(this, arguments);
}
});
app.models.Results = Ext.regModel("app.models.Results", {
fields: [
{name: "titul", type: "string"},
{name: "book_id", type: "int"},
...
{name: "u", type: "int"}
]
});
app.stores.results = new Ext.data.Store({
model: "app.models.Results",
proxy: {
type: 'ajax',
url: 'http://site.com/json_list2.php?...',
reader: {
type: 'json',
root: 'markers'
}
},
autoLoad: false
});
How can i fix the list so that it scrolls correctly? Thanks.
add this library this will help you: https://github.com/Lioarlan/UxBufList-Sench-Touch-Extension