https://weblogs.asp.net/dwahlin/building-an-angularjs-modal-service
I am using the above blog post as a guide to build the confirmation modal service in my Angular app. If I may ask, does anyone know how can the service be modified to support a custom action on the Cancel/No button in addition to dismissing the modal?
At the moment, the code only supports custom actions on the Yes button. I am having trouble understanding this part of the service code whereby I am not sure what the variable "result" actually is and how the functions can be modified to return something when the No/Cancel button is clicked:
$scope.modalOptions.ok = function (result) {
$modalInstance.close(result);
};
$scope.modalOptions.close = function (result) {
$modalInstance.dismiss('cancel');
};
Next is the code for invoking the modal from the controller.
var modalOptions = {
closeButtonText: 'Cancel',
actionButtonText: 'Yes',
headerText: 'Delete',
bodyText: 'Are you sure you want to delete this record?'
};
modalService.showModal({}, modalOptions)
.then(
function (result) {
//custom actions for Yes button here
}
);
In other words, when I invoke the modal in the controller, how do I intercept the flow after user clicks on the No/Cancel button on the modal?
I tried doing something like this and it didn't work.
modalService.showModal({}, modalOptions)
.then(
function (result) {
//custom actions for Yes button here
},
function (result) {
//custom actions for No button here
}
);
Related
I am new to ionic. I have created confirmation popup. I need to open popup only once by a button click. Must restrict background click if popup already opened. But here I can click the button if already popup opened. So need to restrict background click and avoid to open popup as multiple times. Please help me to resolve this issue. Thanks in advance. I have mentioned my code.
<button ng-click="click()"></button>
$scope.click = function(){
$scope.stopService();``
}
//Stop service confirm popup
$scope.stopService = function () {
var confirmPopup = $ionicPopup.confirm({
title: 'Confirmation',
template: 'Are you sure do you want to stop the current service?'
});
confirmPopup.then(function (res) {
if (res) {
} else {
}
});
};
I've read and searched for this and found variations (for example, on click) but not for the browser reload/refresh that works.
Basically, what I want is for when a user reloads, refreshes or F5 in the browser, instead of the regular alert confirm, the sweetalert dialog popups up asking the user if they want to refresh, losing whatever information they have viewed, with an OK/Cancel.
In my controller, I have this:
$scope.$on('$destroy', function() {
window.onbeforeunload = undefined;
});
window.onbeforeunload = function (e) {
e.preventDefault();
SweetAlert.swal({
title: "I display correctly but....",
text: "before page refreshes and do not wait for user to click ok",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",confirmButtonText: "Ok",
cancelButtonText: "Cancel",
closeOnConfirm: true,
closeOnCancel: true },
function(isConfirm){
if (isConfirm) {
console.log('do something...')
}
});
return undefined;
};
$scope.$on('$locationChangeStart', function( event, toState, toParams, fromState, fromParams) {
SweetAlert.swal({
title: "I display and wait for the user to click but too late",
text: "...after the page refreshes",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",confirmButtonText: "Ok",
cancelButtonText: "Cancel",
closeOnConfirm: true,
closeOnCancel: true },
function(isConfirm){
if (isConfirm) {
console.log('do something...')
}
});
});
The "window.onbeforeunload" part loads at the right time (before the page reloads/refreshes) but does not wait for the user selection.
The "$scope.$on('$locationChangeStart',..." part loads too late (after the page has reloaded/refreshed) but does wait for the user selection.
Besides '$locationChangeStart,' I've also tried '$stateChangeStart' and '$routeChangeStart' to no avail.
What am I missing to make this work? Any help or direction would be greatly appreciated.
You should not override native functions such as alert() or confirm() because they are blocking and they are blocking for a good reason.
But if you really want to do it, it is possible like this
/**
* Definition of global attached to window properties <br/>
*/
(function() {
nalert = window.alert;
Type = {
native: 'native',
custom: 'custom'
};
})();
/**
* Factory method for calling alert().
* It will be call a native alert() or a custom redefined alert() by a Type param.
* This defeinition need for IE
*/
(function(proxy) {
proxy.alert = function () {
var message = (!arguments[0]) ? 'null': arguments[0];
var type = (!arguments[1]) ? '': arguments[1];
if(type && type == 'native') {
nalert(message);
}
else {
// TODO: Call to SweetAlert()
document.write('<h1>I am redefiend alert()<br/>Alert say: '+message+'</h1>');
}
};
})(this);
More on this here
JavaScript: Overriding alert()
I am using Ionic framework,I have successfully ported the fullCalender to my project,
I can able to call a funtion on eventClick, even it gives the alert of that event title perfectly.
But my main objective is to open the ionic modal instead of alert() with event title.
The code works till the alert comes, I am new to ionic need some idea how to acheive this.So far I have witten the code below
app.js Code:
$scope.calOptions = {
editable : true,
header : {
left: 'prev',
center: 'title,today',
right: 'next'
},
eventClick: function(calEvent, jsEvent, view){
var a=calEvent.description;
var b=calEvent.title;
alert('ALERT-1:' +a );
$scope.safeApply(function()
{
alert('ALERT-2:' + calEvent.description);
$scope.eventModal(a,b)
});
};
$scope.eventModal=function(a,b){
alert('ALERT-3:'+b);
$scope.eventModal.show();
}
$ionicModal.fromTemplateUrl('modal.html', function($ionicModal) {
$scope.eventModal = $ionicModal;
},{
scope: $scope,
// The animation we want to use for the modal entrance
animation: 'slide-in-up'
});
To be more clear the above code shows that the "eventClick:" works till "ALERT-3" ,however,on event click it calls the function "$scope.eventModal=function(a,b)" but after that at the next line at $scope.eventModal.show(); it says that "show is not a function", I want to open modal with variables passed to "$scope.eventModal=function(a,b)" function.
Need an idea to acheive open the modal with parameters passed to the "$scope.eventModal=function(a,b)".
Thanx in advance.
Try doing some simplier:
eventClick: function(calEvent, jsEvent, view){
$scope.a = calEvent.description;
$scope.b = calEvent.title;
$ionicModal.fromTemplateUrl('modal.html', {
scope: $scope
}).then(function (modal) {
$scope.modal = modal;
$scope.modal.show();
}).catch(function(err){
console.log(err);
});
};
And inside modal, you can bind {{::a}} and {{::b}} or whatever you want do with them.
I need a way to interrupt a user navigating to a new page when there are unsaved changes on the current page. I implemented a modified version of the solution here:
http://weblogs.asp.net/dwahlin/cancelling-route-navigation-in-angularjs-controllers
However, what I see in the browser is that as soon as the user clicks on a link, the view changes and the new controller loads completely while the modal dialog is displayed. When the user clicks 'cancel' and event.preventDefault is fired, the user simply ends up on the new view. This is strange because everything I've read indicates that this is the accepted method, and nobody seems to have this issue. Yet I can't for the life of me see what is wrong with my code.
Here's the function in the main app for handling location changes (ModalService just wraps the angular bootstrap $modal service):
onRouteChangeOff = $rootScope.$on('$locationChangeStart', routeChange);
function routeChange(event, newUrl, oldUrl) {
//Navigate to newUrl if the form isn't dirty
if (!$rootScope.unsavedChanges) return;
var modalOptions = {
closeButtonText: 'Cancel',
actionButtonText: 'Ignore Changes',
headerText: 'Unsaved Changes',
bodyText: 'You have unsaved changes. Leave the page?'
};
ModalService.showModal({}, modalOptions).result.then(function () {
$rootScope.unsavedChanges = false;
$location.path(newUrl); //Go to page they're interested in
}
, function () {
event.preventDefault();
});
return;
}
Any ideas?
In case anyone else has this problem, the fix turned out to be quite simple. I moved the code to the stateChangeStart event. Code looks like this:
onRouteChangeOff = $rootScope.$on('$stateChangeStart', routeChange);
function routeChange(event, newState) {
//Navigate to newUrl if the form isn't dirty
if (!$rootScope.unsavedChanges) return;
event.preventDefault();
var modalOptions = {
closeButtonText: 'Cancel',
actionButtonText: 'Ignore Changes',
headerText: 'Unsaved Changes',
bodyText: 'You have unsaved changes. Leave the page?'
};
ModalService.showModal({}, modalOptions).result.then(function () {
$rootScope.unsavedChanges = false;
$state.go(newState); //Go to page they're interested in
});
}
I am extending the example given in http://docs.sencha.com/architect/2-0/#!/guide/views_forms_extjs to use a more MVC centric approach. So in service of that I want to move the on click handler from the view to a newly create controller.
I have the click even working fine, but I have no idea how to operate on the form from the context of the controller (the view was using this.getForm()).
Here is what I have so far,
Ext.define('LoginExample.controller.LoginController', {
extend: 'Ext.app.Controller',
onLoginButtonClick: function(button, e, options) {
console.log('button clicked');
if (this.getForm().isValid()) {
this.getForm().submit({
url: 'login.php',
success: function(form, action) {
Ext.Msg.alert('Login Successful!');
},
failure: function(form, action) {
Ext.Msg.alert('Login Failed!');
}
});
}
},
init: function() {
this.control({
"#loginButton": {
click: this.onLoginButtonClick
}
});
}
});
Obviously the this in the context of onLoginButtonClick is no longer the view and is instead the controller.
Given the parameters given to me, (Ext.button.Button button, Event e, Object options), how do I get the submit on the appropriate form?
I should note this using ExtJS 4.
button.up('form');
will do the trick.
To get the BasicForm object to operate on, use
button.up('form').getForm()