I work on a project which uses dropzonejs upload file component. But, I faced that issue while trying to make it more customize.
If you click somewhere outside of the modal window (bootstrap modal), should trigger dropzonejs cancel button event (alert/confirm box, see the attached picture). But it does not happen like this and have never seen anything related within the documents.
Any solution?
I have comeover by this very manual and dirty way described below:
I used window.onbeforeunload to make what i thought real and a flag. The point is that, after the upload process successfully ended, then unbind the onbeforeunlad to prevent always asking "Are you sure you want to cancel this upload?" even if it is completed.
var cancelConfirmation = "Are you sure you want to cancel this upload?";
var isFileInProgress = false;
var uploadZone = $("form[class=dropzone]").dropzone({
method: "post",
uploadMultiple: false,
parallelUploads: 1,
dictCancelUploadConfirmation: cancelConfirmation,
success: function (file, response) {
isFileInProgress = false;
window.onbeforeunload = function () { };
},
init: function () {
this.on("error", function (file, response) {
isFileInProgress = false;
window.onbeforeunload = function () { /* unbind */ };
});
this.on("addedfile", function () {
isFileInProgress = true;
window.onbeforeunload = function () {
return cancelConfirmation;
};
});
this.on("complete", function () {
isFileInProgress = false;
window.onbeforeunload = function () { /* unbind */ };
});
this.on("canceled", function () {
isFileInProgress = false;
window.onbeforeunload = function () { /* unbind */ };
});
}
});
$(".modal").on('hide.bs.modal', function (event) {
if (isFileInProgress && !confirm(cancelConfirmation)) {
event.preventDefault();
}
});
Related
I have Dialog which is in fragment. There I have:
<Button text="{i18n>buttonClose}" press="onCloseDialog"/>
and in controller there is:
openDialog: function () {
if (!this.pressDialog1) {
this.pressDialog1 = sap.ui.xmlfragment("mypackage.fragment.Dialog", this);
}
this.pressDialog1.open();
},
onCloseDialog: function () {
this.pressDialog1.close();
},
when I debug it in console it goes into openDialog function but when I try to close it doesn't go into onCloseDialog. I have also noticed that there is a warning in console:
event handler function "onCloseDialog" is not a function or does not exist in the controller.
Why it doesn't go into onCloseDialog function?
#Edit
openDialog is called like:
var controllerName = "mypackage.ProdE"
sap.ui.controller(controllerName, {
openDialog: function () {
if (!this.pressDialog1) {
this.pressDialog1 = sap.ui.xmlfragment("mypackage.fragment.Dialog", this)
this.getView().addDependent(this.pressDialog1);
}
this.pressDialog1.open();
},
onCloseDialog: function () {
this.pressDialog1.close();
});
the reason is pretty simple, your Dialog is not attached to your controller so it's not executing the onCloseDialog method you have implemented.
This is the correct way to handle dialog:
onOpenDialog: function(oEvent) {
if ( !this._oDialog ) {
this._oDialog = sap.ui.xmlfragment(this.getView().getId(), "mypackage.fragment.Dialog", this);
// This is important becuase your dialog will be attached to the view lifecycle
this.getView().addDependent(this._oDialog);
}
this._oDialog.open();
},
ondialogClose: function(oEvent) {
// Do cleaning stuff
this._oDialog.close();
}
Hi I'm using JQUERY Dialog for a confirmation popup. I have a common javascript file, in which i had a function which used to call window.ShowModalDialog. Now from the same function i am calling the jquery dialog, but as it is an asynchronous call, the calling function returns the value(yes/no) without even accepting Values from dialog. How can i return the proper value(yes/no)
If I have correctly understood the problem ...
and if something is wrong, add the example of your code
Try using this pattern:
(function ($, undefined) {
$.fn.dialog = function (options) {
options = $.extend({}, $.fn.dialog.options, options);
return this.each(function () {
var dialog = $(this);
dialog.children(".ok").click(function (e) {
options.ok.call(this, e);
dialog.close();
});
dialog.children(".close").click(function (e) {
options.close.call(this, e);
dialog.close();
});
});
};
$.fn.open = function () {
this.get(0).showModal();
};
$.fn.close = function () {
this.get(0).close();
};
$.fn.dialog.options = {
ok : function () {},
close : function () {}
};
})(jQuery);
and using callback
var dialog = $(".myDialog").dialog({
ok : function () {
alert("ok!!");
}
});
Do everything you need in callback, but avoid callbackhell.
see example
This has been driving me nuts.
When i load a page i initiate a window.onfocus function:
initializeFocusDetecttor: function () {
window.onfocus = function () {
var options = {
useFade: false
}
$.OverWatch.worker.getView("/OverWatch/UpdateWatch", function () {
$.OverWatch.init();
}, options);
}
}
However I don't want this behavior on every page but I don't know how to remove/reset this.
I have tried
window.onfocus = null;
window.onfocus = function(){return;};
window.onfocus = "";
but it does not work
if you change it to use jQuery event handling, you can just remove it (e.g. with off).
initializeFocusDetecttor: function () {
$(window).on('focus.mine', function () {
var options = {
useFade: false
}
$.OverWatch.worker.getView("/OverWatch/UpdateWatch", function () {
$.OverWatch.init();
}, options);
});
});
// Some condition - turn it off
$(window).off('focus.mine');
This example adds the custom namespace .mine to the event name so that you can target it specifically without affecting other code using focus events.
I've an issue with multiple ajax requests. For example I've a form with a button, and onclick it runs a service which essentially load list of items in a table; for now it should load a single item into a table when I hit the button.
However, when I hit the button multiple times, the same item is duplicated when its loaded.
How can I prevent while there is still no callback from the first one?
current ng service
var getItems = function () {
var def = $q.defer();
Items.get().then(function (items) {
def.resolve(items);
}, function (err) {
...
});
};
Not sure if this is a solution, but when I write above code like this:
var def = false;
var getItems = function () {
def = $q.defer();
Items.get().then(function (items) {
def.resolve(items);
}, function (err) {
...
});
};
This stops the duplication when I initialize the def = false, not sure if this is the correct approach by resetting the previous/old request to false?
You can put a lock on the function to prevent the code from running multiple times at once or at all:
// your service
$scope.isRunning = false;
var getItems = function () {
if(!$scope.isRunning){
$scope.isRunning = true;
var def = $q.defer();
Items.get().then(function (items) {
def.resolve(items);
}, function (err) {
...
}).finally(function(){
//$scope.isRunning = false; // once done, reset isRunning to allow to run again. If you want it to run just once then exclude this line
});
}
};
Unsure how you want to handle the button in terms of being clicked multiple times
You can hide it on click:
<button ng-hide="isRunning">Stuff</button>
You can disable it on click:
<button ng-disabled="isRunning">Stuff</button>
if disabling, you should probably give feedback like changing opacity:
<button ng-disabled="isRunning" ng-class='{"opacity-half": isRunning}'>Stuff</button>
.opacity-half { opacity: 0.5 }
the below code should do the trick I am avoiding some angular specific syntax hope that helps;
function yourContoller(/*all injectables*/) {
var requesting = false;
$scope.buttonClick = function() {
if (!requesting) {
requesting = true;
yourService.getItems().then(function(response) {
/*your code to handle response*/
requesting = false;
});
}
};
}
if you want to disable a button in the view you can expose this variable by simply using scope ($scope.requesting = false;) with ng-disabled.
you can create a reusable directive so that on any button which is clickable, it doesnt get pressed twice
app.directive('clickAndDisable', function() {
return {
scope: {
clickAndDisable: '&'
},
link: function(scope, iElement, iAttrs) {
iElement.bind('click', function() {
iElement.prop('disabled',true);
scope.clickAndDisable().finally(function() {
iElement.prop('disabled',false);
})
});
}
};
});
This can be used on a button as follows:
<button click-and-disable="functionThatReturnsPromise()">Click me</button>
I am attempting to perform some action on the foucsin of the textbox. However, for some reason the event never fires.
$(".ddlAddListinTo li").click(function () {
var urlstring = "../ActionTypes";
$.post(urlstring, function (data) {
$(window.open(urlstring, 'Contacts', 'width=750, height=400')).load(function (e) {
// Here "this" will be the pop up window.
$(this.document).find('#txtAutocompleteContact').on({
'focusin': function (event) {
alert('You are inside the Contact text box of the Contacts Popup');
}
});
});
});
});
When doing it that way, you generally have to find the body or use contents() to access the contents, as in
$(this.document).contents().find('#txtAutocompleteContact')
but in this case using a little plain javascript seems more appropriate :
$(".ddlAddListinTo li").on('click', function () {
var urlstring = "../ActionTypes";
$.post(urlstring, function (data) {
var wind = window.open(urlstring, 'Contacts', 'width=750, height=400');
wind.onload = function() {
var elem = this.document.getElementById('txtAutocompleteContact');
$(elem).on('focus', function() {
alert('You are inside the Contact text box of the Contacts Popup');
});
}
});
});