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?
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've got an alert controller that, when triggered, opens and then immediately closes without me doing anything.
let alert = this.alertCtrl.create({
title: 'Requires Login',
message: 'Please register or log in to add to cart.',
buttons: [
{
text: 'Cancel',
handler: () => {
console.log('Cancel clicked');
}
},
{
text: 'Login',
handler: () => {
this.logOut();
}
}
]
});
alert.present();
I can't find anything wrong and I'm wondering what is causing this issue? When I run the application through my phone I get the error, but when I run it through the browser, no error.
Here's a working example from my current project
logout() {
let confirm = this.alertCtrl.create({
title: 'Confirm',
message: 'Are you sure you want to logout?',
buttons: [
{
text: 'No',
handler: () => { }
},
{
text: 'Yes',
handler: () => {
this.removeNotificationRegistrationAndLogOut(LoginPage, true);
}
}
]
});
confirm.present();
}
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 });
});
};
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