I am new to Jquery File Upload and it works great. But I am wondering if anyone knows of a good way to block sending the upload until a GET request can be sent to verify that the file does not already exist?
I am using backbone.js and have already tried attaching an interception to both the submit form event and the file input change event. Both are bypassed.
Currently looks something like this:
events: {
'change form.upload-file input': 'checkExist'
},
checkExist: function (e) {
return false;
},
initialize: function () {
_.bindAll(this);
this.$('.upload-file').fileupload({
dataType: 'json',
method: 'PUT',
add: this.add,
progress: this.progress,
done: this.done,
fail: this.fail,
always: this.always
});
return __super__.initialize.apply(this, arguments);
},
I got around this by just having a list of the files on hand and stopping the xhr if included
beforeSend : function(xhr, opts){
var q = 'Do you want to replace ' + opts.files[0].name + '?';
if( that.checkExist(xhr, opts) && !window.confirm(q)) {
xhr.abort();
}
},
It would still be nice to know a way to do this async.
Related
The below code has both success and failure handling
jQuery.ajax({
type:"post",
dataType:"json",
url: myAjax.ajaxurl,
data: {action: 'submit_data', info: info},
success: function(data) {
successmessage = 'Data was succesfully captured';
$("label#successmessage").text(successmessage);
},
error: function(data) {
successmessage = 'Error';
$("label#successmessage").text(successmessage);
},
});
$(":input").val('');
return false;
However we are not following the above...We are following as below
jQuery.ajax({
type:"post",
dataType:"json",
url: myAjax.ajaxurl,
data: {action: 'submit_data', info: info},
success: function(data) {
if(data.responseType == 'success') {
// success
}
if(data.responseType == 'failure') {
// failure
}
}
});
$(":input").val('');
return false;
Is our approach is the correct or wrong approach ??
Basically every response will be success and show error message based on the response type
Please advise. We need to follow the best practice
data. responseType doesn't return a 'success' or 'failure'. It is contains an enumerated value which represents the type of response coming back to you like text, json, arrayBuffer etc..
Hence in the second code block both if statements will be exceuted to be false and nothing will be done with the response received.
I think you should go with the first approach because
Whether you are using raw JS or a library to implement this functionality, you'll have access to the state of the request i.e. whether the request was successful; met with an error and finally whether it has been completed.
Make proper use of these events and their respective callbacks to manipulate the UI for a better user experience. For example, if the request was unsuccessful, you'd want to update the user interface to reflect that their changes weren't successful while if it was successful, you'd want to tell them so. Don't keep the user waiting!
With jQuery, you'd make use of the success and error callbacks. You also get other callbacks such as complete and beforeSend to be invoked for apporopriate use.
$.ajax({
//Other code
success: function(msg)
{
// Update the UI here to reflect that the request was successful.
doSomethingClever();
},
error: function(msg)
{
// Update the UI here to reflect that the request was unsuccessful
doSomethingMoreClever();
},
complete: function(msg)
{
// Update the UI here to reflect completion
doSomethingEvenMoreClever();
}
});
take a look at this
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.
In my application i have used the Ext.Viewport.setMasked function, When i call the Processing mask showing properly.But not disabled when it reaches success.Here my code
{
Ext.Viewport.setMasked({
xtype: 'loadmask',
message: 'Processing...',
indicator: true
});
var data = Ext.JSON.encode(obj);
Ext.Ajax.request({
url: App.gvars.apiurl + 'AddItem', // url : this.getUrl(),
method: "POST",
params: data,
useDefaultXhrHeader: false,
withCredentials: true,
success: function (response) {
var respObj = Ext.JSON.decode(response.responseText);
if(respObj[0].response=="Success"){
Ext.Viewport.setMasked(false);
Ext.Msg.alert("Success", "A new wish has been added To Ur Wish List");
viewgiftlist();
goitems();
}
else{
Ext.Viewport.setMasked(false);
Ext.Msg.alert("Error",respObj[0].errorMsg);
}
},
failure: function (response)
{
Ext.Msg.alert("Error",response.responseText);
}});
}
Please help me to solve the issue
You didnt give setmask(false) in your failure message.. are you getting success response or failure?
The correct usage is in fact Ext.Viewport.setMasked(false);
My guess is that your success conditional isn't working properly. This should be an easy fix for you if you're using console! Fire up Chrome, hit F12 and use your console. Use a console.log after you decode your response, then you can properly debug this.
var respObj = Ext.JSON.decode(response.responseText);
console.log(respObj);
Also, not sure why the success portion of your response would be an array, usually a response looks something like this:
{"success":true,"data":[{"id":"1","first_name":"Test","last_name":"Test"}],"total":1}
Obviously you can craft them how you want, but just looks strange to me. With the above JSON the conditional would be like so:
if(respObj.success) {
In the ExtJS 3, I want to invoke a method, like below. Looks like method in server side is not invoked. I can't use 'directFn' this way ? how to fix it ?
The server side is C#.
Thanks
function showDetail(recordId) {
Ext.Ajax.request({
directFn: Report.showDetail,
success: received,
failure: function () { alert('failure'); },
params: { recordId: recordId }
});
}
function received(response) {
var x = Ext.decode(response.responseText);
alert(x);
}
Uh, yeah, you can't just create a parameter and expect it to mean something to Ext. You'll need to call a url and pass directFn as part of the url or as a parameter, depending on how your server-side stuff is set up.
I have a gridpanel , a Model, an autosync Store with an ajax proxy with read and update functions and a RowEditing plugin in extjs4 .
Consider the following json:
{ "success": true,"Message":"Grid Data Successfully updated.", "users": {"uname":"jdoe","fname":"John","lname":"Doe","SSN":125874,"mail":"jdoe#example.org"},{"uname":"jsmith","fname":"Jack","lname":"Smith","SSN":987456,"mail":"smith#example.com"}}
I want to know if there is a way to render the value of "Message" to an HTML div tag (my_div for example) after receiving each response?
You can use the DOM Helper, see the sencha api : http://docs.sencha.com/ext-js/4-0/#!/api/Ext.DomHelper
Ext.onReady(function(){
Ext.DomHelper.insertHtml('beforeBegin', Ext.getDom('test'), "Prepend this string");
});
Above code will get the HTML element with ID test and it will insert the string Prepend this string beforeBegin of the content of this div.
See the fiddle to play around: http://jsfiddle.net/PddU4/Prepend this string
EDIT 2012-02-16:
You need to listen to your proxies success and failure: (you could also implement a listener when loading your store or on update)
listeners: {
success: function( response, options ){
console.log(response);
},
failure: function( response, options ){
console.log(response);
},
}
EDIT BASED ON YOUR COMMENT:
First make sure you configured properly your successProperty and messageProperty in your reader. Then implement the listener where you want it to be, update, remove, add, exception etc. :
(configure the listener within your proxy object)
listeners : {
update : function(thisStore, record, operation ) {
console.log('Update happened');
console.log(record);
console.log(operation);
},
save : function() {
console.log('Save happened');
},
exception : function(dataproxy, type, action, options,response, arg) {
console.log('Error happened');
console.log(response);
doJSON(result.responseText);
},
remove : function() {
console.log("Record removed");
}
}
When you console.log(response), you will see the response object. This would be your actual JSON so you need to parse it (as in doJSON() method):
function doJSON(stringData) {
try {
var jsonData = Ext.util.JSON.decode(stringData);
Ext.MessageBox.alert('Success', 'Your server msg:<br />jsonData.date = ' + jsonData.message);
}
catch (err) {
Ext.MessageBox.alert('ERROR', 'Could not decode ' + stringData);
}
}
Please check out this AJAX tutorial: http://www.sencha.com/learn/legacy/Manual:Core:Ext.Ajax