Knockoutjs custom binding to display loading gif - javascript

I'm trying to create a custom binding that will show a loading gif while content is loading.
ko.bindingHandlers.loader = {
init: function (element) {
$('<div>').addClass('loader').hide().appendTo($(element));
},
update: function (element, valueAccessor) {
var isLoading = ko.utils.unwrapObservable(valueAccessor());
var $element = $(element);
var $children = $element.children(':not(.loader)');
var $loader = $(element).find('.loader');
if(isLoading) {
$children.stop(true).css('visibility', 'hidden').attr('disabled', 'disabled');
$loader.stop().fadeIn();
} else {
$loader.stop(true).fadeOut(function () {
$children.css('visibility', 'visible').removeAttr('disabled');
});
}
}
};
I can see in the init that div.loader is being appended to the element, and can see the update function fire when isLoading is changed to true. But once the images have loaded (by loaded i mean each image returns a resolved promise on the their respective load event) I don't see the update firing once isLoading is set back to false.
viewModel
function viewModel() {
var self = this;
self.movies = ko.observableArray([]);
self.searchValue = ko.observable();
self.isLoading = ko.observable(false);
self.search = function () {
self.isLoading = true;
$.getJSON(arguments[0].action, { name: this.searchValue() }, function (data) {
self.movies(data);
$.when.apply($, promises).done(function() {
setThumbnailHeight(function () {
self.isLoading = false;
});
});
});
};
var setThumbnailHeight = function(callback) {
var $items = $('.thumbnails li');
var maxHeight = Math.max.apply(null, $items.map(function () {
return $(this).innerHeight();
}).get());
$items.css('height', maxHeight);
callback();
};
}
ko.applyBindings(new viewModel());
setThumbnailHeight is being called at the correct time (once all promises have resolved) and is working properly, in that I see it setting the height of each li to the max height and can see the callback (in this case function(){ self.isLoading = false; } being called.
my binding
<ul class="content thumbnails" data-bind="foreach: movies, loader: $root.isLoading">
<li class="movie">
...
</li>
</ul>
So just to recap, the problem is that the loading gif will be displayed when isLoading is set to true but is not hiding and showing the newly loaded content when it's set back to false.

All observables are function so you cannot assign value to it using =. Use self.isLoading(true); instead of self.isLoading = true;
self.search = function () {
self.isLoading(true);
$.getJSON(arguments[0].action, { name: this.searchValue() }, function (data) {
self.movies(data);
$.when.apply($, promises).done(function() {
setThumbnailHeight(function () {
self.isLoading(false);
});
});
});
};
function(){ self.isLoading(false); }

Related

Unable to process foreach binding, wait for ajax result

I am new to knockout and I have the following issue.
Model:
function AdListModel() {
var self = this;
self.Ads = ko.observableArray([]);
this.addSome = function() {
$.ajax({
type: "GET",
url: '/Home/GetAllAds',
data: { startPosition: 0, numberOfItems: 10},
dataType: "json",
success: function(data) {
self.Ads.push(data);
},
error: function(err) {
alert(err.status + " : " + err.statusText);
}
});
};
this.addSome();
}
// The custom binding (code below) is for dynamic data loading on scroll event (like posts in facebook)
ko.bindingHandlers.scroll = {
updating: true,
init: function(element, valueAccessor, allBindingsAccessor) {
var self = this;
self.updating = true;
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$(window).off("scroll.ko.scrollHandler");
self.updating = false;
});
},
update: function(element, valueAccessor, allBindingsAccessor) {
var props = allBindingsAccessor().scrollOptions;
var offset = props.offset ? props.offset : "0";
var loadFunc = props.loadFunc;
var load = ko.utils.unwrapObservable(valueAccessor());
var self = this;
if (load) {
element.style.display = "";
$(window).on("scroll.ko.scrollHandler", function() {
if (($(document).height() - offset <= $(window).height() + $(window).scrollTop())) {
if (self.updating) {
loadFunc();
self.updating = false;
}
} else {
self.updating = true;
}
});
} else {
element.style.display = "none";
$(window).off("scroll.ko.scrollHandler");
self.updating = false;
}
}
};
ko.applyBindings(new AdListModel());
HTML:
<div class="col-lg-12" data-bind="foreach: Ads">
// some code
</div>
<div data-bind="scroll: Ads().length < 50, scrollOptions: { loadFunc: addSome, offset: 10 }">loading</div>
So, initially AJAX loads 10 records from database and it renders perfectly fine. Then if I scroll down, it is supposed to add, push to my observable array another 10 (same records). It works If I add dummy data (without database) to AJAX SUCCESS, BUT if I want to push ajax result to observable array it gives me an error "Unable to process binding".
I understand that ajax is async and it needs some time to load date and at the time of rendering there is no data, but I don't know what to do. I need to wait for ajax, but how... or it could be another issue. Thanks.

