When i tap delete the action sheet sheet doesnt hide after a successful delete. Is there a way I could call the cancel from the deletePicture function?
$scope.deletePicture = function(post_id, pic_id, index){
PostService.DeletePic(post_id, pic_id, $localStorage.CurrentUser.auth_token)
.success(function (data) {
$scope.pics.splice(index);
hideSheet(); //doesn't Hide the action sheet
}).
error(function(error,status) {
})
}
$scope.update_or_delete = function(post_id,pic_id,index){
$ionicActionSheet.show({
titleText: 'Edit Photo',
buttons: [
{ text: 'Change' },
],
destructiveText: 'Delete',
cancelText: 'Cancel',
cancel: function() {
console.log('CANCELLED');
},
destructiveButtonClicked: function() {
$scope.deletePicture(post_id,pic_id,index);
},
buttonClicked: function(index) {
if(index === 0){ // Camera BUtton
$scope.changePicture();
}
return true;
}
});
};
You must return true from the destructiveButtonClicked callback in order to automatically close the action sheet.
From the Docs :
destructiveButtonClicked : Called when the destructive
button is clicked. Return true to close the action sheet, or false to
keep it opened.
So in your case, it will be :
$ionicActionSheet.show({
titleText: 'Edit Photo',
buttons: [{
text: 'Change'
}, ],
destructiveText: 'Delete',
cancelText: 'Cancel',
cancel: function() {
console.log('CANCELLED');
},
destructiveButtonClicked: function() {
$scope.deletePicture(post_id, pic_id, index);
return true;
},
buttonClicked: function(index) {
if (index === 0) { // Camera BUtton
$scope.changePicture();
}
return true;
}
});
You can check out a demo here
Related
I have a generic Split button defined like:
this.toolbarButtons.publish = new Ext.SplitButton({
text: t('save_and_publish'),
iconCls: 'pimcore_icon_save_white',
cls: 'pimcore_save_button',
scale: 'medium',
handler: this.publish.bind(this),
menu: [{
text: t('save_pubish_close'),
iconCls: 'pimcore_icon_save',
handler: this.publishClose.bind(this)
},
{
text: t('save_only_new_version'),
iconCls: 'pimcore_icon_save',
handler: this.save.bind(this, 'version'),
hidden: !this.isAllowed('save') || !this.data.general.o_published
}
]
});
What I need to happen is - when user clicks the Publish button a confirm box appears which collects yes/no click.
I have a AJAX call on the yes/no click to execute/prevent user notification of the publish action.
I have tried something like this:
this.toolbarButtons.publish = new Ext.SplitButton({
text: t('save_and_publish'),
iconCls: 'pimcore_icon_save_white',
cls: 'pimcore_save_button',
scale: 'medium',
listeners: {
click: function() {
Ext.MessageBox.confirm(
'Confirm', 'Notify related users?', callbackFunction);
function callbackFunction(btn) {
if(btn == 'yes') {
Ext.Ajax.request({
url: Routing.generate('save_phrase_and_notify'),
jsonData: {
notifyFlag: JSON.stringify(true),
phraseId: JSON.stringify(phraseId),
},
method: 'POST',
success: (response) => {
button.up('window').close();
},
failure: () => {
Ext.MessageBox.alert(
t('Sum Tim Wong'),
);
},
});
} else {
Ext.Ajax.request({
url: Routing.generate('save_phrase_and_notify'),
jsonData: {
notifyFlag: JSON.stringify(false),
phraseId: JSON.stringify(phraseId),
},
method: 'POST',
success: (response) => {
button.up('window').close();
},
failure: () => {
Ext.MessageBox.alert(
t('Sum Tim Wong 2'),
);
},
});
}
}
}
},
handler: this.publish.bind(this),
menu: [{
text: t('save_pubish_close'),
iconCls: 'pimcore_icon_save',
handler: this.publishClose.bind(this)
},
{
text: t('save_only_new_version'),
iconCls: 'pimcore_icon_save',
handler: this.save.bind(this, 'version'),
hidden: !this.isAllowed('save') || !this.data.general.o_published
}
],
});
This confirm box work but I need to prevent the handler( handler: this.publish.bind(this)) from executing until the yes/no is clicked by the user. Currently the confirm box appears but the handler runs anyways, which redirects to a overview page.
How do I prevent the handler from running until yes/no is clicked? Ultimately how can I move the handler bind action in the AJAX success function?
I've a form with submit validation.
I'dd like to add more than 1 alerts on form submit with:
var proceed = true;
$.confirm({
title: 'Confirm 1',content: 'No products added. Are you sure to proceed?',
buttons: {
ok: {
text: "OK",
btnClass: 'btn-success',
action: function () {
}
},
cancel: {
text: "Cancel",
action: function () {
proceed = false;
return false;
}
}
}
});
... some others checks ....
if ( !proceed ) { return false;} //EXIT SCRIPT
// IF ALL CHECKS PASSED
$.confirm({
title: 'Final confirm',content: 'All checks are ok. Are you sure to insert?',
buttons: {
ok: {
text: "OK",
btnClass: 'btn-success',
action: function () {
form.submit(); //SUBMIT THE FORM
}
},
cancel: {
text: "Cancel",
action: function () {
// CLOSE DIALOG
}
}
}
});
but on form submit I get all of 2 $.confirm opens! I'd like to pause second one until I click OK on the first one.
My jsfiddle https://jsfiddle.net/st1cqb39/2/
Make the finalConfirm function as a generic one, and call it in the action callback (of your empty check) accordingly.
Here is a DEMO: https://jsfiddle.net/st1cqb39/3/
Hope this helps!
I am trying to pass through an value on the Ionic popup but keep getting MouseEvent {isTrusted: false, isIonicTap: true, screenX: 0, screenY: 0, clientX: 97…} whenever I log
statementId to the console. What am I doing wrong?
View.html
<a class="button button-assertive" ng-controller="PopupController" ng-click="showRequestTakedownPopup(statement.id)"><i class="icon ion-sad"></i></a>
PopupController
function PopupController($scope, $ionicPopup, $timeout, $state) {
$scope.showRequestTakedownPopup = function() {
$ionicPopup.confirm({
title: 'Request Takedown',
content: 'Would you like to create a takedown request for this item?',
scope: $scope,
buttons:[
{
text: "Yes",
type: 'button-positive',
onTap: function(statementId){
console.log(statementId);
$state.go('sidemenu.takedown-justification', { "statement": statementId });
}
},
{
text: "No",
type: 'button-positive',
onTap: function(){
}
}
]
})
};
};
I have checked and confirmed that statement.id is correct in the view.
The docs say that onTap
will by default close the popup
and resolve the popup promise with its return value. If you wish to prevent the
default and keep the popup open on button tap, call event.preventDefault() on the
passed in tap event.
(source)
so what you want to do is call the popup like you would call a promise
confirmPopup.then(function(res) {
if(res) {
console.log('You are sure');
} else {
console.log('You are not sure');
}
});
In your case the following should work:
$scope.showRequestTakedownPopup = function(statementId) {
var myPopup = $ionicPopup.confirm({
title: 'Request Takedown',
content: 'Would you like to create a takedown request for this item?',
scope: $scope,
buttons:[
{
text: "Yes",
type: 'button-positive',
onTap: function(e){
return statementId;
}
},
{
text: "No",
type: 'button-positive',
onTap: function(){
}
}
]
});
myPopup.then(function(statementId) {
console.log(statementId);
$state.go('sidemenu.takedown-justification', { "statement": statementId });
});
};
I am new to angularjs I have to show confirmation dialog on browser back,I am trying to do so but not able to achieve the required functionality.
Here is my code:
var previousUrl,backPress = false;
$rootScope.$on('$locationChangeStart', function( event, newUrl, oldUrl ) {
if (previousUrl && previousUrl === newUrl) {
BootstrapDialog.show({
title: "title",
message: "message",
closable: true,
buttons: [{
label: "ok",
action: function (dialogRef) {
backPress=true;
event.preventDefault();
dialogRef.close();
}
}, {
label: "cancel",
action: function (dialogRef) {
backPress=false;
dialogRef.close();
}
}]
});
console.log("backPress"+backPress);
if (!backPress) {
console.log("backPress in condition"+backPress);
event.preventDefault();
}
} else {
previousUrl = oldUrl;
}
});
Kindly Suggest how to proceed next.
Hi I have a popup window control what I'm trying todo is get it to continue the click event if the user chooses the yes button. How do you continue the click event for the 'yes' button, I'm trying to make it return true but it doesn't continue for the click it just return false.
<script type="text/javascript">
$(document).ready(function() {
$('.delete-question').click(function(e) {
ret = false;
_this = this;
$('#pop-up-1').popUpWindow({
modal: true,
blurClass: '.main-container',
action: "open",
buttons: [{
text: "Yes",
click: function () {
this.close();
ret = true;
}
}, {
text: "No",
click: function () {
this.close();
}
}]
});
return ret;
})
});
</script>
You can't do it directly, but you can emit the click event once it is needed, e.g. something like this (not tested):
<script type="text/javascript">
// global flag to track the popup state
var popupReturn = false;
$(document).ready(function() {
$('.delete-question').click(function(e) {
// when true (after Yes click only) go on returning true
if (popupReturn) {
popupReturn = false;
return true;
}
else {
_this = this;
$('#pop-up-1').popUpWindow({
modal: true,
blurClass: '.main-container',
action: "open",
buttons: [{
text: "Yes",
click: function () {
// set global flag to true
popupReturn = true;
// emit click event where it knows that popupReturn is true
$(_this).click();
this.close();
}
}, {
text: "No",
click: function () {
this.close();
}
}]
});
return false;
}
})
});
</script>
You can't return from asynchronous event like in your case, because your "modal" is not really modal in sense that it doesn't pause code execution until use clicks a button.
This is where callback come handy. I would wrap the modal code into helper plugin and use it like this:
$.fn.confirmable = function(options) {
options = $.extend({
close: $.noop,
dismiss: $.noop
}, options);
this.each(function() {
$(this).popUpWindow({
modal: true,
blurClass: '.main-container',
action: "open",
buttons: [{
text: "Yes",
click: function() {
this.close();
options.close();
}
}, {
text: "No",
click: function() {
this.close();
options.dismiss();
}
}]
});
});
};
$('.delete-question').confirmable({
close: function() {
// ok pressed do something
},
dismiss: function() {
// cancel pressed
}
});
It means that your workflow needs to transform to asynchronous callback/promise-based.