I am using the following to create a bootbox prompt message.
(The title and the default value are obtained via an ajax request.)
bootbox.prompt({
title: response.message,
value: response.value,
buttons: {
confirm: {
label: 'Ok'
}
},
callback: function (result) {
}
});
Although i have setup only confirm button, the prompt displays also the Cancel Button.
What am i doing wrong here?
I have tried hiding the cancel button via css with no success like so
.btn btn-secondary btn-default bootbox-cancel{
visibility:hidden;
}
I really don't recommend doing this - standard user expectation for a prompt is to have an obvious way of cancelling it.
That being said... the d-none class, when added to the Cancel button, will hide it:
bootbox.prompt({
title: 'Please enter something:',
callback: function(result){
console.log(result);
},
buttons: {
cancel: {
className: 'd-none'
}
}
});
Demo: https://jsfiddle.net/t3o5Lcnb/
You can't remove the Cancel or Confirm/OK buttons from the bootbox.alert, bootbox.confirm, or bootbox.prompt dialogs, but you can customize them (change the text, add icons, set the button classes, or add custom classes). In this case, adding the d-none Bootstrap class adds a display: none; rule to the Cancel button.
You can find a few examples of customizing the buttons on the Examples page: http://bootboxjs.com/examples.html#confirm-alternate-text-color
Related
This is simple enough in earlier version of tinyMCE, but I can't find a way to make it work in v6x (suggested answers here only apply to earlier versions, that I can see)
Here's my button:
tinymce.PluginManager.add('newButton', (editor, url) => {
editor.ui.registry.addButton('newButton', {
text: 'Click me',
enabled: true,
onAction: () => {
alert('You clicked me')
}
})
return {
getMetadata: () => ({
name: 'newButton',
url: ''
})
}
});
tinymce.init({
selector: "textarea",
plugins: "newButton",
toolbar1: "newButton"
});
This works fine - click the button and you get an alert telling you you have. What I want to do now is call this click event from code (JaveScript) - I was hoping
tinymce.activeEditor.buttons['newButton'].onclick();
would work, as it does for - say - the "code" plugin; i.e. add this plugin (and button) to the editor and calling
tinymce.activeEditor.buttons['code'].onclick();
simulates clicking the toolbar button. So... how can I "click" my own custon toolbar button?
[edit] well.. that last line did work, I swear it did. Now it doesn't. wt.. :(
This may not be the "right" way (well, I know it isn't!) but I've found a way that works :)
First, I need a way to identify/find my custom button. I figured out tinymce renders them as div elements, and using
var divs = document.querySelectorAll('button');
divs.forEach((div) => {
console.log(div.innerHTML);
})
I am able to identify it and find the HTML used - it is not graced with an id, but we can use the innerHTML property (as identified) to get it and then simulate a click- viz:
var divs = document.querySelectorAll('button');
divs.forEach((div) => {
// NB 'DOC' is the text property of my custom button
if (div.innerHTML === '<span class="tox-tbtn__select-label">DOC</span>') {
// now we can simulate a click on it:
var evt = new MouseEvent("click", {
view: window,
bubbles: true,
cancelable: true
});
div.dispatchEvent(evt);
return;
}
})
(Thanks to the second answer, by Derek, here:
How to simulate a mouse click using JavaScript?
for the simulate click code)
[edit] better to use a for-loop rather than forEach as there's no sensible way to break out of the latter - that "return" doesn't actually do anything.
I have a bootbox confirm dialog box. In that, I have some form validation.Validation working fine and as long as validation fails confirm dialog box still opens. But when I click on the cancel button, still it is asking for validation.
bootbox.confirm({
closeButton: true,
message: valid_result,
size: 'large',
title: 'Fill fields with related values',
buttons : {
confirm : { label: '<i class="fa fa-check"></i> Validate'}
},
callback: function () {
var res = getLinkupInformation(ids_string)
if(res == true) {
return true;
} else {
return false;
}
}
});
The validation part is working and if validation passed then only modal was closing. But when user click on the cancel button or close icon still it is asking validation. When I remove return false in call back function in else part then the validation button is not working and when I click on the validate button confirmation dialog box was closing.
Please guide me how to solve this issue?
The callback expects you to supply an argument, like so:
callback: function (result) {
}
If the user cancelled the dialog, either by clicking Cancel or the close (x) button, then result (or whatever you called your argument) will be the value false. You would use that value like this:
callback: function (result) {
if(result) {
/* your code here */
}
}
This is more or less covered in the documentation.
How can I prevent ionic keyboard from hiding when I press a specific button in my Ionic 1 app?
This solution doesn't work for me, the keyboard remains open wherever I click.
A possible solution can be found here (the same link sent by Sahil Dhir). I also had this problem and this solution worked for me.
The directive is:
angular.module('msgr').directive('isFocused', function($timeout) {
return {
scope: { trigger: '#isFocused' },
link: function(scope, element) {
scope.$watch('trigger', function(value) {
if(value === "true") {
$timeout(function() {
element[0].focus();
element.on('blur', function() {
element[0].focus();
});
});
}
});
}
};
});
Its usage is:
<input type="text" is-focused="true">
What it basically does is to watch the focus of the input and whenever the input loses focus (when you press a button on the screen outside the keyboard, for example) it rapidly assigns the focus back to it. So the keyboard doesn't have time to hide.
Hope it works for you too!
I am looking for a way to display an on-demand pop in a Crossrider extension, in the same fassion as the Javascript 'confirm' dialog. I have an HTML page in the resources and I would like to use it in a popup, which will be displayed whenever a certain message is dispatched. I realize there is functionality to display popups in Crossrider (appAPI.browserAction.setPopup), however I would like to display a custom popup on-demand, instead of a simple JS 'confirm' dialog. Is there a way of doing that? Thank you.
You can use a combination of appAPI.browserAction.setPopup and appAPI.browserAction.clearPopup to control the popup. In the following example, the extension scope code determines which popup is required based on the page visited and sets it accordingly:
extension.js:
appAPI.ready(function($) {
if (appAPI.isMatchPages("*google", "*msn")) {
// Send message to background to set the popup based on the page url
appAPI.message.toBackground({
request: 'set-popup',
popup: (location.hostname.indexOf('google') !== -1)
? 'google.html'
: 'msn.html'
});
} else {
// Send message to background to clear the popup for other pages
appAPI.message.toBackground({
request: 'clear-popup'
});
}
});
background.js:
appAPI.ready(function($) {
appAPI.browserAction.setResourceIcon('icon.jpg');
appAPI.message.addListener(function(msg) {
switch(msg.request) {
case 'set-popup':
// When setting the page, first clear the existing popup
appAPI.browserAction.clearPopup();
// then set the new popup
appAPI.browserAction.setPopup({
resourcePath: msg.popup,
width: 300,
height: 200
});
break;
case 'clear-popup':
appAPI.browserAction.clearPopup();
break;
}
});
});
[Disclosure: I am a Crossrider employee]
In my current usecase, I am trying to use angular-ui modal window to show the progress of calculations that we do in a background process which we disable on completion.
All works well. I just want to disable user from clicking any of element in background.
Any idea how can we do this?
You can pass the following options, when opening a modal window, to prevent users from closing the window:
backdrop: 'static' - top prevent users from closing a modal on backdrop click
keyboard: false - so users can't close a window by pressing ESC
Full documentation here: http://angular-ui.github.io/bootstrap/#/modal
I just want to add an example with code and extend pkozlowski.opensource answer,
Check this example:
var modalInstance = $modal.open({
templateUrl: '/views/registration/loginModal.html',
controller: LoginModalInstanceCtrl,
windowClass: 'login-modal-window',
resolve : {
credentials : function(){ return {email :'', password:''}; }
},
backdrop: 'static', /* this prevent user interaction with the background */
keyboard: false
});
modalInstance.result.then(function (res) {
}, function () {
/* cancel */
$state.go('home');
});