I am trying to understand the difference between
dijit.byId and dojo.byId
For this i have taken a Button and a div .(To set the
data inside the div on click of the Button)
Show Me!
<div id="findMe">
Hiya!
</div>
This is working (dojo.byId)
function callMe()
{
var node = dojo.byId('findMe');
node.innerHTML = "Hello World";
}
But this isn't working (dijit.byId)
function callMe()
{
var node = dijit.byId('findMe');
node.innerHTML = "Hello World";
}
My understanding is , when refering to the div we need to use dojo.byId
and when we are refering to Individual components use dijit.byId
Please correct me if i am wrong .
As previously stated, dojo.byId retrieves the DOM node with that id if existent.
dijit.byId retrieves the instance of a dijit._Widget (and its subclasses), that is dojo's abstraction of UI objects, rather than the widget's DOM node. But it is important to note that dijit.byId searches through the widgets by the atrribute "widgetId", not "id". These are equal if you declare your widgets by passing a container node that already has an "id", but still dojo creates an attribute "widgetId" for every widget if not specified explicitly.
This means that widgetId and id are usually the same, but it is possible that they are different. Plus, widgetId is always set for a given widget even in cases where the id attribute of the container node is absent.
This implies that you should use dojo.byId whenever you intend to work on the DOM tree itself and dijit.byId only in case where you'd like to obtain the instance of a certain widget instance. If no widgets are present, there is no reason to use dijit.byId at all.
You are right:
dojo.byId finds elements in the DOM tree of your website with a certain ID - it searches and returns HTML elements.
dijit.byId finds dijits you created with a certain id - it searches and returns dijits (javascript objects), although these objects usually refer to a certain DOM node.
Related
When developing in the Ionic framework, the generated html sometimes will contain duplicate DOM elements, where all but one tree of elements is hidden with a class="ion-page-hidden" at the top level.
When using webdriverio to try and locate an element inside this tree, it find duplicated elements. Since the ion-page-hidden class is at the top of the tree, and not on the element itself, how can we use Xpath to locate only the displayed element.
I couldn't figure out any way to modify the XPath selector with a second condition since the elements are exactly the same!
So instead I have tried to use the webdriverio isDisplayed() function:
get openHamburgerMenu() { return Utils.visibleElement($$("//ion-button[#name='button-open-menu']")); }
where the Utils function is:
async visibleElement(elementArray) {
let returnElement;
elementArray.forEach(element => {
if (element.isDisplayed()) {
returnElement = element;
}
});
return returnElement;
}
but no elements are passed into the function. In the chrome browser, I can see two that match the xpath //ion-button[#name='button-open-menu']. I need the one not in the ion-page-hidden block!
tree
The tree looks like this:
app-for-homes[1]/ion-header/ion-toolbar/ion-buttons[1]/ion-button
app-for-homes[2]/ion-header/ion-toolbar/ion-buttons[1]/ion-button
where app-for-homes[2] happens to have the ion-page-hidden class.
I think it should be possible to use ancestors to identify which of the two elements, matching the xpath, does not have a 4th level ancestor with that class? But I'm way out of my depth on day one of working with xpaths...
Quick and Dirty
The desired outcome can be achieved using this Xpath:
//app-for-homes[1]/ion-header/ion-toolbar/ion-buttons/ion-button[#name='button-open-menu']
However, this only works where the order in which the elements appears is known.
Better Answer
When you have exactly 1 element that is not hidden, Xpaths allow you to look at an elements ancestors as far back as you want to identify the presence / or absence of the hidden class. In this case, we start by finding the ancestor app-for-homes which does not include the ion-page-hidden class:
//app-for-homes[not(contains(#class,'ion-page-hidden'))]
and then simply append the remainder of the path to the desired element. Full answer =
//app-for-homes[not(contains(#class,'ion-page-hidden'))]/ion-header/ion-toolbar/ion-buttons/ion-button[#name='button-open-menu']
in my application i have a dropdown which is div object.the dropdown contain names and checkboxes.i need select the checkbox based on name. checkbox dont have any name.just index.can any one suggest how to get chaild items or properties of the objects for div object.
and the second question is i have tree view .which is teleric object.RFT is unable to find the object.it identifying as one all tree view is one object.its not identifying the childs,sub tree items....
so please help me on this two issues.
Hi you can get the checkboxes as follows:
void getCheckBoxes(TestObject parentDiv)
{
TestObject[] checkboxes = parentDiv.find(atDescendant(".class","Html.INPUT.checkbox"));
System.out.println("Found " + checkboxes.length);
//Go through them , and decide which one to select.
for(TestObject checkbox: checkboxes)
{
System.out.println("Checkbox Value: "+ checkbox.getProperty(".value"));
}
}
you can call the above method and pass it the parent DIV object.
About the second question:
You have not mentioed how does RFT recognize the one object for the tree ( means which proxy does it use as per the object map's adminitrative properties for that object).
Usually controls like tree /grid etc are recognized as one control and the items of these controls as "Subitem" which are found by specifying subitem as atPath("xyz->abc") etc.
What is the difference between registry.byId and dom.byId in dojo? What is the advantage of using registry.byId?
In the code below I'm using dijit/registry and dojo/dom for both my textbox (#myTextBox3) and my textbox node (#textNode3). Only two of them are providing results.
require(["dojo/parser", "dojo/dom", "dijit/registry", "dijit/form/TextBox", "dojo/domReady!"],
function(parser, dom, registry) {
parser.parse();
// Locate the JS object.
var dibiWidget = registry.byId("myTextBox3");
var dobiWidget = dom.byId("myTextBox3");
var dibiDOM = registry.byId("textNode3");
var dobiDOM = dom.byId("textNode3");
dom.byId("textNode3").innerHTML = "registry.byId for widget id returned: " + dibiWidget + "<br>" +
"dom.byId for widget id returned: " + dobiWidget + "<br>" +
"registry.byId for dom id returned: " + dibiDOM + "<br>" +
"dom.byId for dom id returned: " + dobiDOM + "<br>";
});
These modules have a different usage. So there is no advantage of using registry.byId() (or dom.byId()) because they differ in use case.
dijit/registry::byId()
The dijit/registry module main use is retrieving widget instances. Quoting the reference guide:
dijit/registry stores a collection of all the dijit widgets within a
page. It is commonly used to retrieve a reference to a widget from a
related piece of data
dojo/dom::byId()
The dojo/dom module on the other hand is just a module to access DOM nodes. Quoting the information of byId() on the reference guide:
This is a simple alias to document.getElementById, which not only is
shorter to write, but fortunately works in all browsers. It turns a
domNode reference to some Node byId, or the same node reference if
passed a domNode.
What does it mean?
The registry.byId() function will return an instance of your widget. This contains setters/getters and other stuff from the widget. This module should only be used to retrieve widgets, you cannot get a DOM node with it.
The dom.byId() function on the other hand will return the matching DOM node. You can only use it to retrieve a DOM node. A widget obviously also contains DOM nodes, but you should never directly access the DOM nodes of a widget because they're part of the internal structure of the widget (and may change).
When accessing a widget, always use registry.byId(). It provides APIs to access most DOM properties anyways.
Your code
So, your code demonstrates the 4 possibilities here. Assuming #myTextBox3 is a widget (for example of type dijit/form/TextBox) and #textNode3 is a DOM node, the following will happen:
dibiWidget will work because #myTextBox3 is a widget. It will return a reference to that widget
dobiWidget will probably work, because there is a DOM node behind every widget with the same ID (not required though). However, like I just explained, it's not recommended to use it.
dibiDom will not work because there is no widget with ID #textNode3. This is just a simple DOM node.
dobiDom will return a reference to the DOM node and will work.
I also made a small JSFiddle to demonstrate this.
dom.byId() is just short for document.getElementById(...). It returns a reference to the dom node.
registry.byId(...) returns a reference to a dojo widget that is contained in dojo's registry.
For example if you have <div id='myDiv'></div>, You can't call registry.byId('myDiv') here because it isn't a dojo widget (thus isn't in the dojo registry). You can call dom.byId('myDiv').
Now if you had <div id='myDiv' data-dojo-type='dijit/layout/ContentPane'></div>, You can call both dom.byId('myDiv') and registry.byId('myDiv'). One gets you the dom node and the other gets you the dojo widget. Both will have different methods available to them but I generally favor registry.byId(...) if there is an overlap.
There isn't an advantage to using one or the other because they are both different things and used for different things.
https://dojotoolkit.org/reference-guide/1.9/dijit/registry.html
http://dojotoolkit.org/reference-guide/1.9/dojo/dom.html
When using Ext.DomHelper.append() method to generate html markup it sometime generate id attribute for the element, how can I prevent that from happen?
One option would be to supply your own ID through the id: config option. Ext.Element needs any DOM element it wraps to have an ID, so it will automatically create one whenever it touches a DOM element that doesn't already have one
Ext.DomHelper.append() returns Ext.Element by default. Ext.Element is wrapper for DOM node and Extjs adds id for corresponding node automaticaly while wrapping.
You can pass false as the third param and then Ext.DomHelper.append() will return DOM node instead of Ext.Element:
Ext.core.DomHelper.append(
Ext.getBody(),
{tag: 'div', html: 'bla'},
false // this is required in order to return DOM node instead of Ext.Element
);
Is there a way in Dojo to find all widget descendants in a DOM element? I used the example below it will only list the children of the element, in this case any widgets that are children of the document object, but not all the descendants or nested widgets. Hopefully that's clear.
var widgets = dijit.findWidgets(dojo.doc);
dojo.forEach(widgets, function(w) {
console.log(w);
});
I could just write my own recursive function but I want to make sure I'm not missing out on a Dojo method which already does this.
Many thanks
Hmm, dijit.findWidgets(parentWidget.domNode) ?
Edit Oh, now I nee findWidgets doesn't search recursively.
I checked the dijit.findWidgets source code and all it does is check for nodes with a widgetid attribute that are represented in the dijit registry. The following version uses dojo.query to do this same search recursively:
function findEvenTheNestedWidgets(innitialNode){
return dojo.query("[widgetid]", innitialNode)
.map(dijit.byNode)
.filter(function(wid){ return wid;}) //filter invalid widget ids that yielded undefined
}