I have a sweet alert with a textarea on it, the window is closing on spacebar press.
swal({
title: 'Something Went Wrong',
text: '<textarea id="my-textarea" name="my-textarea" rows="5" />',
type: 'error',
showCancelButton: true,
confirmButtonText: 'Yes, Refresh Page',
confirmButtonClass: 'btn-danger',
html: true
}
Can I prevent this behaviour ?
I had the same problem and i solved it like this :
If you use le min js, retrieve this part of code in sweet-alert.min.js "=n.keyCode||n.which,a=k(m,"visible");if(-1!==[9,13" and remove the next "32" in the array which represant the ascii code of spacebar.
I have comment line 388 and was able to have the window not closing.
//fireClick($targetElement, e);
Related
Is there any default method to hide tooltip after a few seconds on click?
I want to show it on click for 2 sec and then close it. how should i do this?
You need to set a timeout when the tooltip is first shown. I also like to add hideOnClick: false so that it doesn't disappear when they click somewhere else.
Here's a complete example for you:
tippy('#button', {
trigger: 'click',
hideOnClick: false,
onShow(instance) {
setTimeout(() => {
instance.hide();
}, 2000);
}
});
I need to show a warning popup button when the user presses the "Checkout" button (just an ok/dismiss button)
I avoid using raise Warning() or raise ValidationError() since I want to remain on the existing page and simply show a pop-up warning.
Can you please share the simplest way to do this in Odoo 13?
On click proceed checkout button called jsonRpc where call your json controller with that add your custom logic on the controller and return that and on the js check with your condition and raise your Dialog-Box Like this,On Js:
var Dialog = require('web.Dialog');
ajax.jsonRpc("/custom/url", 'call', {}).then(function(data) {
if (data) {
var dialog = new Dialog(this, {
size: 'medium',
$content: _t("<div style='font-size:14px;font-family:Helvetica, Arial, sans-serif;'>Error.</div>"),
buttons: [{
text: _t('Ok'),
classes: "btn-primary",
close: true
}],
}).open();
} else {
// odoo logic
}
});
Thanks
I am able to display radio buttons using bootbox prompt. But I am not getting the checked radio button by default. How to do that . Here is my code to displaying radio buttons.
bootbox.prompt({
title: "This is a prompt with a set of Radiobutton inputs!",
inputType: 'radio',
inputOptions: [
{
text: 'EU Format',
value: '1',
checked: true,
},
{
text: 'Standard Format',
value: '2',
}
],
callback: function (result) {
console.log(result);
}
});
I have added checked: true, and tried with checked : "checked" , but not sure these both not working . Any help would be greatly appreciated.
This is actually covered in the documentation, here. I've also answered this previously, but since I don't have a link to that answer at the moment, this is what you need to do:
bootbox.prompt({
title: "This is a prompt with a set of Radiobutton inputs!",
inputType: 'radio',
value: '1', /* value sets the initial checked item */
inputOptions: [
{
text: 'EU Format',
value: '1',
checked: true,
},
{
text: 'Standard Format',
value: '2',
}
],
callback: function (result) {
console.log(result);
}
});
The only difference between radiobuttons and checkboxes is that you can only set a single value with radios. NOTE THAT THE TYPES MUST MATCH. In your example, '1' would work, but 1 would not, since the former is a string, whereas the latter is a number. We don't do any explicit type coercion when checking the value attribute.
Since you're referencing the radio type, I assume you're using the 5.x version? If so, I have a work-in-progress update to the docs here, until I can push the 5.x version out. The old docs are still valid, but it (obviously?) doesn't document some of the new features.
I am using extjs 4.0.7. I want to disabled tab and Enter key event when user using Combobox. I have tried to use keyUp and KeyDown event. But I didn't get any alert for it.
Here is my code:
{
xtype: 'combo',
store: ds,
id:'UserBO_SelectComponentId',
displayField: 'displayName',
valueField: 'userId',
typeAhead: false,
hideLabel: true,
disabled: false,
hideTrigger:true,
multiSelect:true,
delimiter: ";",
anchor: '100%',
triggerAction: 'all',
listeners: {
change: function( comboField, newValue, oldValue, eOpts ){
selectUserCallBack2(newValue,'UserBO_SelectComponentId',comboField,oldValue);
},
select:function(comboField,oldValue){
testRec(comboField,oldValue)
},
keypress:function(comboField,e){
disabledKeysOnKeyup(comboField,e)
}
},
listConfig: {
loadingText: 'Searching...',
enableKeyEvents: true,
emptyText: 'No matching posts found.'
},
pageSize: 10
}
Can anyone please suggest what is the problem here?
The keyup, keydown and keypressed events only fire if enableKeyEvents is set to true. Default this is set to false, so you need to add enableKeyEvents:true to the combobox config. And then do special treatment for enter and tab key.
You don't need to listen to key events and tab into that. What you want to do is set autoSelect to false. It's true by default. When set to false the user has to manually highlight an item before pressing the enter or tab key to select it (unless the value of typeAhead were true), or use the mouse to select a value.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.field.ComboBox-cfg-autoSelect
As the title says. I want to create TooltipDialog, after I click link and load custom content into that dialog. The tooltip body is complete placeholder, I just haven't done any server logic to handle this.
So far i got to this point:
PreviewThread: function (ThreadID) {
var tooltip = new dijit.TooltipDialog({
href: "/Account/SingIn?ReturnUrl=" + Jaxi.CurrentLocation
});
},
Preview
The point is not even how to load content, into dialog, but how to open it in the first place ?
After more googling and trial & error I finally got to this:
PreviewThread: function (ThreadID) {
var tooltip = new dijit.TooltipDialog({
href: "/Account/SingIn?ReturnUrl=" + Jaxi.CurrentLocation,
closable: true
});
dojo.query(".thread-preview").connect("onclick", function () {
dijit.popup.open({ popup: tooltip, around: this });
});
},
It's somehow working. ToolTipDialog opens, but.. I have to click twice and and I can't close dialog after click outside it, or after mouseleave.
Ok this, going to start look like dev log, but hopefully it will save others some headchace:
I finally managed to popup it where I want to:
PreviewThread: function (ThreadID) {
var tooltip = new dijit.TooltipDialog({
href: "/Account/SingIn?ReturnUrl=" + Jaxi.CurrentLocation,
closable: true
});
dijit.popup.open({ popup: tooltip, around: dojo.byId("thread-preview-" + ThreadID) });
},
<a href="javascript:Jaxi.PreviewThread(#thread.ThreadID)" id="#tp.ToString()" >Click Me</a>
Note that I'm using Asp .NET MVC.
Now only thing left is to close damn thing in user friendly manner..
There are afaik two ways you can do this, and neither one is very elegant tbh :-P
The first is to use dijit.popup.open() and close() to show and hide the dialog. In this case, you have to provide the desired coordinates. I see that you only provide your PreviewThread function with a thread id, but assuming you also tack on the event object, you can do:
PreviewThread: function (ThreadID, event) {
Jaxi.tooltip = new dijit.TooltipDialog({
href: "/Account/SingIn?ReturnUrl=" + Jaxi.CurrentLocation
});
dijit.popup.open({
popup: Jaxi.tooltip,
x: event.target.pageX,
y: event.target.pageY
});
}
When you're using this method, you also have to manually close the popup, for example when something outside is clicked. This means you need a reference to your tooltip dijit somewhere, for example Jaxi.tooltip like I did above. (Side note: dijit.TooltipDialog is actually a singleton, so there won't be lots of hidden tooltips around your page). I usually end up with something like this for hiding my tooltip dialogs.
dojo.connect(dojo.body(), "click", function(event)
{
if(!dojo.hasClass(event.target, "dijitTooltipContents"))
dijit.popup.close(Jaxi.tooltip);
});
This may of course not work for you, so you'll have to figure out something that suits your particular arrangement.
The second way is to use the dijit.form.DropDownButton, but styling it as if it was a link. I'm not going to go into details on this, just instantiate a DropDownButton on your page and use Firebug to tweak it until it looks like your regular links. FYC, link to DropDownButton reference guide.
You may try:
PreviewThread: function (ThreadID) {
var tooltip = new dijit.TooltipDialog({
href: "/Account/SingIn?ReturnUrl=" + Jaxi.CurrentLocation,
closable: true,
onMouseLeave: function(){dijit.popup.close(tooltip);}
});
dijit.popup.open({ popup: tooltip, around: dojo.byId("thread-preview-" + ThreadID) });
},
This will close the dialog as soon as you moove the mouse out of the dialog.
Check the API for all possible events:
http://dojotoolkit.org/api/