We Keep Coding

Callback timing issue in javascript when passed through view in asp mvc

I have a feeling this is a simple issue I'm missing but after a couple of hours I've given up and decided to post in here.
I'm trying to implement a generic paging partial view that I can use across the entire site. As a result the paging model takes a function that will be bound to the paging controls that is used as a callback at a later time. See UpdateFunction below.
ViewModels.Shared._PaginationPartialViewModel pagination =
new ViewModels.Shared._PaginationPartialViewModel()
{
CurrentPage = Filter.Page,
ItemFrom = GenericHelpers.Paging_GetItemFrom(10, Filter.Page, TotalItems),
ItemTo = GenericHelpers.Paging_GetItemTo(10, Filter.Page, TotalItems),
TotalItems = TotalItems,
TableClass = Filter.Table,
TotalPages = (int)Math.Ceiling((double) TotalItems / 10),
UpdateFunction = "getTransfers('" + Filter.Table + "')"
};
Now when the model is bound to the view, this function is passed in as a callback to a javascript click event paginationClick() like so...
#Model.CurrentPage
The paginationClick() function fires, but when checking the dev console the callback method appears to be firing first. Here's the paginationClick() method... (I know that the page parameter is not currently being utilized btw!)
function paginationClick(control, page, callback)
{
if (!$(control).hasClass('stock-pagination__action_state_active')) {
$(control).parent().find('a').each(function () {
$(this).removeClass('stock-pagination__action_state_active');
});
$(control).addClass('stock-pagination__action_state_active');
callback;
}
}
I anyone can offer an extra pair of eyes it would be much appreciated!

I found a work around with this, instead of passing getTransfers in as a callback, I appended it to the control as a data-attribute then used eval to execute at the correct time like so:
data-callback="#Model.UpdateFunction"
and then
function paginationClick(control, page)
{
if (!$(control).hasClass('stock-pagination__action_state_active')) {
var arr_Controls = [];
$(control).parent().find('a').each(function () {
$(this).removeClass('stock-pagination__action_state_active');
arr_Controls.push($(this));
});
$(control).addClass('stock-pagination__action_state_active');
eval($(control).attr("data-callback"));
//callback;
}
}
It's not the solution I was after but it works. If anyone has any idea how to get it working as a callback please let me know.

Why is my interval not working? (With firebase)

I stuck in a problem by coding on a javascript webapp with firebase:
function start() {
setInterval(getComps, 2000);
}
function getComps() {
permis=true;
for (var pc=policeNum; pc>0; pc--) {
policeRef.child(pc).once('value', function(snapshot) {
var oldData = snapshot.val();
//KI:
var compX=newX-oldData.X;
var compY=newY-oldData.Y;
updatePosition(compX, compY);
});
}
}
(The real code of the app is of course more complicated but this is enough to understand the problem I think) (The start() is called with a button in my index.html)
When I run my app I can see that updatePosition() is only called once in the beginning but not later again in my wanted interval. Do someone know what´s wrong here and can give me a example or explanation of a better code.
Thank you for every answer, I hope you can understand what I mean. (all variables are of course defined)

Javascript giving a TypeError variable is undefined for code (photo gallery) run on server. Same code works locally

