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 });
});
};
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?
Is it possible to use the JConfirm Plugin with if statements to show different buttons within a popup or will it just need to be hard coded?
I had planned in my head something like the following:
if account activated
-> yes, display a deactivate button
-> no, display a activate button
Which would code up something like the following:
$.confirm({
icon: 'fas fa-users',
title: 'User Account: $name',
content: 'What would you like to do with this account?',
buttons: {
View: {
btnClass: 'btn-info',
text: 'View Profile',
action: function () {
// Take them to a link
}
},
Upgrade: {
btnClass: 'btn-info',
text: 'Upgrade to Tutor',
action: function () {
$.alert('Account successfully upgraded!');
}
},
Ban: {
btnClass: 'btn-danger',
text: 'Ban Account',
action: function () {
$.alert('Account has now been banned :(');
}
},
if(activated === '1'){
Deactivate: {
btnClass: 'btn-warning',
text: 'Deactivate Account',
action: function () {
$.alert('Account has now deactivted :(');
}
}
} else {
Deactivate: {
btnClass: 'btn-warning',
text: 'Activate Account',
action: function () {
$.alert('Account has now deactivted :(');
}
}
}
Reset: {
btnClass: 'btn-success',
text: 'Reset Password',
action: function () {
$.alert('User has been e-mailed a forgotten password link');
}
},
Close: {
btnClass: 'btn-default',
text: 'Close'
}
}
});
This code does not work presently, what would be a possible way of going about this?
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.
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
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.