dojo tool tip dialog:
how to put cancelbutton(X) in dojo.tooltip dialog.
I am unable to put that X in that dialog
It does not seem that there is a cancel button for the "dijit.TooltipDialog". What you can possibly do is, add a x (cancel button) in the content of the tip dialog and attach onclick event to it.
You may have a global variable 'dialog' and add the cancel button in its content and attach onclick TooltipDIalog hide event to it as follows.
var dialog = new dijit.TooltipDialog({
content: '<p> whatever you want to display</p><br />' + 'x'
});
Or attach an onclick event to the link after the TooltipDialog dom is added to the document as follows.
var dialog = new dijit.TooltipDialog({
content: '<p> whatever you want to display</p><br />' + '<a id="close-dialog" href="#">x</a>',
onShow : function () {
dojo.connect (dojo.byId('close-dialog'), "onclick", function (evt) {
dojo.stopEvent(evt);
dijit.popup.close(dialog);
});
}
});
Related
I'm trying to use PrimeNg TabView component along with confirmDialog unsuccessfully
I am able to show this confirm dialog but it appears after user switch to target tab panel which is wrong.
<p-tabView (onChange)="handleChange($event)" [(activeIndex)]="index">...</p-tabView>
handleChange(e) {
this.confirmationService.confirm({
message: 'There are unsaved changes, do you want to proceed?',
accept: () => {
this.index = e.index;
},
reject:() =>{ }
});
}
Do you have an idea on how to prevent or allow tab change using confirm dialog ?
Thanks
there is no official way to prevent change to another tab by press on that tab , but 😅 there is a work around it first we need to prevent the tab change by tab click,
1️⃣ we need to set the header by ng-template or it called a custom header
template
<p-tabPanel >
<ng-template pTemplate="header">
<div (click)="handleChange($event,0)">
Godfather I
</div>
</ng-template>
.....
</p-tabPanel>
2️⃣ we bind a click event to the new header text and by using mouse event stopPropagation method we can prevent the change 👌,now we can control the change by confirm result but you need to pass the current tab index, that why I add another parameter to handleChange
component
handleChange(e:MouseEvent,tabIndex:number) {
e.stopPropagation();
if (this.index == tabIndex){
return;
}
// console.log(tabIndex)
this.confirmationService.confirm({
message: "There are unsaved changes, do you want to proceed?",
accept: () => {
this.index = tabIndex;
},
reject: () => {}
});
}
the if block if (this.index == tabIndex){return;} use to prevent showing the confirm dialog if we click on the same active tab again
demo 🚀🚀
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 have a page with 7 dijit FilteringSelect widgets that I want to connect to stores fetched from the server if the user clicks on the widget or the widget otherwise gains focus. I want the event to fire one time.
If I add onfocus="loadDropDown(this)" to my markup, it executes every time the widget gains focus, as you would expect.
I'm trying to use dojo to fire the event one time using on.once(). The function to use dojo event handling is running but the event handler function never gets called when a widget gains focus.
Any pointers?
This is my markup
<select data-dojo-type="dijit.form.FilteringSelect"
type="text" intermediateChanges="false"
data-dojo-props="required:false, pageSize:20, placeholder: '---'"
scrollOnFocus="true" name="CJ1lxA" style="width: 40em;"
id="searchAgency">
</select>
This is to regester the events
function registerDDLoad(){
require(["dojo/on", "dijit", "dojo/ready"], function(on, dijit, ready){
ready(function(){
var dropDown = dijit.byId("searchAgency");
on.once(dropDown, "onfocus", function() {
loadDropDown(dropDown);
});
dropDown = dijit.byId("searchLocation");
on.once(dropDown, "onfocus", function() {
loadDropDown(dropDown);
});
dropDown = dijit.byId("searchCounty");
on.once(dropDown, "onfocus", function() {
loadDropDown(dropDown);
});
dropDown = dijit.byId("searchRep");
on.once(dropDown, "onfocus", function() {
loadDropDown(dropDown);
});
dropDown = dijit.byId("searchSenate");
on.once(dropDown, "onfocus", function() {
loadDropDown(dropDown);
});
dropDown = dijit.byId("searchStatus");
on.once(dropDown, "onfocus", function() {
loadDropDown(dropDown);
});
dropDown = dijit.byId("searchAE");
on.once(dropDown, "onfocus", function() {
loadDropDown(dropDown);
});
});
});
}
registerDDLoad();
The dojo event class, dojo/on expects events to be specified without the 'on':
onFocus = focus
onClick = click
onMouseOut = mouseout
...
I think changing that should fix your problem. I've copied your code into test area on jsFiddle, so you can play around with it.
NB: Since you are re-using the dropdown variable, it will always equal the last filteringSelect (id=searchAE) and never the earlier ones.
I am creating a dynamic context menu and as it is expected I would like to menu to be closed when the mouse leaves the menu box. I have used :
var dlg = new dijit.Menu({
onMouseLeave: function(event){
dijit.popup.close(dlg);
}
});
But when i go out side the box nothing happens. If I put same function inside the MenuItems then when I leave the MenuItem box it closes the box.
Any comment?
This would be because the dijit.Menu does not register onMouseLeave on its domNode.
To do this manually, following is all you need: (havent sampled a test though should work)
var myconnects = []
var dlg = new dijit.Menu({
destroy: function() { // for a neat garbage collections, remove listeners
var ch;
while(ch = myconnects.pop()) ch.disconnect();
this.inherited();
}
...
});
myconnects.push(dojo.connect(dlg.domNode, "onmouseleave", dojo.hitch(dlg, function() {
dijit.popup.close(this);
});
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/