i'm putting together a personal website as a portfolio and i'm having trouble getting a photo gallery to work. I found a free Javascript gallery (http://ettrics.com/lab/demo/material-photo-gallery/) that I decided to implement. When putting the page together locally, the javascript runs no problem, however when I upload the page to the site (which already has plenty of other javascript running) I get the following error when scrolling on the page, or when trying to 'fullscreen' one of the images by clicking on it:
TypeError: this._fullImgs is undefined
I tried to isolate the issue and found that a line of code was executing differently on the server, than locally, the excerpt is below:
Gallery.prototype._loadFullImgsDone = function() {
var imgLoad = imagesLoaded(this._fullBox);
imgLoad.on('done', function(instance) {
var imgArr = instance.images;
this._fullImgs = [];
this._fullImgDimensions = [];
this._fullImgsTransforms = [];
for (var i = 0, ii = imgArr.length; i < ii; i++) {
var rect = imgArr[i].img.getBoundingClientRect();
this._fullImgs.push(imgArr[i].img);
this._positionFullImgs.call(this, imgArr[i].img, i);
this._fullImgDimensions.push(rect);
}
this._fullImgsLoaded = true;
}.bind(this));
};
I have found that the images are being found from their source location, however
imgLoad.on('done', function(instance) {
...
executes differently. The site is located at http://http://samueller.tech/photo-best.html id anybody would like to see for themselves the error I am getting.
Thanks in advance, i'm at a complete loss of how to fix this.

I'm seeing (on that site) the resizeHandler is getting called before the images are loaded
Gallery.prototype._handleScroll = debounce(function() {
this._resetFullImg.call(this);
}, 25);
Gallery.prototype._handleResize = function() {
this._resetFullImg.call(this);
};
Then this._resetFullImg fails because there are no images loaded yet which is why this._fullImgs is empty. The code seems to have another variable called _fullImgsLoaded and probably the _resetFullImg method should do nothing if images haven't been loaded.
You could try adding that like this:
// in material-photo-gallery.js line 1379
Gallery.prototype._resetFullImg = function() {
if (!this._fullImagesLoaded) {
return
}
this._fullImgsTransforms = [];
for (var i = 0, ii = this._fullImgs.length; i < ii; i++) {
...
I don't know how this will affect the reset of the gallery code, but it might work. It makes some sense that on your production system, the page load time (with extra JS and stuff) is such that these events might get called before things are ready which is something you don't see locally.
good luck.

AngularJS infinite-scroll issue

I'm trying to use infinite-scroll to lazy load images. I'm getting the following error when it's called though:
TypeError: undefined is not a function
at handler (http://onfilm.us/ng-infinite-scroll.js:31:34)
Here's a very watered down look of what I have thus far.
function tagsController($scope) {
$scope.handleClick = function(tags) {
// Parse Tags
$scope.finished_tags = parsed_data;
};
$scope.$emit( 'handleEmit', { tags = $scope.finished_tags; });
};
function imagesController($scope,$http) {
var rows_per = 5;
$scope.$on('handleBroadcast', function(event, args) {
// Sort the images here, put them in matrix
// Example: matrix[row_number] = { picture1, picture2, picture3 }
$scope.data = matrix;
$scope.loadMore();
};
$scope.loadMore() = function() {
var last = $scope.images.length;
for ( var i = 0; i < rows_per; i++ ) {
$scope.images[last + i] = new Array();
$scope.images[last + i] = $scope.data[last + i].slice( 0 );
}
}
}
The rough idea is that the page loads the first time (w/ no tags) and get images from a PHP script. All of them. They are stored, and loadMore() is called which will populate $scope.images with 5 rows of images. It does, and they are loaded.
The line in that script is accessing $window.height and $window.scrollup. I'm still pretty green w/ Javascript, so feel free to lambast me if I'm doing something horribly wrong.
This is the broken version I'm testing with:
http://onfilm.us/test.html
Here is a version before the lazy loading was implemented, if seeing how the tags work will help. I don't think that's the issue here though.
http://onfilm.us/image_index.html
EDIT: I do think this is a problem w/ the ng-infinite-scroll.js script. The error is on line 31 (of version 1.0.0). It's telling me:
TypeError: undefined is not a function
It doesn't like $window apparently.
My JS Kung Fu is not really equipped to say why. YOu can see a literal copy/paste job from the simple demo here (with the error) onfilm.us/scroll2.html

By refering your site, It appears at first instance that your HTML-markup is not appropriate. You should move infinite-scroll to the parent of ng-repeat directive so that it will not make overlapping calls for each row generated. Please visit http://binarymuse.github.io/ngInfiniteScroll/demo_basic.html

Using a variable in the new media javascript object

I am actually really hoping this is a noob question. Have looked around and tried for about an hour for a solution to this but I'm getting nowhere.
Real simple. I am using Cordova to build Android App. I am going through my code and trying to clean it up and make it more reusable.
I have several views/pages that play audio files. I am using the Cordova media api as HTML5 audio is not well supported.
Anyway, I use JQuery to get the ID of heading tag and then combine it with another string to make a variable. Then I am trying to use that variable to be the source for a "new Media" object. I am definitely missing something here, because it is not working and is returning null. My code is pasted below:
var playing = 0;
var myMedia = null;
var mySound = $("h3").attr("id");
var soundPath = "/android_asset/www/audio/"+mySound+".mp3";
myMedia = new Media('"'+soundPath+'"', stopAudio);
function playAudio() {
switch (playing) {
case 0:
myMedia.play();
document.getElementById('play').src = "../icons/pause-btn-grey#2x.png";
playing = 1;
break;
case 1:
myMedia.pause();
document.getElementById('play').src = "../icons/play-btn-grey#2x.png";
playing = 0;
break;
}
I would really appreciate if someone could point me in the right direction. I am sure it is something I have overlooked but cannot "see the wood from the trees".