How to check if all documents are loaded with Firebase.util pagination

How can I check if I have to stop calling the loadMore() function, because all the documents have already been loaded from the database?
In the example below I'm using Ionic, but it's the same also with ng-infinite-scroll in AngularJS apps.
This is my actual code:
HTML:
...
<ion-infinite-scroll
ng-if="!noMoreItemsToLoad"
on-infinite="loadMore()"
distance="5%">
</ion-infinite-scroll>
</ion-content>
JS Controller:
$scope.loadMore = function(){
console.log('Loading more docs...');
Items.loadMore(); // calling the .next() method inside the Items service
if( !Items.hasNext()) { $scope.noMoreItemsToLoad = true; }
$scope.$broadcast('scroll.infiniteScrollComplete');
}
JS Items Factory:
.factory('Items', function (FIREBASE_URL, $firebaseArray, $firebaseObject) {
var itemsRef = new Firebase(FIREBASE_URL + 'items/');
var scrollRef = new Firebase.util.Scroll(itemsRef, 'name');
var self = {
getAllItems : function(){ ... },
loadMore: function(){
scrollRef.scroll.next(4);
},
hasNext: function(){
if(scrollRef.scroll.hasNext()) { return true; }
else { return false; }
}
}
return self;
}
Do the scroll.next in timeout, for example:
loadMore: function(){
$timeout(function() {
scrollRef.scroll.next(4);
});
},
I had the same issue and I think the solution is to modify the hasNext() function on firebase.util.js:
Cache.prototype.hasNext = function() {
return this.count === -1 || this.endCount >= this.start + this.count;
};
I put a missing equal sign (=) before this.start
I hope it works for you.

Is there any way to close Angular UI tooltip by clicking outside it?

In order to get this ability i have extended tooltip provider.
function customTooltip($document, $tooltip) {
var tooltip = $tooltip('customTooltip', 'customTooltip', 'click'),
parentCompile = angular.copy(tooltip.compile);
tooltip.compile = function (element, attrs) {
var parentLink = parentCompile(element, attrs);
return function postLink(scope, element, attrs) {
var firstTime = true;
parentLink(scope, element, attrs);
var onDocumentClick = function () {
if (firstTime) {
firstTime = false;
} else {
element.triggerHandler('documentClick');
}
};
var bindDocumentClick = function () {
$document.on('click', onDocumentClick);
};
var unbindDocumentClick = function () {
$document.off('click', onDocumentClick);
};
scope.$watch('tt_isOpen', function (newValue) {
firstTime = true;
if (newValue) {
bindDocumentClick();
} else {
unbindDocumentClick();
}
});
scope.$on('$destroy', function onTooltipDestroy() {
unbindDocumentClick();
});
};
};
return tooltip;
}
But this approach doesn't work already because there is no tt_isOpen property in scope now. Actually i can't see any of tooltip properties just only my parent scope. I guess this happend because of changes in tooltip.js 124 line https://github.com/angular-ui/bootstrap/blob/master/src/tooltip/tooltip.js#L124. Is there any way now to close tooltip by clicking outside it or at least to get isOpen flag?
There is a pull request that implements an outsideClick trigger for tooltips and popovers. It will be included in angular-ui 1.0.0, which is expected to be released by the end of the year. Once it is implemented, you will be able to simply add tooltip-trigger="outsideClick" to your element.
There is an open pull request Here to add this feature. A hack workaround you can try is to disable then enable the trigger element as the directive will call this method:
attrs.$observe( 'disabled', function ( val ) {
if (val && ttScope.isOpen ) {
hide();
}
});
This variant works on angular 1.3.15 and angular-ui version 0.13
function customTooltip($document, $tooltip) {
var tooltip = $tooltip('customTooltip', 'customTooltip', 'click'),
parentCompile = angular.copy(tooltip.compile);
tooltip.compile = function (element, attrs) {
var parentLink = parentCompile(element, attrs);
return function postLink(scope, element, attrs) {
parentLink(scope, element, attrs);
var isOpened = false;
element.bind('click', function () {
bindDocumentClick();
});
var onDocumentClick = function () {
if (!isOpened) {
isOpened = true;
} else {
element.triggerHandler('documentClick');
unbindDocumentClick();
isOpened = false;
}
};
var bindDocumentClick = function () {
$document.on('click', onDocumentClick);
};
var unbindDocumentClick = function () {
$document.off('click', onDocumentClick);
};
scope.$on('$destroy', function onTooltipDestroy() {
unbindDocumentClick();
});
};
};
return tooltip;
}

ComboBox that shows a tree in the dropdown

I want to write a ComboBox which lets the user type in a query and at the same time lets him select a value from a tree. I have tried writing a tree-select but if I change the code to inherit from dijit.form.ComboBox instead of a dijit.form.Select, the code breaks.
Here is what I had tree for tree select:
dojo.declare('TreeSelect',dijit.form.Select,{
constructor: function(widgetArgs){
this.tree = widgetArgs.tree || new FC_Tree();
this.initTree = widgetArgs.initTree;
if(dojo.isFunction(this.initTree))
this.initTree();
},
postCreate: function(){
this.inherited(arguments);
this.option = {label: '', value: 'NoValue'};
this.tree.option = this.option;
this.addOption(this.option);
dojo.connect(this.tree,'onClick',this,'closeDropDown');
dojo.connect(this.tree,'itemSelected',this,'selectOption');
},
selectOption: function(opt){
this.option.label = opt.label || opt;
this.option.value = opt.value || opt;
this.option.id = opt.id || opt;
this.set('value',this.option);
},
_getMenuItemForOption: function (option){
return this.tree;
},
openDropDown: function(){
this.tree.refresh();
this.inherited(arguments);
},
clear: function(){
this.tree.clear();
this.tree.option.value = '';
this.tree.option.label = '';
this.tree.option.id = '';
this.set('value',this.tree.option);
},
initializeTree: function(treeData) {
// Init the tree only if needed
dojo.forEach(treeData, function(field) {
var store = this.tree.model.store;
store.newItem(field);
}, this);
},
setOpenCallback: function(callback){
this.tree.setOpenCallback(callback);
},
resetTree: function() {
var store = this.tree.model.store;
store.fetch( { query: { id: "*" },
onItem: function(item) {
store.deleteItem(item);
}
});
}
});
I had tried replacing the code for combobox like this:
dojo.declare('TreeSelect',dijit.form.ComboBox,{
Please help me rectify it.
Thanks in advance!
Adding the code for FC_Tree:
dojo.declare('FC_Tree',dijit.Tree,{
showRoot: false,
openOnClick: true,
noIconForNode: true,
noMarginForNode: true,
persist: false,
openCallback: null,
constructor: function(){
if(dojo.isUndefined(arguments[0]) || dojo.isUndefined(arguments[0].model))
{
var forest_store = new FC_DataStore({id: 'id', label: 'label'});
this._storeloaded = false;
dojo.connect(forest_store,'loaded',this,function(){this._storeloaded = true;})
this.model = new dijit.tree.ForestStoreModel({store:forest_store});
}
},
setOpenCallback: function(callback){
this.openCallback = callback;
},
option: {},
itemSelected: function(item){
},
onClick: function(item, node, evt){
var store = this.model.store;
get = function(){
return store.getValue(item, "isDir");
};
// on folder click mark it unselectable
if(get("isDir"))
{
this.isExpanded = true;
this.isExpandable = true;
}
else
{ //In case the item has 'onClick' delegate execute it and assign the output to 'selItem'
var selItem = (item.onClick && item.onClick[0])? item.onClick[0](this.model.store,item.parentID[0]):item.id[0];
this.option.id = item.id;
this.option.value = item.value;
this.option.label = item.label;
this.itemSelected(this.option);
}
},
onOpen: function(item, node){
if(this.rootNode.item == item){
return this.inherited(arguments);
}
var data = (this.openCallback != null) ? this.openCallback(item, node) : {};
if(!data.length){
return this.inherited(arguments);
}
FC_Comm.when(data,{
onCmdSuccess: dojo.hitch(this,function(data){
var store = this.model.store;
var children = store.getValues(item, 'children');
dojo.forEach(children, function(child) {
// don't delete child if doNotDelete flag is true
if(!store.getValue(child, "doNotDelete"))
store.deleteItem(child);
});
if (data) {
var store = this.model.store;
if (store) {
dojo.forEach(data, function(child) {
store.newItem(child, {parent : item, attribute: 'children'});
});
}
}
})
});
},
refresh: function(){
if(this._storeloaded){
// Close the store (So that the store will do a new fetch()).
this.model.store.clearOnClose = true;
this.model.store.close();
// Completely delete every node from the dijit.Tree
this._itemNodesMap = {};
this.rootNode.state = "UNCHECKED";
this.model.root.children = null;
// Destroy the widget
this.rootNode.destroyRecursive();
// Recreate the model, (with the model again)
this.model.constructor(this.model)
// Rebuild the tree
this.postMixInProperties();
this._load();
this._storeloaded = false;
}
},
clear: function(){
this.model.store.load([]);
}
});
Possibly you will find inspiration / answer in this fiddle
The recursiveHunt and selectTreeNodeById functions are logic to seek out the path of an item by its id. Its quite excessive and you may find a better solution (dont know 100% what data your json is like)..
Basically, use FilteringSelect and reference the tree in this object. Also for Tree, reference the select.
Then for your tree, hook into load function (also called on refresh afaik) and in turn for the select, use onBlur to initate selecting treenode.
var combo = new dijit.form.FilteringSelect({
onBlur: function() {
// called when filter-select is 'left'
if (this.validate()) {
// only act if the value holds an actual item reference
var id = this.get("value");
var name = this.get("displayedValue");
this.tree.selectNode(id);
}
}
});
var tree = new dijit.Tree( { ....
onLoad: function() {
combostore.setData(this.model.store._arrayOfAllItems);
},
onClick: function(item) {
// uses 'this.combo', must be present
// also, we must have the same 'base store' for both combo and model
var _name = this.model.store.getValue(item, this.combo.searchAttr);
this.combo.set("item", item, false, _name);
},
selectNode: function(lookfor) {
selectTreeNodeById(this, lookfor);
},
combo: combo // <<<<<<
});
combo.tree = tree // <<<<<<
Make sure that the model has a rootId, and also that your select.searchAttr matches tree.model.labelAttr. See working sample on the fiddle

how can I cause any change to a variable in an internal function to affect main variable value

I know java script doesn't have call by reference. So how can I solve this?
(function($){
$.fn.extend({
something: function(options) {
var Status;
var defaults = {
regex:/^([\u0600-\u06FF]|\s)*$/,
errortxt:"Invalid input",
emptytxt:"It should not be empty"
}
var options = $.extend(defaults, options);
$(this).bind('change', function () {
Status = true;
$(this).each(function() {
/*variables*/
var necessaryElement;
if (options.regex && options.errortxt && options.errorsection)
{
var filter = options.regex;
var $this = $(this);
var wrongMessage = options.errortxt;
var $errordiv = $("[ID$="+options.errorsection+"]");
} else{
console.log("Error : Not enough arguments for invoking something Plugin");
}
if (options.emptytxt)
{
var noMessage = options.emptytxt;
necessaryElement = true;
}
else
{
necessaryElement = false;
}
var elementvalue = $this.val();
/* Methods */
if (elementvalue != "" && necessaryElement) {
if (filter.test(elementvalue)){
$this.removeClass("error").addClass("ok");
$errordiv.fadeOut(300);
} else {
Status = false;
$this.removeClass("ok").addClass("error");
$errordiv.fadeIn(200);
$errordiv.text(wrongMessage);
}
} else if (elementvalue == "" && necessaryElement) {
Status = false;
$this.removeClass("ok").addClass("error");
$errordiv.fadeIn(200);
$errordiv.text(noMessage);
}
});
});
return Status;
}
});
})(jQuery);
and I call it in another js in this way:
var myarray=new Array();
myarray[0] = $('#selector').something({
regex:/^([\u0600-\u06FF]|\s)*$/,
// another options
});
$('#selector').change(function (){
alert (myarray[0]);
});
but it alerts undefined.
If I change var Status to var Status= true Then it always alerts true.
Can anyone help me? How I can change the code to return the desired Status?
Edit : Trying to be clearer.
Something() returns a value which is modified by change.
So when you call something you return the value unmodified.
Then you call change that will change the value, but it's not passed by reference in the array so it won't change anything.
You may want to use the data function available on JQuery objects for keeping data.
Here is a simplified version:
(function($){
$.fn.extend({
something: function(options) {
$(this).bind('change', function () {
$(this).data('status','true');
});
}
});
})(jQuery);
$(document).ready(function() {
var myarray=new Array();
myarray[0] = $('#selector').something({
regex:/^([\u0600-\u06FF]|\s)*$/
});
$('#selector').change(function (){
alert ($(this).data('status'));
});
});

Categories