I am newbie on dojo and trying to setup the tooltip.
I have a element that is generated dynamically and i create a id attribute on the same to attach a tooltip to the element, when user hover on it, Dojo tooltip appears, when user click on it the element get removed and created again dynamically without the id, so the connected Tooltip get remain active and i am not able to close it, is there any way to hide the tooltip if connected id is removed.
Thanks in advance.
So , when you click on the element , that element get removed , so before it get removed get it's (click with event args in claback function ,get the id by event.target.id or this.id if event directly connected to the node)
after getting that Id you can hide the tooltip
var element = dojo.byId(Id);
yourTooltip.hide(element);
Thanks for your efforts bRIMOs Bor, But dojo tooltip uses connected id as a reference where to show the tooltip, we can't close a tooltip by getting element connected id when user mouseover the connected id.
Here is the code which worked for me. I just removed the dijitTooltip Class from the mastertooltip, which make a tooltip visible.
dijit.Tooltip._masterTT.containerNode.innerHTML='';
dojo.removeClass(dijit.Tooltip._masterTT.id, "dijitTooltip");
Thanks once again :)
Related
I'm trying to retrieve an element inside a material dialog container so that I can use it's position.
I am using Material Angular, and specifically the Dialog.
So far I have tried the getBoundingClientRect() after getting the element with it's associated id.
Using document.getElementById(elementId).getBoundingClientRect() returns {"x":0,"y":0,"width":0,"height":0,"top":0,"right":0,"bottom":0,"left":0}
Where elementId is the id of the button that is inside the mat-dialog.
For anyone that comes across this from my stupidity, the answer is that the element I was looking for was hidden and had no position.
I had two buttons with the same id, and it just got the first one that was in the DOM.
Changing the id of the button fixed that.
I am trying to use multiple toggles in my add-in but having trouble identifying which one was toggled.
I am able to get the id of the toggle in most cases, but if a user clicks on the smaller knob within the toggle, I am unable to get the toggle's id.
From the example above, if I click on the toggle thumb, where the red arrow points, I get the following output as the target.id
I have no way to identify which toggle this came from and do not believe I can set the id of the toggle thumb.
When the user clicks anywhere in the green sections, I get the following log where I can grab the ID and do conditional logic.
Before reporting this as a bug on github, I wanted to make sure I wasn't doing something wrong. I came across this which was similar but not what I am looking for: https://github.com/OfficeDev/office-ui-fabric-react/issues/6753
This code pen will show the issue:
https://codepen.io/rocketlobster5/pen/eYOvGjz
I don't think it should considered as a bug, to get the element that the event listener is attached to currentTarget property should be used instead of target.
The following example demonstrates how to retrieve id of toggle element:
private handleChange(ev: React.MouseEvent<HTMLElement>, checked: boolean) {
console.log(ev.currentTarget["id"]);
}
Modified codepen
New to jQuery here. Love it so far, lots to learn!
Challenge: I cannot delete items inside a recently selected element.
Source: I used the jQuery UI Selectable/Serialize example. Works great, I'm able to select multi divs, insert content.
So far: I've tried assigning class and IDs to new element, but when I click on it, it always re selects the container not delete the element. To make matters worse it will place a new element in the child element.
How to select and delete these "child" spans that are created please? Try it here, select jobs or drag name to job, then try to delete the name you just added.
http://jsbin.com/azeqow/1/edit
(tried to add image of problem, I'm too new)
I am able to add a row with the dom but how can I get a div to display to the right of drop down depending on what is selected?
Here is an example of what I have so far: http://jsbin.com/#/afojid/1/edit
The first drop down is working correctly but the rest I would like to add when the button is clicked and I would like them to work the same way as the orginal drop down menu. So that if Asian is selected an add section will appear to the right, if Other is selected an other add section will appear to the right, and so on for each time the add button is clicked. I tried clone but I don't want anything to be selected when the add button is clicked
The fact that you're working with ids instead of classes more or less universally makes this very challenging. You should update your code to work with classes and appropriately clone the *Info tables when you create new dropdowns.
You're using an old version of jQuery, so .on is not available to you for delegation. Instead, use .delegate:
$(document).delegate('#typeofEthnicity,[id^=newDDMenu]', 'change', showEthnicity)
This will call the showEthnicity function for the original dropdown and any added dropdowns, but you also have to clone all of the *Info divs and put them in the appropriate spot in the table (I suppose the same spot as the appended row). If you use classes, then it's a simple matter of finding the dropdown's parent row and then locating the corresponding child with the appropriate class to be shown.
I know that I can get the (numerical) index of the currently selected tab like this:
$('.selector').tabs('option', 'selected');
Is there a way to get the ID of the currently selected tab, outside of an event handler? By "ID" I'm referring to the string property (ui.panel.id) in the ui object that's passed in as an argument to an event listener callback - but I'm trying to do it outside of a callback.
I know I can hack together my own solution, but I want to make sure I'm not reinventing the wheel first.
I'd would rather work with IDs than indices so that changing the order of my tabs doesn't break my code - it's at least a little more robust and readable.
As far as I know, selected tab has class ui-tab-selected. You may use
$('.selector').find('.ui-tab-selected a');
to fetch selected tab. It was element, where href attribute - identifier of active panel.
#Matt Ball
You can select it using the "ui-state-active" class associated with the active tab and then get the id from the inner href link:
var selected_tab_id = $('.ui-state-active a', '#ui-tabs-widget').attr('href').split('#')[1];
'#ui-tabs-widget' is the id for your actual tabs widget so replace it with it so the active tab is selected only in the widget you wanted to and not in every one in the page.