I'm having an issue when triggering maxfilesexceeded event, it triggers the error event. I'm handling it this way
this.on("maxfilesexceeded", function (file) {
this.removeAllFiles();
this.addFile(file);
});
But it keeps triggering the error event, which I'm only using for displaying an error response from the server (there's no sense in the message keep being displayed over and over when the files are removed), is there a way to tell the maxfilesexceeded to not trigger the code in error?
problem is with your syntax inner (this) keyword belongs to maxfilesexceeded event thats why you getting error.Use below code to override maxfilesexceeded event:
init:function() {
var myDropzone = this;
this.on("maxfilesexceeded", function (file) {
myDropzone.removeAllFiles();
myDropzone.addFile(file);
});
}
Related
Hey guys I am quite stuck at the moment - I have override the process method however on my front end whenever I click ''Tap to cancel" - nothing happens. I have tried logging in various places but none of them get hit - can you assist?
Same issue was occurring on my project.
In my case I found that I had added "async" to the process function and after removing, the functionality worked as expected.
The filepond api expected return type of object with abort() function but In my case it was returned as a promise because of async keyword.
server={{
process: async(
fieldName,
file,
metadata,
load,
error,
progress,
abort
) => {
// code
return {
abort: () => {
console.log(`aborts`);
abort();
},
};
},
}}
Check codesandbox try removing async and it works
I am experimenting with the new way of handling page events in jqM and have run into a curious issue. When handling the pagecontainerbeforechange event
$(document).on('pagecontainerbeforechange',function(e,u){test(e,u,'changing');})
function test(e,u,msg){console.log($(u.toPage));}
Attempting to put a jQuery object wrapper around u.toPage - as done above - produces strange behavior.
Check out this fiddle to see what I mean
Click on the Second Page button and then view the console. Nothing will happen (the second page is not shown) and you will see a message along the lines of *Uncaught error:syntax error, unrecognized expression http://jsfiddle.net/egn7g5xb/1/show/#second
Now comment out Line 7 and run the fiddle again. No such issue this time and the second page gets shown.
Perhaps someone here might be able to explain what is going on here?
On initial run, jQuery Mobile creates a fake page before navigating to first page in DOM. At that stage, pagecontainerbeforechange fires twice and returns .toPage as an object.
Later on, upon navigating to other pages, it fires twice again; however, it returns a string first time (URL/hash) and second time it returns an object which is the page itself.
Therefore, when using that event, you have to determine whether .toPage is an object or a string.
$(document).on("pagecontainerbeforechange", function (e, data) {
if (typeof data.toPage == "string") {
/* parse url */
}
if (typeof data.toPage == "object") {
/* manipulate page navigating to */
}
});
Note that pagecontainerbeforetransition is similar to beforechange, however, it fires once and returns .toPage as an object.
First, create your pagecontainer events within $(document).on("pagecreate", "#first", function(){ .. }).
Then the selector for these events should be $(":mobile-pagecontainer") or $("body") NOT $(document).
function test(e,u,msg)
{
console.log(msg);
var IsJQ = u.toPage instanceof $;
console.log(IsJQ);
if (IsJQ){
console.log(u.toPage.data());
} else {
console.log(u.toPage);
}
console.log('---');
}
$(document).on("pagecreate", "#first", function(){
$(":mobile-pagecontainer").on('pagecontainerbeforechange', function (e, u) {
test(e,u,'changing');
});
$(":mobile-pagecontainer").on('pagecontainerchange',function(e,u){
test(e,u,'changed');
});
});
Updated FIDDLE
I know that the error is generated by jQuery. Is there any way I can structure a backbone.marionette application to avoid the below error?
Uncaught TypeError: Cannot call method 'show' of undefined
The error occurs because I create a Layout, which has regions. In the onRender function I load a collection and execute fetch. When the fetch is complete, I populate the region. If I switch to a different view, the error is triggered because of self.content.show which no longer exists.
var view = Marionette.Layout.extend({
template: _.template(tplPage),
className: 'customers-view',
regions:{
content: '.customers-content'
},
onRender: function(){
var self = this,
colCustomers = new ColCustomers();
colCustomers.fetch({success: function(){
self.content.show(new ViewCustomersList({collection: colCustomers}));
}});
}
});
NOTE: At the moment I wrap self.content.show() in a try catch and its working. Ideally I avoid that.
Modify the onRender function and listen for the fetch differently.
onRender: function(){
var colCustomers = new ColCustomers();
this.listenTo(colCustomers, "sync", function () {
this.content.show(new ViewCustomersList({collection: colCustomers}));
});
colCustomers.fetch();
}
What I did was change the approach to binding the event listener. By using the listenTo function from Backbone.Events, you get handlers that are cleaned up for free when the listener object dies.
How can I get a reference to the click handler of an element in JQuery?
Here is what I am trying to do:
Store the click handler,
Change the click handler for the next click,
Restore the original click handler
var originalClick = $(settings.currentTarget).click;
$(settings.currentTarget).off("click");
$(settings.currentTarget).click(function (e) {
e.preventDefault();
settings.model.modal.close();
$(settings.currentTarget).off("click");
$(settings.currentTarget).click(originalClick);
});
The above code works the first time, however, when I click on the element again it fails:
Uncaught TypeError: Object [object HTMLAnchorElement] has no method 'on'
Update:
I now realize that this is a really bad design that I am trying to do. I have resolved this issue by maintaining a visibility boolean in my viewmodel, if it is true, don't re-open the modal.
$(...).click is the jQuery click() method, not your event handler.
You can use an undocumented internal API to get the list of event handlers:
jQuery._data( elem, "events" );
What happens if you try it this way?
var originalClick = $(settings.currentTarget).click;
$(settings.currentTarget).off("click");
$(settings.currentTarget).on("click",function (e) {
e.preventDefault();
settings.model.modal.close();
$(settings.currentTarget).off("click");
$(settings.currentTarget).click(originalClick);
});
I've added the following code for my jqgrid:
changeTextFormat = function (data) {
return "Activity or one from the same price group already used";
};
jQuery.extend(jQuery.jgrid.edit, {errorTextFormat: changeTextFormat }
)
It works great for insert and I get the error message appearing in the top of the dialog.
However I want something similiar for deletes. I want to make it that if during my server side delete I find a problem with the operation I throw an exception.
Based on this exception I want to pop up an error message.
Can anybody tell me how to go about this for the delete function?
The setting $.jgrid.edit is not the only setting which are used during form editing. There are also $.jgrid.del, $.jgrid.nav, $.jgrid.search and $.jgrid.view which can be used.
If you need to define default implementation of errorTextFormat callback you can use
$.extend($.jgrid.del, { errorTextFormat: changeTextFormat });
in the same way like you use it with $.jgrid.edit.