I'm using $ionicPopup.confirm() but I would like to change "cancel's button" text. Is it possible to do so ?
I'm aware of .show() syntax:
buttons: [
{ text: 'Cancel' }
]
But it does not seem to work with .confirm() ...
Thank 4 the help
At least in the latest release of Ionic (1.0.0) you can do the following:
var confirmPopup = $ionicPopup.confirm({
title: 'Popup title',
template: 'Popup text',
cancelText: 'Custom cancel',
okText: 'Custom ok'
}).then(function(res) {
if (res) {
console.log('confirmed');
}
});
Here is the relative documentation.
UPDATE : on ionic 1.0.0, this is now possible, check here
showConfirm Options :
{
title: '', // String. The title of the popup.
cssClass: '', // String, The custom CSS class name
subTitle: '', // String (optional). The sub-title of the popup.
template: '', // String (optional). The html template to place in the popup body.
templateUrl: '', // String (optional). The URL of an html template to place in the popup body.
cancelText: '', // String (default: 'Cancel'). The text of the Cancel button.
cancelType: '', // String (default: 'button-default'). The type of the Cancel button.
okText: '', // String (default: 'OK'). The text of the OK button.
okType: '', // String (default: 'button-positive'). The type of the OK button.
}
Yes you can do wathever you want, using ionic popup.show and bind the Cancel event.
$ionicPopup.show({
template: msg,
title: titleConfirm,
buttons: [
{ text: "BTN_NO",
onTap:function(e){
return false;
}
},
{ text: "BTN_OK",
onTap:function(e){
return true;
}
},
]
});
After investigation on the ionic popover.confirm function this is
not possible to customize it. The value of popover.confirm are hardcoded line 446
function showConfirm(opts) {
return showPopup(extend({
buttons: [{
text: opts.cancelText || 'Cancel',
type: opts.cancelType || 'button-default',
onTap: function() { return false; }
}, {
text: opts.okText || 'OK',
type: opts.okType || 'button-positive',
onTap: function() { return true; }
}]
}, opts || {}));
}
It's possible to do, you have to use the "type" thing inside the button
buttons: [
{ text: 'Cancel' },
{
text: '<b>Save</b>',
type: 'button-assertive',
onTap: function(e) {
$scope.request_form.abc = "accepted";
}
}
]
in the type part you have to give the class name , and you can change the color of the button.
Related
I have a problem with migrating the plugin from tinymce 4 to tinymka 5. The console tells me "Uncaught (in promise) TypeError: btn.active is not a function"
I can not find an equivalent for tinymce 5. Can someone replace it?
Code below:
tinymce.PluginManager.add('phonelink', function(editor, url) {
// Add a button that opens a window
var linkText = "";
var linkTitle = "";
var link = "";
// tinymce.DOM.loadCSS(url + '/css/phonelink.css');
editor.ui.registry.addButton('phonelink2', {
text: 'asddas',
icon: 'image-options',
onSetup: updateOnSelect,
onAction: onClickPhoneButton
});
// Adds a menu item to the tools menu
editor.ui.registry.addMenuItem('phonelink', {
text: 'asddas',
icon: 'image-options',
context: 'tools',
onAction: onClickPhoneButton,
onSetup: updateOnSelect
});
function onClickPhoneButton(){
editor.windowManager.open({
title: '123213123',
body: {
type: 'panel',
items: [
{type: 'input', name: 'phone', label: 'Teléfono', value: link},
{type: 'input', name: 'showtext', label: 'Texto a mostrar', value: linkText},
{type: 'input', name: 'title', label: 'Título', value: linkTitle}
]
},
buttons: [
{
text: 'Close',
type: 'cancel',
onclick: 'close'
},
{
type: 'submit',
name: 'submitButton',
text: 'Stwórz',
primary: true
}
],
onAction: function(e) {
alert('Toggle menu item clicked');
},
onSubmit: function(e) {
var data = e.getData();
var hrefLink = '<a title="' + data .title + '" href="tel:+34' + data .phone + '">' + data .showtext + '</a>';
if(link !== ''){
editor.setContent(hrefLink);
}else{
editor.insertContent(hrefLink);
}
e.close();
}
});
}
function updateOnSelect() {
var btn = this;
const editorEventCallback = function (e) {
var node = editor.selection.getNode();
var isTelLink = node.href !== undefined && node.href.indexOf('tel:+') !== -1
btn.active(isTelLink);
if(isTelLink){
link = node.href;
link = link.replace("tel:+34", "");
linkTitle = node.title;
linkText = node.text;
}
};
editor.on('NodeChange', editorEventCallback);
return function (btn) {
editor.off('NodeChange', editorEventCallback);
}
}
});
I searched the documentation for a replacement, but found nothing.
TinyMCE 5 no longer passes the button and menu instance via this. Instead it passes an API instance as the first parameter, so you'll want to change your updateOnSelect function to something like this:
function updateOnSelect(api) {
const editorEventCallback = function (e) {
var node = editor.selection.getNode();
var isTelLink = node.href !== undefined && node.href.indexOf('tel:+') !== -1
api.setActive(isTelLink);
if(isTelLink){
link = node.href;
link = link.replace("tel:+34", "");
linkTitle = node.title;
linkText = node.text;
}
};
editor.on('NodeChange', editorEventCallback);
return function (btn) {
editor.off('NodeChange', editorEventCallback);
}
}
You'll note var btn = this has been removed and that the API to set an item as active is setActive instead of active. This can be found in the documentation here: https://www.tiny.cloud/docs/ui-components/typesoftoolbarbuttons/#togglebutton and https://www.tiny.cloud/docs/ui-components/menuitems/#togglemenuitems (see the API section in both links).
In the above, you may have noticed both reference "Toggle" items. That's another change in TinyMCE 5, as different types of buttons/menu items have a separate registration API. So you'll also need to swap to using editor.ui.registry.addToggleButton and editor.ui.registry.addToggleMenuItem. More details about that can be found here if needed: https://www.tiny.cloud/docs/migration-from-4x/#customtoolbarbuttons
Here's an example fiddle showing the changes mentioned above: https://fiddle.tiny.cloud/B5haab.
Hopefully that helps!
The code crashes when html tags are entered as input when making fields editable by using jeditable.
It opens my custom error page in the text area itself with the error message "A potentially dangerous Request.Form value was detected from the client "
When user tries to normally save new information the call goes to EditData method at Controller but when user enters html tag and tries to save the code crashes and call does not go to EditData at Controller
$('.editArea').editable('../Data/EditData', {
cssclass: 'jeditForm',
tooltip: 'click to edit',
width: '100%',
height: '150',
type: 'textarea',
title: '',
placeholder: 'click to edit',
submit: 'save',
onsubmit: function (settings, original) {
oldValue = original.revert;
},
submitdata: function (value) {
return {
id: $(this).data('id'),
propertyName: $(this).data('propertyname')
}
},
callback: function (value, settings) {
var jsonData = $.parseJSON(value);
if (jsonData.status) {
this.innerText = jsonData.value;
}
else {
alert("not updated");
this.innerText = oldValue;// + "\n" + jsonData.msg;
}
}
});
I am trying to show the list of language available as an Action sheet. But as soon as the language button is pressed the action sheet closes automatically. Is there any possible way to prevent the auto close of ion-action-sheet controller on clicking the ActionsheetButton.
async showChangeLangAlert() {
const actionSheet = await this.actionSheet.create(
{
header: this.translateText('Select language'),
buttons: this.getLanguageInputTypes(),
cssClass: 'confirmation-popup select-lang',
backdropDismiss: true,
mode: 'md'
}
);
actionSheet.present();
actionSheet.onWillDismiss().then(res => {
console.log(res);
event.preventDefault();
});
actionSheet.onDidDismiss().then(res => {
this.langChoosen.next(this.selectedLanguage);
});
}
private getLanguageInputTypes(): ActionSheetButton[] {
if (this.selectedLanguage === undefined) {
this.selectedLanguage = 'en';
}
return [
{
text: this.translateText('English'),
icon: (this.selectedLanguage.toLowerCase() === 'en') ? 'radio-button-on' : 'radio-button-off',
cssClass: (this.selectedLanguage.toLowerCase() === 'en') ? 'active-option' : '',
handler: () => {
this.selectedLanguage = 'en';
}
},
{
text: this.translateText('German'),
icon: (this.selectedLanguage.toLowerCase() === 'de') ? 'radio-button-on' : 'radio-button-off',
cssClass: (this.selectedLanguage.toLowerCase() === 'de') ? 'active-option' : '',
handler: () => {
this.selectedLanguage = 'de';
}
},
{
text: this.translateText('Select'),
icon: 'checkmark-circle',
cssClass: (this.selectedLanguage.toLowerCase() === 'de') ? 'active-option' : '',
handler: () => {
this.setSelectedLanguage();
}
}
];
}
private setSelectedLanguage() {
// close the action-sheet here
}
I want to achieve the manual close of the action-sheet controller, but it closes automatically on clicking any action button. What I am missing or is there any workaround to show the alert window as an action sheet?
the handler: ()=> returns to true after a button is clicked which dismisses the actionsheet. Returning false after the button is clicked in the handler() will keep the actionsheet in place.
handler: ()=>{
// assign selected language
this.selectedLanguage = 'en';
// then return false
return false;
}
backdropDismiss
Description
If true, the action sheet will be dismissed when the backdrop is clicked.
Attribute backdrop-dismiss
Type boolean
Default true
backdropDismiss:false
I have came up with a problem of going back in queue in sweet alert.
The code shows one big swal which on confirm shows user swal queue with three options. I need it to go to the first step of queue on cancel button.
I have found a solution with async function, but it is not working in my case (or I have made some mistake. ;) - https://jsfiddle.net/ad3quksn/252/ )
$("#ZKARobimy").click(function () {
swal({
title: "First decidable swal",
allowOutsideClick: false,
width: '70%',
showCancelButton: true,
showConfirmButton: true,
confirmButtonText: 'Go to yes function',
cancelButtonText: 'Go to no function',,
}).then((result) => {
if (result.value) //pressed confirm button
swal.mixin({
confirmButtonText: 'next step ⇛',
cancelButtonText: '⇚ back to settings',
showCancelButton: true,
reverseButtons: true,
progressSteps: ['settings', 'verify', 'ending'],
width: '70%',
allowOutsideClick: false,
}).queue([
{
title: "First in queue - settings",
html: document.getElementById("doingZKAIt").innerHTML,
onOpen: () => {
generujSMSzkaIT();
}, onClose: function (dismiss) {
if (dismiss == 'cancel') {
console.log("first in queue " + dismiss)
$("#ZKARobimy").click();
swal.clickConfirm(); //here i wanted to click confirm button in first swal - before queue
generujSMSzkaIT();
swal.close();
}
console.log("outside if - onclose first in queue")
}
},'swal with back to first one in queue', 'swal without back button'
]), function (dismiss) { //tried to set function for the swal.mixin on cancel button, but it is not working the way i want it to.
if( dismiss == 'cancel')
{
console.log("swal.mixin cancel " + dismiss)
$("#ZKARobimy").click();
swal.clickConfirm();
}
}
} else if (//pressed cancel button
result.dismiss === swal.DismissReason.cancel
) {
swal(
'Cancelled',
'Your imaginary file is safe :)',
'error'
)
}
})
})
Is there any other way to go back in swal queue?
This is available in sweetalert2: https://sweetalert2.github.io/recipe-gallery/queue-with-back-button.html
const steps = ['1', '2', '3']
const swalQueueStep = Swal.mixin({
confirmButtonText: 'Forward',
cancelButtonText: 'Back',
progressSteps: steps,
input: 'text',
inputAttributes: {
required: true
},
reverseButtons: true,
validationMessage: 'This field is required'
})
const values = []
let currentStep
for (currentStep = 0; currentStep < steps.length;) {
const result = await swalQueueStep.fire({
title: `Question ${steps[currentStep]}`,
inputValue: values[currentStep],
showCancelButton: currentStep > 0,
currentProgressStep: currentStep
})
if (result.value) {
values[currentStep] = result.value
currentStep++
} else if (result.dismiss === Swal.DismissReason.cancel) {
currentStep--
} else {
break
}
}
if (currentStep === steps.length) {
Swal.fire(JSON.stringify(values))
}
I am building an Ionic2 app. I have an alert like following:
constructor(private platform: Platform, public nav : NavController,
public exhibitionSurveyObjectService : ExhibitionSurveyObjectService ) {
this.initializeMap();
this.nav=nav;
this.testArray=[];
this.area=null;
}
addSurveyObject(){
let prompt = Alert.create({
title: 'Subscribe to our service',
message: "All the fields are necessary",
inputs: [
{
name: 'name',
placeholder: 'Name'
},
....
{
name: 'cycle',
placeholder: 'Cycle: once/weekly/monthly'
},
{
name: 'object_type',
placeholder: 'Farm/Solarpanel/plain'
},
],
buttons: [
....
{
text: 'Save',
handler: data => {
this.createExhibitionSuveyObject(data);
}
}
]
});
this.nav.present(prompt);
}
createExhibitionSuveyObject(data: any){
var cycle = data.cycle;
cycle = cycle.toUpperCase()
console.log(cycle)
var type = data.object_type;
type = type.toUpperCase()
console.log(type)
this.exhibitionSurveyObjectService.addObject(
data.name, data.farmer_email,
data.farmer_name, data.size, data.path, cycle, type).subscribe(
response => {
this.exhibitionSurveyObjects = response;
this.sayThanks();
},
error => {
this.errorMessage = <any>error;
console.log("error")
}
);
}
sayThanks(){
let alert = Alert.create({
title: 'Thank you!',
subTitle: 'We have received your data, we will get back to you soon!',
buttons: [{
text: 'Ok',
handler: () => {
this.nav.push(HomePage)
}
}]
});
this.nav.present(alert);
}
I want the last two fields to be dropdowns. How can I achieve this?
UPDATE: updated the code snippet with some more code. How it can be updated to use Modal instead of alert?
Just like you can see in Ionic2 docs
Alerts can also include several different inputs whose data can be
passed back to the app. Inputs can be used as a simple way to prompt
users for information. Radios, checkboxes and text inputs are all
accepted, but they cannot be mixed. For example, an alert could have
all radio button inputs, or all checkbox inputs, but the same alert
cannot mix radio and checkbox inputs.
And...
If you require a complex form UI which doesn't fit within the
guidelines of an alert then we recommend building the form within a
modal instead.
So you'll have to create a new Component with that form and then use it to create the Modal:
import { Modal, NavController, NavParams } from 'ionic-angular';
#Component(...)
class YourPage {
constructor(nav: NavController) {
this.nav = nav;
}
presentSubscriptionModal() {
let subscriptionModal = Modal.create(Subscription, { yourParam: paramValue });
this.nav.present(subscriptionModal);
}
}
#Component(...)
class Subscription{
constructor(params: NavParams) {
let param = params.get('yourParam');
}
}