I have created an extension to show a sidebar in firefox.
Now i need to display a tree like structure where the third level will be dynamic and loads a particular link on clicking.
I know how to create the three level hierarchy but with static data.. heres the code
<treechildren>
<treeitem container="true" open="true">
<treerow>
<treecell label="Guys"/>
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell id="cell-of-treeitem1" label="Bob" onclick="alert('bob')"/>
</treerow>
</treeitem>
<treeitem>
<treerow>
<treecell label="Jerry"/>
</treerow>
</treeitem>
</treechildren>
</treeitem>
</treechildren>
The onclick does not showup anything
1)How can i implement the link functionality.. as in a link to be opened on clicking a treecell element? The "onclick" attribute doesnot work. Also and can i run javascript functions on clicking of the individual items.
2) How can i have a dynamic list displayed. suppose i have a JS function that reurns a list, how can i show it here as tree elements (basically then the js should run everytime i expand the tree parent to see the children)
First, place the onclick event handler on the tree itself, not on the elements. When the user clicks on a cell, because of the event bubbling, the tree will catch it, no matter which cell receives the click:
function clickedOnSomething(event) {
if(event.originalTarget.localName == "treechildren") {
//do something here based on who is event.originalTarget
}
}
Second, to create the content dynamically, you create an empty tree in XUL:
<tree id="myTree" onclick="clickedOnSomething(event)" flex="1" seltype="single">
<treecols>
<treecol id="myCol" label="Stuff" primary="true" flex="1" />
</treecols>
<treechildren/>
</tree>
Then in JavaScript, you create an object that implements the nsITreeView interface (see link below), and assign it as the view of the tree you created in XUL.
This object will serve as a interface for the Tree widget to the data will allow the tree to update itself automatically if the data changes.
You can find more information about custom tree views here: https://developer.mozilla.org/en/XUL_Tutorial/Custom_Tree_Views
Related
As part of automation testing, we want to inspect the element in a website which is made of using the Zebkit UI framework.
We are unable to find the element using zebra.ui
examples can be found here
Can someone help us on inspecting the element
Zebkit UI components are rendered on HTML5 Canvas. So they are not part of browser DOM tree what can be a problem for a test tool that expects DOM as an input. But it doesn't mean you cannot go over zebkit UI stuff to perform test cases.
First of all keep in mind zebkit components are a hierarchy/tree like DOM is. Every rendered on a canvas zebkit UI component has a related JS instance of appropriate class. There are number of API methods you can use to travel over UI components tree. These methods expect path (XPath-like) since path (from my point of view) is less "encrypted" way than CSS selector.
The API methods you probably need:
byPath(path [,callback]) - traversing UI components tree by the given path
var zcanvas = new zebkit.ui.zCanvas();
...
// travel over all UI components in tree
zcanvas.byPath("//*", function(comp) {
// perform test cases here
...
});
properties([path,] properties) applies the specified properties set to component or number of components requested by the given path
var zcanvas = new zebkit.ui.zCanvas();
...
// set color property to black value for all labels
zcanvas.properties("//zebkit.ui.Label", { color: "black" });
on([eventName], [path], handler) add listener method(s) for the given event (or all events) of the given component or components identified with the path:
var zcanvas = new zebkit.ui.zCanvas();
...
// register event listener for all found buttons
zcanvas.on("//zebkit.ui.Button", function (src) {
// handle button press event here
...
});
fire([eventName,] [path,] [argument]) fire the given event to the given component or to components identified with the path:
var zcanvas = new zebkit.ui.zCanvas();
...
// fire button pressed event to button with id equals "testButton"
zcanvas.fire("//[#id='testButton']");
...
// or the same with a shortcut
zcanvas.fire("#testButton");
I'm not sure I understand correctly your issue, but assume you cannot click right button on canvas to open context menu and select "Inspect element" option.
You can
press F12 in browser
switch to "Elements"/"HTML" tab
in search field (CTRL + F) print "canvas"/"<canvas" and press Enter
Continue pressing Enter until required canvas found (current element should be highlighted)
These controls are implemented using an HTML5 CANVAS tag. Selenium cannot see "inside" this tag because it doesn't contain HTML. It's like an app inside the page. From the page you linked, it looks like you should be able to use JS to access elements inside the control. When I've done things with CANVAS tags in the past, I generally find JS that does or returns what I want and then wrap that code in a function that I can call. It will work but you will likely have to do some research on Zebkit to find out what JS you will need to validate, etc. all the different things you will want to validate... and it may end up that you won't be able to validate some things.
I'm new to D3 and javascript. I have found a tree layout that suits my needs and now I'm trying to make it display information dynamically. This is the jsfiddle for the tree.
Right now, when you click on a node, a hyperlink is displayed on top of the tree. The problem is that this is just a text string and not a clickable hyperlink.
I know that this is related to my code not actually telling D3 to display this as a hyperlink:
function click(d) {
d3.select("#link").text(d.url);
update(d);
}
I've tried to make it work using the javascript link() method, but wasn't very successful (the debugger said: link() method not found). How can I turn the text string into a clickable link?
Add a <a> tag to the <div> displaying your link:
<div>
<a id="#link"></a>
</div>
Then, you can update the link tag, like this:
d3.select("#link")
.attr("href", d.url)
.text(d.url);
I'm a total newbie to Onsen UI and I managed to make my first little app (static that is) with a few pages, popovers, lists, etc.
But when I try to add dynamic stuff in there, it does not want to cooperate.
When I click my side menu, it calls menu.setMainPage and in the callback I want to modify the content of the list (lets say iterate a JSON request and add a ons-list-item for each of them). However, they do not look styled with Onsen UI icing.
I guess it's because the menu.setMainPage has already parsed the ons-page and showed it in the browser.
Is there a way to do a load page, update the dom, and then pass it to be displayed?
I have a simila problem with an popover that contains a list. I want to add items in that list, but my jQuery append never work. Same reason I suppose.
Thanks!
Sounds like you're not running ons.compile() on the dynamic elements. The custom elements must be compiled after they've been added to the DOM to get the correct style and behavior.
I made a short example to illustrate it:
ons.bootstrap();
var addItem = function() {
var $myList = $("#my-list"),
$item = $("<ons-list-item>").text(Math.random());
$myList.append($item[0]);
ons.compile($item[0]);
};
If you attach the addItem function to a click handler you can add items dynamically to an <ons-list>.
This is a running example on codepen:
http://codepen.io/argelius/pen/gbxNEg
I'm working on a project and I am attempting to create a modal dialog "pop-up" to capture data in a form. I haven't worked with jQuery UI's Dialog widget previously, but I've worked with others and it seemed straight forward.
I created the following very simple code snippet to test as I went along:
<div class="app-email">
<div>
<a href="#"
class="app-email-opener">
Click to add or edit your e-mail settings.
</a>
</div>
<div class="app-email-modal">
Oh, Hai.
</div>
</div>
$('.content').on({
click: function () {
console.log('I was totes clicked.');
var parent = $(this).parents('.app-email');
console.log(parent);
var target = parent.find('.app-email-modal');
console.log(target);
$(target).dialog('open');
}
}, '.app-email-opener');
$('.app-email-modal').dialog({
autoOpen: false,
modal: true,
show: false
});
For reference: the class 'content' is a higher level block to catch delegated events without having to go all the way up the DOM.
The issue I'm running into is that the div with class="app-email-modal" seems to flash onto the page and then disappear from the DOM completely. jQuery, therefore, isn't able to find it and do anything because at that point it simply doesn't exist.
The overall project is in ASP.NET MVC 4, using Visual Studio 2013.
Any information would be greatly appreciated.
So, finally discovered what's happening via this previously answered question:
Jquery Dialog - div disappears after initialization
//EDIT
For any possible future usefuless -
What was happening was that jQuery UI will move any DOM elements specified as Dialogs to the bottom of the page, rather than keep them in the location specified in the HTML markup. So, in my case, I was looking for things by class, but only within the scope of the app-email-openers parent app-email div.
To remedy this, I used templating (in my case, Razor) to add unique ids to each app-email-modal div, and added a data- attribute to associate the link with the specific unique id. This way they jQuery UI can move the elements as it sees fit, but there still easily accessible.
//END EDIT
I feel like that functionality should be better spelled out in the documentation. Even their own example doesn't operate like this.
Corollary: I attempted to use the appendTo option to have the DOM elements not be shifted to the bottom of the page, but they're still moved to the bottom. So, there's that.
here's the part where i need help in my CGridView of Yii framework web app
array(
'class'=>'CLinkColumn',
'linkHtmlOptions'=>array("onclick"=>"$('.fancybox').fancybox()"),
'header'=>'Image',
),
currently, when i view that at the front-end, it shows "Link" as a hyperlink..
what i want to happen is, it will show a clickable image icon like e.g /images/click_icon.jpg instead of an ordinary word hyperlink, then once it is clicked, it should call this
$(".fancybox").fancybox();
so how to do that in that array i pasted above ?
You can use imageUrl property of CLinkColumn:
array(
'class'=>'CLinkColumn',
'linkHtmlOptions'=>array("onclick"=>"$('.fancybox').fancybox()"),
'header'=>'Image',
'imageUrl'=>Yii::app()->baseUrl.'/images/click_icon.jpg'
),
Wherever you store the images, that url will have to be provided, for the above example, images are in the project root, hence i used Yii::app()->baseUrl.
When you write
'linkHtmlOptions'=> array("onclick"=>"$('.fancybox').fancybox()"),
what you are actually doing is triggering the initialization of all the matched elements by the class selector '.fancybox', on the 'click' event. Although you are doing the initialization, you are not leting fancybox manage the elements' onclick event in the proper way.
You should have
'linkHtmlOptions'=> array("onclick"=>"$('.fancybox').click()"),
and, as the instructions at the fancybox site show, put the fancybox initialization in the document.ready event. But if you insist to initialize the fancybox object in the grid, you should write
'linkHtmlOptions'=> array("onclick"=>"$('.fancybox').fancybox(); $('.fancybox').click()"),
But you may need to wait in between these two calls, would have to test it...
By the way, you are repeating the same link over and over again for every cell in the grid column. Does it make any sense? I would put the link outside the grid.