I'm building an AngularJs app and I'm using a dropzone from DropzoneJs. I need to use the success and error callback because I have to access to the server response. I'm having a problem that if I use the callbacks, the previewTemplate changes... So, can I change the previewTemplate inside the callback?
If I don't use the callbacks here's the result template and the code:
var myDropzone = $("#storageDropzone").dropzone({
url: firstUrl,
});
If I use the callbacks the "tick" or the "cross" don't show up:
var myDropzone = $("#storageDropzone").dropzone({
url: firstUrl,
error: function (file, response) {
console.log("Erro");
console.log(response);
},
success: function (file, response) {
console.log("Sucesso");
console.log(response);
},
complete: function (file) {
console.log("Complete");
}
});
So, can I change the previewTemplate inside the callbacks? or simply, keep the one that exists?
So, this is the workaround I found...
Instead of using the callbacks, I make the changes on the init function. Although this answer doesn't satisfy me, it's the best I can do for now... If anyone can explain why it works on the init but not as a callback feel free to answer.
This is the solution:
var myDropzone = $("#storageDropzone").dropzone({
init: function () {
this.on("processing", function (file) {
$scope.$apply($scope.working = true);
this.options.url = lastUrl;
$scope.$apply($scope.processing = true);
});
this.on("success", function (file, response) {
console.log("sucesso");
var ficheiro = { nome: file.name, link: response[0] };
$scope.$apply($scope.uploadedFiles.push(ficheiro));
});
this.on("error", function (file, error, xhr) {
var ficheiro = { nome: file.name, status: xhr.status, statusText: xhr.statusText, erro: error.message };
$scope.$apply($scope.errorFiles.push(ficheiro));
});
}
I think what is happening is that since you are overriding the default DropZone "error" and "success" callback functions, the "tick" and "cross" are not created on the file upload tiles. It isn't that the template is changed; you are overriding the default DropZone error and success behaviors. For the "tick" and "cross" to show up, you would need to copy the code from the default DropZone error and success callback functions into your functions, then implement whatever additional or changed behavior you need.
Related
handleAddUser(){
if(this.checkRequiredField()){
$.ajax({
url:this.state.location,
datatype:'text',
type:'POST',
data:{
UserId:this.state.userId,
AccountName:this.state.accountName
},
success:function(data,statuc,xhr){
console.log(xhr.getResponseHeader('Location'));
console.log('data added successfully');
this.updateUserList(xhr.getResponseHeader('Location'));
},
error:function(xhr,status,err){
console.error(status, err.toString());
}
});
}
}
In the above post request, it's success function has a method to update the userlist.
updateUserList method is defined and has mentioned in the constructor like this
this.updateUserList = this.updateUserList.bind(this);
but the method is not being executed, instead I got the below error in the browser console
TypeError: this.updateUserList is not a function.
I do have a similar code in another screen, which works as expected.
How to fix this issue?
You need to bind the success function of ajax cal. The problem occurs because you are calling the updateUserList function as this.updateUserList, however this inside the success call doesn't refer to outer scope but the scope of the success call
handleAddUser(){
if(this.checkRequiredField()){
$.ajax({
url:this.state.location,
datatype:'text',
type:'POST',
data:{
UserId:this.state.userId,
AccountName:this.state.accountName
},
success:function(data,statuc,xhr){
console.log(xhr.getResponseHeader('Location'));
console.log('data added successfully');
this.updateUserList(xhr.getResponseHeader('Location'));
}.bind(this),
error:function(xhr,status,err){
console.error(status, err.toString());
}.bind(this)
});
}
}
I have this app that uploads a file to a server using $cordovaFileTransfer and then sends data about the file to the same server. The file is transferred fine. The data is then sent to the server, and the server responds. But the response does not make it back to the promise callback. Why?
$scope.sendPost = function(data) {
//first upload a file then send more data about the file
$cordovaFileTransfer.upload('http://example.com', 'myfile.txt', options)
.then(function(result) {
var promise = MyFactory.sendFileData(data);
});
promise.then(function(response) {
//we never make it to here
});
}
and in MyFactory:
service.sendFileData = function(data) {
return $http({
//bunch of parameters. This function works, data is sent to the server and a response received
}).then(function(response) {
//this is fired when the response is received from the server. All is good so far.
return.response.data
});
}
return service;
$cordovaFileTransfer.upload returns a promise object, which you could use to build up promise chaining mechanism.
Code
$scope.sendPost = function(data) {
//get hold on `upload` function promise
var promise = $cordovaFileTransfer.upload('http://example.com', 'myfile.txt', options)
.then(function(result)) {
//return MyFactory.sendFileData promise here which will follow promise chaining
return MyFactory.sendFileData(data);
});
//promise.then will get call once `MyFactory.sendFileData` complete it
promise.then(function(response) {
//will get called once `sendFileData` complete its promise
});
}
its because you're relaying on another promise's callback to initiate a the promise and.. most probably before the promise gets initialized you are attaching a callback tot it.. so at the time of you attaching the callback, the promise is not yet initialized i.e. promise is null.. so in your console you'll see an error..
try doing some thing like
var x = function(response) {
//we'll make it to here now...
}
$cordovaFileTransfer.upload('http://example.com', 'myfile.txt', options)
.then(function(result)) {
var promise = MyFactory.sendFileData(data);
promise.then(x);
});
You should follow #PankajParkar solution though it's a better approach...
$scope.sendPost = function(data) {
//first upload a file then send more data about the file
$cordovaFileTransfer.upload('http://example.com', 'myfile.txt', options)
.then(function(result)) {
return MyFactory.sendFileData(result.data);
})
.then(function(response) {
});
With Sinon, I'm trying to spy on an async function call from a function in my qunit test:
test("requestLiveCategoriesData should call parseCategoriesData", function(){
var spy = sinon.spy(this.liveCategoriesModel, 'parseCategoriesData');
this.liveCategoriesModel.requestLiveCategoriesData();
sinon.assert.calledOnce(spy);
});
The test fails (expected parseCategoriesData to be called once but was called 0 times) even though parseCategoriesData does indeed get called by the requestLiveCategoriesData - I know this because parseCategoriesData called is output to the console when I run the test in the browser
This is the code I'm testing (simplified for the sake of the question):
requestLiveCategoriesData: function () {
console.log('getting live categories');
try {
console.log("--- RETRIEVING LIVE CATEGORIES EVENTS ---");
liveCategoriesCall = new LiveEventRequest(eventObjRequest);
liveCategoriesCall.on('reset', this.parseCategoriesData, this); //the spied on function is called from here
liveCategoriesCall.fetch({
success: function (collection, resp, options) {
console.log('Live Categories Events Request complete.');
},
error: function(collection, resp) {
console.log("Error on Live Categories Events Request");
if (_.has(resp, 'statusText') && resp.statusText === "timeout") {
/* Timeout error handling */
console.log("Live Categories Events Request Timeout");
}
Conf.generalNetworkError();
},
complete: function (resp, textStatus) {
console.log("Live Categories Request teardown.");
if (liveCategoriesCall) { liveCategoriesCall.off('reset', that.parseCategoriesData, that); }
},
cache:false,
timeout: that.get('liveEventsTimeout')
});
} catch(err) {
console.log("ERROR: PROCESSING LIVE CATEGORIES");
console.log(err.message);
console.log(err.stack);
if (liveCategoriesCall) { liveCategoriesCall.off('reset', this.parseEventsData, this); }
this.set({
'lastRequest': (new Date()).getTime(),
'liveCategories': []
});
this.trigger("errorAPI", err.message);
}
},
parseCategoriesData: function (liveCategoriesCall) {
console.log('parseCategoriesData called');
},
Am I going about this the correct way?
You at least need to instruct QUnit to wait on the asynchronous response call using async().
Now when you've got that set up you need to figure out when you can call sinon.assert.calledOnce(spy);. It looks like there is currently no way to know when the LiveEventRequest has returned data.
If you have no way of modifying the current code using a setTimeout to wait a bit is your only (bad) option.
If you can change your code you should probably investigate if you can return a promise from the requestLiveCategoriesData call. Have the promise resolve when the data has arrived. Then you can wait on that promise before you do the Sinon check and follow that by a done() call like in the QUnit async documentation.
And while we're at it: You probably should use a sinon fakeserver or some other way to mock the results of the LiveEventRequest as well.
For hours I've been trying to test my NewPostController with $httpBackend. The problem is whenever I set non-2xx status code in the response, the test fails.
NewPostController has the following method:
$scope.submit = function () {
var newPost = $scope.newPost;
PostService.insertPost(newPost).then(function (post) {
$location.path("/my-posts");
}, function (status) {
$scope.form.$setPristine();
$scope.error = status;
});
};
I have a problem testing the failure path:
it(...) {
...
$scope.post.text = "";
$httpBackend.expectPOST("/create-post", {"post":$scope.post}).respond(400);
$scope.submit();
$httpBackend.flush();
expect($scope.error).toBeDefined();
$scope.post.text = "This is a valid text.";
$httpBackend.expectPOST("/create-post", {"post": $scope.post}).respond(200);
$scope.submit();
$httpBackend.flush();
expect($location.path()).toBe("/my-posts");
});
The test fails with a message "400 thrown" (no callstack). I tried to change the order of subtests, use whenPOST instead of expectPOST and combine the methods as they do in Angular docs (https://docs.angularjs.org/api/ngMock/service/$httpBackend) but without success.
Please help.
EDIT:
Now when I look at PostService, it makes sense where the "400 thrown" comes from but I expected the error to be handled by angular. I threw it because of the section "Handling problems in nested service calls" of this article. It is supposed to be a shorter version of deferred.resolve/reject mechanism.
this.insertPost = function (newPost) {
return $http({
method: "post",
url: "/create-post",
data: {
post: newPost
}
}).then(function (res) {
return (res.data);
}, function (res) {
throw res.status;
});
};
This is indeed strange, and is perhaps something the angular team didn't consider.
When a promise is rejected by throwing (as you're doing), the angular $exceptionHandler service is called with the thrown exception. By default, this service just logs the exception in the browser console.
But when using ngMocks, this service is replaced by a mock implementation that can either log or rethrow the exception. The default mode is to rethrow, in order to make a test fail when an exception is thrown.
My advice would be to avoid using throw to simply reject a promise, and thus replace
function (res) {
throw res.status;
}
by
function (res) {
return $q.reject(res.status);
}
But if you really want to keep using throw, you can also configure the mock exceptionHandler to log instead of rethrowing:
beforeEach(module(function($exceptionHandlerProvider) {
$exceptionHandlerProvider.mode('log');
}));
this.model.save({
success: function(model, response){
console.log('success');
},
error: function(){
console.log('error');
}
})
The model is correctly posted to the server which handles the save, but the success callback is not fired. Do I need to send something back from the server ?
The first argument of save is the attributes to save on the model:
this.model.save( {att1 : "value"}, {success :handler1, error: handler2});
For some unknown reason, none of the above method worked for me. The api only was not hit in my case.
But later while searching on this, I bumped into this link, where some one had tried null instead of {} as the first parameter.
this.model.save(null, {
success: function (model, response) {
console.log("success");
},
error: function (model, response) {
console.log("error");
}
});
so, this worked for me. Hope this helps you too.
Your server must return a JSON object. If the response is not a JSON object, the callbacks will not fire.
If for success your server doesn't return a JSON object, perform a save with dataType:"text" option, like this:
this.model.save([],{
dataType:"text",
success:function() {},
error:function() {}
});
With this option it will not be waiting for a JSON in response, but a text, and thus the callback will be launched.
You may use underscore lib as follows as backbone already depends upon this. Remember first argument of save must either have attributes or you may just pass {} in case you want to save model itself.
this.model.save({}, _.bind(function(model, response){
//Do whatever you want e.g.
this.collection.add(model)
}, this))
so im a little confused - do i still need to pass in all attributes in order for me to call a save event? what if my model is large.. i dont wish to set every property manually
im calling model.save and attempting to do the following:
this.model.save(
{
success: function (model, response) {
console.log('model saved');
}
});
ok just to answer my own question incase anyone finds this post, i did the following which works:
this.model.save({ id: this.model.get('id') },
{
success: function (model, response) {
console.log("success");
},
error: function (model, response) {
console.log("error");
}
});
EDIT: I couldn't reply to you for some reason, but I can edit
but you don't have to set id: this.model.get('id') you can just pass a blank object because a blank attribute just won't extend attributes, does nothing:
this.model.save({}, {
success: function (model, response) {
console.log("success");
},
error: function (model, response) {
console.log("error");
}
});
The following is the code that i am using for backbone model save.
this.model.save(model,{
success:function(model){
console.log("Saved Successfully");
},
error:function(model){
console.log("Error");
}
});
Cheers
Roy M J
For those that want to save a model, without updating the attributes, you can do the following:
model.once("sync", function(model, response, options){
//
});
model.once("error", function(model, response, options){
//
});
model.save();
In you initialize function, bind the sync method to a method you define (onSaveSuccess)
initialize: function (options) {
this.model.on('sync', _.bind(this.onSaveSuccess, this));
},
onSaveSuccess: function() {
console.log('saved');
this.render();
},
This way, any time you run this.model.save(), it will run the onSaveSuccess function as a callback if your sync is successful