Is it by design that the changed event does not pass a data parameter into the function?
$('#MyWizard').on('changed', function(e, data) {
console.log(data);
});
The above shows the data as being undefined.
Update
I suppose I can get around the issue by use this:
$('#MyWizard').on('changed', function(e, data) {
var item = $('#MyWizard').wizard('selectedItem');
});
For anyone else using FuelUX 2.6.1 (or another close version), this question helped me hook into the changed event for datepicker:
$(function() {
$('#idOfDatePicker').datepicker({
date : new Date(),
createInput : false,
dropdownWidth : 170,
restrictDateSelection : true
}).on('changed', function(event, date) {
//Useful code goes here!
});
});
As I stated in my update I used this:
$('#MyWizard').on('changed', function(e, data) { var item = $('#MyWizard').wizard('selectedItem'); });
Related
I am trying to implement an auto sync between my angularJS model and my database.
I am running the following function every ten seconds to get data from from database in which I update my variable products_copy:
$interval(function(){$scope.getProductsSync();},10000);
$scope.getProductsSync = function() {
var q = $q.defer();
$http({
url: '/getData/getProducts.php',
method: "POST",
data: {"user_id":$scope.user_id}
})
.then(function(response) {
if(response.data.valid)
{
console.log('Products sync complete: '+new Date().toLocaleTimeString());
console.log(response.data.products);
$scope.products_copy = response.data.products;
q.resolve('Products sync complete');
}
else if(response.data.msg=="offline")
{
console.log('Products sync offline');
q.resolve('Products sync offline');
}
else
{
console.log('Products sync error');
console.log(response);
q.reject('Products sync error');
}
},
function(response) {
console.log('Products sync error');
console.log(response);
q.reject('Products sync error');
});
return q.promise;
}
Whenever there is a change in this data I want to update my actual product list in my model which is defined by the array products. Hence, I am using the service $watchCollection to detect a change in the data and update my model when there is a change. However this change is triggered in each call even though the data from the database is unchanged.
$scope.$watchCollection('products_copy', function (newValue, oldValue, scope) {
if(newValue!==oldValue)
{
console.log('Watch on products was called');
console.log('Old value: '+oldValue);
console.log('New value: '+newValue);
$scope.products = newValue;
}
});
I want the event to be triggered only when there is change in the array such as:
add item
remove item
edit any property of any item
EDIT 1:
I changed it to angular.equals but even that resulted in trigger in every call. However, when I examined each item in the console I realised angular was adding a property $$hashkey which was varying between the items. Any idea how to solve this?
It is how it should be, because on each response you assign a new reference to $scope.products_copy and no matter that there're no changes of the data inside it, when you do newValue!==oldValue you compare the refereces, they are always different
if you try
var a = [];
var b = [];
console.log(a===b); // false
// the both are empty and seems to be equal
you have to check the data inside old and new data. Try with angular.equals
You can try for angular.equal(object1, object2)
$scope.$watchCollection('products_copy', function (newValue, oldValue, scope) {
if(!angular.equals(newValue, oldValue))
{
console.log('Watch on products was called');
console.log('Old value: '+oldValue);
console.log('New value: '+newValue);
$scope.products = newValue;
}
});
The problem was that angular was inserting a $$hashKey attribute which resulted in a difference even in same objects. Removing this field did the trick for me.
I am creating an ionic project and I am trying to integrate with Algolia autocomplete.js. I managed to make the search system work, however I added a ng-click on my search results and this function is not working as presented in this codepen that I did as example below:
http://codepen.io/marcos_arata/pen/VKVOky
Inside my algolia's result template:
<a ng-click="add_name({{{ name }}})">
Function that should be run when clicked:
$scope.add_name = function(name) {
alert('User added!');
console.log(name);
}
I tried to inject the results inside the scope but didn't work as well:
autocomplete('#search_name', { hint: false, debug: true, openOnFocus: true },[{
source: index.ttAdapter({ hitsPerPage: 15 }),
templates: {
header: '',
suggestion: function(hit) {
$scope.hit = hit;
return template.render(hit);
}
}
}]);
http://codepen.io/marcos_arata/pen/VKVOky
---- SOLVED ----
Instead of creating a ng-click function inside your templates, you can handle the event click of your search inside your "autocomplete:selected" function and use the dataset and suggestion results.
.on('autocomplete:selected', function(event, suggestion, dataset) {
$scope.name = suggestion.name;
console.log($scope.name);
## create any functions with the suggestion and dataset results inside
});
EDITING THE ANSWER:
Here is the codepen:
Apparently the suggestion keep the name clicked, so you dont need an extra function:
.on('autocomplete:selected', function(event, suggestion, dataset) {
$scope.name = suggestion.name;
console.log($scope.name);
});
I'm trying to disable a date in the UI Bootstrap Datepicker connected to a Google calendar if that dates already have 3 or more events.
Thus far I get the array of events using an Angular Factory like this:
gardenpage.factory('Dates', function($http, $q) {
var deffered = $q.defer();
var data = [];
var Dates = {};
Dates.async = function() {
$http.get('http://localhost:7777/events')
.success(function (d) {
data = d;
deffered.resolve();
});
return deffered.promise;
};
Dates.data = function() { return data; };
return Dates;
});
The list of dates needs a bit more preprocessing so I have a function that puts the only dates that have 3 or more entries in a scope-variable:
$scope.occurences = ['2014-07-21','2014-07-28'];
Now finally this is my modified default UI Bootstrap date picker date disable function:
// Disable weekend selection
$scope.disabled = function(date, mode) {
return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ||
$scope.date_occurences.indexOf( $filter('date')(date, 'yyyy-MM-dd') ) !== -1 ));
};
It works as expected except for one little quirk, when the "disabled" function is called by the date picker, the array is empty, waiting for the async callback I presume. Which is why it's first as I select a date in the date picker as my dates gets disabled.
So how to get the callback before the date picker disable function is called, or how do I make it wait ? One alternative might be to refresh the Datepicker after the callback has arrived, but I'm not sure if that function exists on the date picker.
I didn't solve this exactly as stated above but a bit of a workaround:
1.
Used a small code that I found in a stack overflow comment http://plnkr.co/edit/Xwq7YtAD6qNHQw1aES3H?p=preview . Which lets you call the Angular-UI Bootstrap Datepicker "refreshView" using a button or other type of action. Basically setting up a new directive
`app.directive('jmDpRefreshView',function() {
var noop = function(){};
var refreshDpOnNotify = function (dpCtrl) {
return function() {
dpCtrl.refreshView();
};
};
return {
require: 'datepicker',
link: function(scope,elem,attrs,dpCtrl) {
var refreshPromise = scope[attrs.jmDpRefreshView];
refreshPromise.then(noop,noop,refreshDpOnNotify(dpCtrl));
}
};
});`
To call the refreshView functionality
$scope.toggleDisableMode = function() {
dateDisableDeferred.notify(new Date().getTime());
};
The function toggleDisableMode can be called using any type of action, for instance using a button to disable dates from the server: "ng-click='toggleDisableMode()'"
Another thing that might help you is either you could preload your Dates from the server
//preload
$scope.dates = disable_dates();
function disable_dates() {
console.log("disable dates function")
Dates.async().then(function() {
$scope.data = Dates.data();
//do whatever you like with your data
});
}
Or you could call the ".notify()" for the deferred when the data has been fetched from the server and it will disable when it is done.
function disable_dates() {
console.log("disable dates function")
Dates.async().then(function() {
$scope.data = Dates.data();
//console.log($scope.data )
//do whatever you like with your server data.
//notice this line, calls the disable function
dateDisableDeferred.notify(new Date().getTime());
});
}
This solution is attributed to this question and the comments in there:
angular ui datepicker refresh disabled dates
How can I capture the "updater" event from AngularUI's UI Bootstrap directive?
I've defined my HTML:
<input type="text" pattern="[0-9]*" class="span6" placeholder="8675309" ng-model="empid" typeahead="entry for entry in httpEmpIdSearch($viewValue, 8)">
... and my associated function:
$scope.httpEmpIdSearch = function(query, limit)
{
return $http.get(
'/visitorLog/api/v1/employee/?limit=' + limit + '&empid__startswith=' + query
).then(function(response)
{
output = [];
angular.forEach(response.data.objects, function(value, key) {
this.push(value.bems.toString());
}, output);
return output;
});
}
I would like to take additional action (autocomplete a form) when the user clicks on an ID in the popup. If raw Bootstrap I would use the "updater":
$('#sampleElement').typeahead({
minLength: 3,
source: function (query, process)
{
// get the data
},
updater: function (item)
{
// user clicked on an item, do something more!
},
});
I've tried various listeners like:
$scope.$on('typeahead-updated', function(event)
{ ... }
But I've not way to let me capture such an event. Is there some way I can take additional action once a typeahead option is selected?
Also, in version 0.4.0 of the ui-bootstrap library the typeahead-on-select directive is now supported. This should provide your desired event.
See:
https://github.com/angular-ui/bootstrap/commit/91ac17c9ed691a99647b66b3f464e3585398be19
It does not appear that there is a way to hook into that event in the directive. You could however put a watch on the model value and simulate this behavior.
Check out this plunker example
Since you are pulling the list of data from the server on the fly this solution may not work for you. But I would definitely have a look at watch it seems like the best way to achieve the desired outcome.
Something along these lines could work.
$scope.output = [];
$scope.httpEmpIdSearch = function(query, limit)
{
return $http.get(
'/visitorLog/api/v1/employee/?limit=' + limit + '&empid__startswith=' + query
).then(function(response)
{
$scope.output.length = 0;
angular.forEach(response.data.objects, function(value, key) {
this.push(value.bems.toString());
}, $scope.output);
return $scope.output;
});
}
$scope.$watch('empid', function(newValue, oldValue){
if(newValue !== oldValue && $scope.output.indexOf(newValue) !== -1){
//do work here
}
});
The full list of typeahead related directives is here:
https://github.com/angular-ui/bootstrap/tree/master/src/typeahead/docs
typeahead-editable, typeahead-input-formatter, typeahead-loading, typeahead-min-length, typeahead-on-select, typeahead-template-url, typeahead-wait-ms
I wish to read a whole database table to fill a Backbone.js Collection, before updating a View.
I am using fetch and listening to the reset event.
My problem is the reset event fires up before the http request is made to the server.
My question is: how can I render the view AFTER the data is received back from the server on a fetch?
Here is a jsfiddle showing the problem (with a debugger placed at reset):
http://jsfiddle.net/GhaPF/16/
The code:
$(document).ready(function() {
var Item = Backbone.Model.extend({
urlRoot : './items'
});
var ItemList = Backbone.Collection.extend({
model: Item,
url: './items/',
});
var ItemListView = Backbone.View.extend({
el: 'body',
initialize: function(myitemList) {
this.itemlist = myitemList;
this.itemlist.bind('reset', this.debuggThis());
},
debuggThis: function() {
debugger;
},
render: function() {
},
events: {
"keypress #new-item": "createOnEnter"
},
createOnEnter: function(e) {
}
});
$("#new-item").focus();
var itemlist = new ItemList();
var myitemListView = new ItemListView(itemlist);
itemlist.fetch();
});
The following code works, but it just doesn't feel like proper backbone.js (MVC) code since it would be placed outside of the View definition:
itemlist.fetch().complete(function(){
Maybe the issue is this line:
this.itemlist.bind('reset', this.debuggThis());
Should actually be:
this.itemlist.bind('reset', this.debuggThis);
Your debugThis function was getting run at the time you set up the listener for the 'reset' event - not when the event is triggered. This was telling JavaScript that you wanted debugThis to return a callback function instead of having debugThis "be" the callback function.
Also, orangewarp's comment about passing 'this' as the third parameter is probably relevant too. Sot it would end up as:
this.itemlist.bind('reset', this.debuggThis, this);
That's strange. When you fetch() the reset event should be triggered AFTER your collection is populated. So I'm thinking the phenomena that reset happens before the http request is fired up may not be what you think it is.
Instead of using the complete... you could always just use the success callback option like this:
itemlist.fetch({
success: function() {
// Whatever code you want to run.
itemlist.debuggThis();
}
});
Also, when binding your reset you probably want this:
this.itemlist.bind('reset', this.debuggThis, this);