I have a page with a carousel which will send an ajax request each time a slide has changed, and will generate products related the slide into another carousel at the bottom.
At the moment when each slide has changed, the products are successfully drawn with Ajax, though I need to initiate the slider with the products once the ajax request has loaded. Right now the slider tries to initialize before the requests have finished.
On the bottom of the code I added, the each function adds each of the getProducts function to an array and then when it is done, it should initialize the slider. Though in the console the message 'this is initialized' happens before the 'success' messages in the Ajax request.
Have I used the deferred wrong in this example to cause this problem?
var products = [],
uniqueProducts = [],
defs = [];
var el;
$('.your-class [data-slick-index="' + currentSlide + '"] a').each(function(i) {
el = $(this).attr("href");
products.push(el);
$.each(products, function(j, el) {
if ($.inArray(el, uniqueProducts) === -1)
uniqueProducts.push(el);
console.log("pushed" + uniqueProducts);
});
});
function getProducts(el) {
var def = new $.Deferred();
var url = el;
$.get(url, function(data) {
var imageArray = data.match(/<img itemprop="image" [\S\s]*?>/ig);
var $image = $(imageArray[0]);
var imageUrl = $image.attr('src');
var name = $image.attr('title');
var priceArray = data.match(/<p class="price">[\S\s]*?<\/p>/ig);
var priceEl = $(priceArray[0]).find('[itemprop=price]');
priceEl.children().remove();
var price = priceEl.text() ? '$' + priceEl.text() : '';
$( ".carousel2" ).append( '<div><img src=\" '+ imageUrl +'\"></div>');
console.log("success");
def.resolve();
});
return def.promise();
}
$.each(uniqueProducts, function(i, el) {
defs.push(getProducts(el));
});
$.when($,defs).done(function () {
$('.carousel2').slick({ speed: 500, autoplay: false, autoplaySpeed: 4000, arrows:false });
console.log("this is initialized");
});
}
With credit to this answer, building uniqueProducts will simplify to two one-liners.
var uniqueProducts = $('.your-class [data-slick-index="' + currentSlide + '"] a').map(function(el) {
return $(el).attr('href');
}).get().filter(function(href, pos, self) {
return self.indexOf(href) == pos;
});
And getProducts() should simplify as follows :
function getProducts(url) {
return $.get(url).then(function(data) {
var image = $(data.match(/<img itemprop="image" [\S\s]*?>/ig)[0]);
var price = $(data.match(/<p class="price">[\S\s]*?<\/p>/ig)[0]).find('[itemprop=price]').children().remove().end().text();
return {
name: image.attr('title'),
image: image,
price: price ? '$' + price : ''
};
});
}
Note that getProducts() now has no side effects but returns a data object.
Then by using uniqueProducts.reduce(...), you can call getProducts() and process the data delivered by the promises.
Assuming everything takes place in a function, you will end up with something like this :
function initializeCarousel() {
return $('.your-class [data-slick-index="' + currentSlide + '"] a')
.map(function(el) {
return el.href;
})
.get()
.filter(function(href, pos, self) {
return self.indexOf(href) == pos;
})
.reduce(function(sequence, url) {
var productPromise = getProducts(url);
return sequence
.then(function() {
return productPromise;
})
.then(function(dataObj) {
$(".carousel2").append(dataObj.image);
// ... dataObj.name ...
// ... dataObj.price ...
}, function() {
return sequence;//skip over error
});
}, $.when())//resolved starter promise for the reduction
.then(function () {
$('.carousel2').slick({ speed: 500, autoplay: false, autoplaySpeed: 4000, arrows:false });
console.log("this is initialized");
});
}
Features of this particular .reduce pattern are :
ajax calls are made in parallel.
very simply converted serial calls, if required.
the order of images appended to the carousel will be congruent with the reduced array, ie the "right order".
any individual ajax error does not scupper the whole enterprise.
no need for the intermediate promises array or for jQuery's cumbersome $.when.apply(null, promises) (or the more friendly .all() in other libs).
I haven't played with $.when for a while but I think you could maybe get this working without having to create $.Deferred() instances as $.get will return this for you.
Possibly try having getProducts return the $.get instead of def.promise and take out any reference to def?
Hope that can help you out!
p.s I hunted out some old code where I used this $.when to see how I used it with $.get. I've simplified it and something along the lines of the following should work.
$.when([
$.get("data/a.json"),
$.get("data/b.json"),
$.get("data/c.json")
]).done(function (t1, t2, t3) {
app.a = t1[0];
app.b = t2[0];
app.c = t3[0];
});
Related
I am trying to get the links from inside an iframe and return them as a function result, my simplified code looks something like this:
var casper = require("casper").create({
verbose: true,
logLevel: "debug",
webSecurityEnabled: false
});
var url = casper.cli.get(0);
casper.on('remote.message', function(msg) {
this.echo(msg);
})
casper.start(url, function () {
thelinks = getLinksFromIframes( casper );
console.log("doesn't work:" + thelinks);
});
function getLinksFromIframes( context ) {
var links = [];
var iframes = context.evaluate( function() {
var iframes = [];
[].forEach.call(document.querySelectorAll("iframe"), function(iframe, i) { iframes.push( i ); });
return iframes;
});
iframes.forEach( function( index ) {
context.withFrame(index, function() {
links = links.concat( this.getElementsAttribute( 'a', 'href' ) );
console.log("works: " + links);
});
});
return links;
}
casper.run(function() {
console.log('done');
this.exit();
});
The problem is that the function doesn't return anything, I can only read the links var inside withFrame, i know there are other ways to get the links, but the code is this way because it part of something more complex that will analyze nested iframes, and the amount of iframes inside iframes is unknown. Is there any way I could wait on withFrame or something that will allow me to return the links as the function result?
That's expected, because casper.withFrame is an asynchronous step function. Like all other functions that begin with either then or wait, it schedules a step in the CasperJS execution queue.
When those scheduled steps are executed (at the end of the current step, which is the then callback of casper.start in your case), getLinksFromIframes has long finished and returned an empty array.
Is there any way I could wait on withIframe or something that will allow me to return the links as the function result?
No, but you can use a callback:
function getLinksFromIframes( callback ) {
var links = [];
var iframes = this.evaluate( function() {
var iframes = [];
[].forEach.call(document.querySelectorAll("iframe"), function(iframe, i) { iframes.push( i ); });
return iframes;
});
iframes.forEach( function( index ) {
this.withFrame(index, function() {
links = links.concat( this.getElementsAttribute( 'a', 'href' ) );
console.log("works: " + links);
});
}, this);
this.then(function(){
callback.call(this, links);
});
}
casper.start(url, function () {
getLinksFromIframes.call(this, function(links){
thelinks = links;
console.log("Links: " + thelinks);
});
})
.then(function(){
console.log("Links later: " + thelinks);
})
.run();
I have the following code which is working except for the $.when.apply($, promises).done() function (I have console logging showing when things are being processed).
I don't understand why the .done is not functioning.
What the code is basically doing is for each select in a filter container populate the select with values form an indexed db which is its own function and returns a promise. I can see everything working but the final .done is supposed to display items on the screen when everything has rendered, however the screen elements do not show and the page stays white.
grid.genPage = function() {
console.time('genPage');
$(grid.settings.filterContainer).hide();
var gridParent = grid.e.parent('div');
gridParent.hide();
var promises = [];
return $.Deferred(function(){
var self = this;
if (!grid.settings.startGenPage.call(this, grid)){
self.reject();
}
grid.dtOptions.oColVis.aiExclude = [0];
grid.displayFields = [];
$.when(
grid.buildFilter(),
grid.buildViews(),
grid.generateDataTable(grid.showColumns),
grid.buildManageButtons()
).then(function(){
console.log('start populating filters');
$.each(grid.config.configs[grid.settings.defaultView], function(i, v) {
var p = $.Deferred(function(){
var self = this;
var field = Object.keys(v); //get field Name
if ($.inArray(i, grid.configIgnorArray) > -1) {
console.log('ignore resolve');
self.resolve();
}
var c = v[field];
if (c.filters.fieldType === 'select') {
var el = $('select[name="' + grid.e.prop('id') + 'Filter_' + field + '"]');
var os = c.options.objectStore;
var idx = c.options.idx;
var s = c.options.lookup;
$.when(grid.checkCache(el, c.options.objectStore, c.options.idx, c.options.lookup))
.then(function(){
console.log('select resolve');
self.resolve();
});
}else {
console.log('other resolve');
self.resolve();
}
});
promises.push(p);
});
});
}).then(function(){
$.when.apply($, promises).then(function(){
console.log('end populating filters');
console.log('genpage finish');
grid.settings.completeGenPage.call(this, grid);
$(grid.settings.filterContainer).show();
gridParent.show();
console.timeEnd('genPage');
self.resolve();
});
}).promise();
};
In the above code the console.log('end populating filters'); never appear in the console. I am sure it's an issue with something not resolving correctly but I cannot see where.
Thanks in advance
You need to resolve the first deferred object in order to fire the then() success callback:
self.resolve();
I'm trying to use deferred/promise in a loop, but I get strange behavior. My code is as follows:
var images = [];
var numImages = Blobs.length;
var image = {};
console.log("numImages: " + numImages);
function doAsyncOriginal(i) {
var defer = $.Deferred();
image.original = Blobs[i].key;
image.resized = '';
image.thumbnail = '';
images.push(image);
console.log("i: " + i + " image: " + image.original);
console.log("images[" + i + "]: " + images[i].original);
defer.resolve(i);
return defer.promise();
}
$(function(){
var currentImage = doAsyncOriginal(0);
for(var i = 1; i < numImages; i++){
currentImage = currentImage.pipe(function(j) {
return doAsyncOriginal(j+1);
});
}
$.when(currentImage).done(function() {
console.log(JSON.stringify(images));
});
});
The Blob used in the code is an array of objects that I get from remote webservice, which contains properties about the images (it comes from filepicker.io's pickandstore method to be precise).
When I run this, I get the following in console:
numImages: 2
i: 0 image: pictures_originals/3QnQVZd0RryCr8H2Q0Iq_picture1.jpg
images[0]: pictures_originals/3QnQVZd0RryCr8H2Q0Iq_picture1.jpg
i: 1 image: pictures_originals/MD3KO6GjT8SNFYoPcG8J_picture2.jpg
images[1]: pictures_originals/MD3KO6GjT8SNFYoPcG8J_picture2.jpg
[
{
"original":"pictures_originals/MD3KO6GjT8SNFYoPcG8J_picture2.jpg",
"resized":"",
"thumbnail":""
},
{
"original":"pictures_originals/MD3KO6GjT8SNFYoPcG8J_picture2.jpg",
"resized":"",
"thumbnail":""
}
]
Although it shows images[0] and images[1] correctly, when printing separately, the object array shows only twice images[1]!!!
Am I doing something wrong???
Thanks in advance for your time.
UPDATE: I corrected the code based on comment of #TrueBlueAussie
You are reusing the same image object in every call to doAsyncOriginal(), so every element of your images array is pointing to the same object.
You need to create the object inside your function:
var image = {}; // <-- delete this
function doAsyncOriginal(i) {
var image = {};
// ...
}
This problem is unrelated to promises/deferreds, and promises/deferreds really aren't serving any purpose in your code. You could just do this:
$(function(){
var images = Blobs.map(function (blob) {
return {
original: blob.key,
resized: '',
thumbnail: ''
};
});
console.log(JSON.stringify(images));
});
In doAsyncOriginal you resolve your deferred before returning it's promise or even before adding the done handler on it.
You should delay the defer.resolve(i) call, so the deferred will be resolved later and enter the done handler...
function doAsyncOriginal(i) {
var defer = $.Deferred();
// ...
// Function.bind equivalent to jQuery.proxy
window.setTimeOut(defer.resolve.bind(defer, i), 0);
return defer.promise();
}
What I have is simple CRUD operation. Items are listed on page, when user clicks button add, modal pops up, user enters data, and data is saved and should automatically (without refresh)be added to the list on page.
Service:
getAllIncluding: function(controllerAction, including) {
var query = breeze.EntityQuery.from(controllerAction).expand(including);
return manager.executeQuery(query).fail(getFailed);
},
addExerciseAndCategories: function(data, initialValues) {
var addedExercise = manager.createEntity("Exercise", initialValues);
_.forEach(data, function(item) {
manager.createEntity("ExerciseAndCategory", { ExerciseId: addedExercise._backingStore.ExerciseId, CategoryId: item.CategoryId });
});
saveChanges().fail(addFailed);
function addFailed() {
removeItem(items, item);
}
},
Controller:
$scope.getAllExercisesAndCategories = function() {
adminCrudService.getAllIncluding("ExercisesAndCategories", "Exercise,ExerciseCategory")
.then(querySucceeded)
.fail(queryFailed);
};
function querySucceeded(data) {
$scope.queryItems = adminCrudService.querySucceeded(data);
var exerciseIds = _($scope.queryItems).pluck('ExerciseId').uniq().valueOf();
$scope.exerciseAndCategories = [];
var createItem = function (id, exercise) {
return {
ExerciseId: id,
Exercise : exercise,
ExerciseCategories: []
};
};
// cycle through ids
_.forEach(exerciseIds, function (id) {
// get all the queryItems that match
var temp = _.where($scope.queryItems, {
'ExerciseId': id
});
// go to the next if nothing was found.
if (!temp.length) return;
// create a new (clean) item
var newItem = createItem(temp[0].ExerciseId, temp[0].Exercise);
// loop through the queryItems that matched
_.forEach(temp, function (i) {
// if the category has not been added , add it.
if (_.indexOf(newItem.ExerciseCategories, i.ExerciseCategory) < 0) {
newItem.ExerciseCategories.push(i.ExerciseCategory);
}
});
// Add the item to the collection
$scope.items.push(newItem);
});
$scope.$apply();
}
Here is how I add new data from controller:
adminCrudService.addExerciseAndCategories($scope.selectedCategories, { Name: $scope.NewName, Description: $scope.NewDesc });
So my question is, why list isn't updated in real time (when I hit save I must refresh page).
EDIT
Here is my querySuceeded
querySucceeded: function (data) {
items = [];
data.results.forEach(function(item) {
items.push(item);
});
return items;
}
EDIT 2
I believe I've narrowed my problem !
So PW Kad lost two hours with me trying to help me to fix this thing (ad I thank him very very very much for that), but unfortunately with no success. We mostly tried to fix my service, so when I returned to my PC, I've again tried to fix it. I believe my service is fine. (I've made some changes as Kad suggested in his answer).
I believe problem is in controller, I've logged $scope.items, and when I add new item they don't change, after that I've logged $scope.queryItems, and I've noticed that they change after adding new item (without refresh ofc.). So probably problem will be solved by somehow $watching $scope.queryItems after loading initial data, but at the moment I'm not quite sure how to do this.
Alright, I am going to post an answer that should guide you on how to tackle your issue. The issue does not appear to be with Breeze, nor with Angular, but the manner in which you have married the two up. I say this because it is important to understand what you are doing in order to understand the debug process.
Creating an entity adds it to the cache with an entityState of isAdded - that is a true statement, don't think otherwise.
Now for your code...
You don't have to chain your query execution with a promise, but in your case you are returning the data to your controller, and then passing it right back into some function in your service, which wasn't listed in your question. I added a function to replicate what yours probably looks like.
getAllIncluding: function(controllerAction, including) {
var query = breeze.EntityQuery.from(controllerAction).expand(including);
return manager.executeQuery(query).then(querySucceeded).fail(getFailed);
function querySucceeded(data) {
return data.results;
}
},
Now in your controller simply handle the results -
$scope.getAllExercisesAndCategories = function() {
adminCrudService.getAllIncluding("ExercisesAndCategories", "Exercise,ExerciseCategory")
.then(querySucceeded)
.fail(queryFailed);
};
function querySucceeded(data) {
// Set your object directly to the data.results, because that is what we are returning from the service
$scope.queryItems = data;
$scope.exerciseAndCategories = [];
Last, let's add the properties we create the entity and see if that gives Angular a chance to bind up properly -
_.forEach(data, function(item) {
var e = manager.createEntity("ExerciseAndCategory");
e.Exercise = addedExercise; e.Category: item.Category;
});
So I've managed to solve my problem ! Not sure if this is right solution but it works now.
I've moved everything to my service, which now looks like this:
function addCategoriesToExercise(tempdata) {
var dataToReturn = [];
var exerciseIds = _(tempdata).pluck('ExerciseId').uniq().valueOf();
var createItem = function (id, exercise) {
return {
ExerciseId: id,
Exercise: exercise,
ExerciseCategories: []
};
};
// cycle through ids
_.forEach(exerciseIds, function (id) {
// get all the queryItems that match
var temp = _.where(tempdata, {
'ExerciseId': id
});
// go to the next if nothing was found.
if (!temp.length) return;
// create a new (clean) item
var newItem = createItem(temp[0].ExerciseId, temp[0].Exercise);
// loop through the queryItems that matched
_.forEach(temp, function (i) {
// if the category has not been added , add it.
if (_.indexOf(newItem.ExerciseCategories, i.ExerciseCategory) < 0) {
newItem.ExerciseCategories.push(i.ExerciseCategory);
}
});
// Add the item to the collection
dataToReturn.push(newItem);
});
return dataToReturn;
}
addExerciseAndCategories: function (data, initialValues) {
newItems = [];
var addedExercise = manager.createEntity("Exercise", initialValues);
_.forEach(data, function (item) {
var entity = manager.createEntity("ExerciseAndCategory", { ExerciseId: addedExercise._backingStore.ExerciseId, CategoryId: item.CategoryId });
items.push(entity);
newItems.push(entity);
});
saveChanges().fail(addFailed);
var itemsToAdd = addCategoriesToExercise(newItems);
_.forEach(itemsToAdd, function (item) {
exerciseAndCategories.push(item);
});
function addFailed() {
removeItem(items, item);
}
}
getAllExercisesAndCategories: function () {
var query = breeze.EntityQuery.from("ExercisesAndCategories").expand("Exercise,ExerciseCategory");
return manager.executeQuery(query).then(getSuceeded).fail(getFailed);
},
function getSuceeded(data) {
items = [];
data.results.forEach(function (item) {
items.push(item);
});
exerciseAndCategories = addCategoriesToExercise(items);
return exerciseAndCategories;
}
And in controller I have only this:
$scope.getAllExercisesAndCategories = function () {
adminExerciseService.getAllExercisesAndCategories()
.then(querySucceeded)
.fail(queryFailed);
};
function querySucceeded(data) {
$scope.items = data;
$scope.$apply();
}
I am creating an object to handle the YouTube API and I have two methods:
getCommentList - getting a url for the current upload,for example http://gdata.youtube.com/feeds/api/videos/VIDEO_ID/comments?alt=json and return an array of objects - author of the comment and the content of the comment.
getEntriesObject - returning an array with objects for each upload entry we have title,thumbnail,and the comment list that returned from getCommentList
My jQuery code:
var Youtube = {
getCommentObject : function(url){
if( url ){
var currentCommentFeed = {},
commentsList = [];
$.getJSON(url,function(data){
$.each(data.feed.entry,function(index){
currentCommentFeed = this;
commentsList.push({
author : currentCommentFeed.author[0].name.$t,
content : currentCommentFeed.content.$t
});
});
return commentsList;
});
}
},
getEntriesObject : function(){
var username = 'SOMEYOUTUBEUSERHERE',
url = 'http://gdata.youtube.com/feeds/api/users/' + username + '/uploads?alt=json',
currentEntry = {},
currentObject = {},
entryList = [];
// Scope fix
var that = this;
$.getJSON(url,function(data){
$.each(data.feed.entry, function(index){
// Caching our entry
currentEntry = this;
// Adding our entry title and thumbnail
currentObject = {
title: currentEntry.title.$t
};
if(currentEntry.media$group.media$thumbnail.length == 4)
currentObject['thumbnail'] = currentEntry.media$group.media$thumbnail[3].url;
// Let`s get the comments - undefined....
currentObject['comments'] = that.getCommentObject(currentEntry.gd$comments.gd$feedLink.href + "?alt=json");
console.log(currentObject);
entryList.push(currentObject);
});
});
return entryList;
}
/*
entry[i].title.$t
entry[i].gd$comments.gd$feedLink.href + "?alt=json"
entry[i].media$group.media$thumbnail[3]
// Comments
entry[i].author.name.$t
entry[i].author.content.$t
*/
};
I have console.log(currentObject) and am getting the title. But am not getting the thumbnail URL and the comments.
In addition, when I run getEntriesObject I get back an empty array.
When you call return in the callback to $.getJSON you are returning only that callback function, not the "outer" getCommentObject. Thus when you later call that.getCommentObject you're not getting anything in return (undefined).
getCommentObject: function(url){
if( url ){
// Snip ...
$.getJSON(url,function(data){
// Snip ...
return commentsList; // <- Here
});
}
}
To amend this make getCommentObject take a callback function.
getCommentObject: function(url, callback){
if( url ){
// Snip ...
$.getJSON(url,function(data){
// Snip
// Remove the return statement
callback(commentsList);
});
}
}
Call this function like this:
that.getCommentObject(
currentEntry.gd$comments.gd$feedLink.href + "?alt=json",
function (commentsList) {
currentObject['comments'] = commentsList;
});
Replacing
currentObject['comments'] = that.getCommentObject(currentEntry.gd$comments.gd$feedLink.href + "?alt=json");
You are getting the empty comments because the return statement is in the wrong place. It is in the getJSON callback function. You need to move it from line no 19 to 21 so that it becomes the return statement for getCommentObject. This will fix the first problem. (comments undefined)
Second getEntriesObject is empty because, for some users youtube is returning "Service Unavailable" error for the json request. This happened for when I tried with some random username on youtube.
I checked your program with youtube username "google". After changing the return statement it worked fine.
Hope this helps.