Need Javascript Tree Help: Clicking on the plus/minus icons to expand

[andy thai]

Hi,

I have a javascript tree problem where I need to search for a
particular node. To do this I need to expand each branch in order to
see the contents under the node clicked.

The problem I am having is that the plus and minus icons aren't images
like in the example provided in "http://wiki.openqa.org/display/WTR/
JavaScript".

An example of the html is:

<div class="myTree" style="border: none;">
<div id="233" class="asyncNavTree jstree jstree-0 jstree-focused
jstree-default" style="">
<li id="233_1238" class="jstree-closed">
<ins class="jstree-icon">&nbsp;</ins>
<a class="treeNodeLink sectionPopupInit" title="node1">
</li>
<li id="233_1455" class="jstree-closed">
<ins class="jstree-icon">&nbsp;</ins>
<a class="treeNodeLink sectionPopupInit" title="node2">
</li>
<li id="233_5416" class="jstree-open">
<ins class="jstree-icon">&nbsp;</ins>
<a class="treeNodeLink selectedTreeNode sectionPopupInit jstree-
clicked" title="node3">
</li>
<li id="401_1685" class="jstree-closed">
<ins class="jstree-icon">&nbsp;</ins>
<a class="treeNodeLink sectionPopupInit" title="node4">
</li>

From using FireBug, the icon I want to click directs me to the line
<ins class="jstree-icon">&nbsp;</ins>

I attempted to extend watir to support this,
module Watir
class Ins < NonControlElement
TAG = 'INS'
end
end

which allows me to navigate through the tree like I want using
indexes, but when I attempt to use
browser.ins(:class, "jstree-icon").click
the button flashes, but does not expand...

The weird thing about this is I had it working the first time I tried
it.... I wonder why it stopped working...

Can anyone help me?

A summary of the above:
- I want to click the jstree icons to expand
- icons aren't images like the faq page
- I am able to iterate through the icons by extending watir
- .click method on my ins tag does not work?

Thanks for reading

[Željko Filipin]

On Fri, Aug 5, 2011 at 8:45 PM, andy thai <a28...@gmail.com> wrote:
> - .click method on my ins tag does not work?

You probably need to fire some JavaScript event.

Example:

browser.element(how, what).fire_event("onclick")

To see which events get fired when you click the element manually, see this:

http://stackoverflow.com/questions/3787555/how-to-find-out-which-javascript-events-fired

Željko
--
watir.com - community manager
watir.com/book - author
watirpodcast.com - host

[andy thai]

Interesting, it doesn't seem to be a JavaScript event that gets fired,
the result of logging the events tell me that clicking the icon
results in something like:
GET http://foo/getChildren.form?generatednumber=xyz

Is there a way to use this link to expand the tree?

On a side note, I must say that the use of FireBug to figure out the
events fired was helpful, I'll have to remember that for future use,
thanks.

On Aug 5, 4:01 pm, Željko Filipin <zeljko.fili...@wa-research.ch>
wrote:

> On Fri, Aug 5, 2011 at 8:45 PM, andy thai <a28t...@gmail.com> wrote:
> > - .click method on my ins tag does not work?
>
> You probably need to fire some JavaScript event.
>
> Example:
>
> browser.element(how, what).fire_event("onclick")
>
> To see which events get fired when you click the element manually, see this:
>

> http://stackoverflow.com/questions/3787555/how-to-find-out-which-java...

[Chuck van der Linden]

Within each list item container, I see the ins element and also a link
(<a>) element. I suspect they are perhaps superimposed.

Have you tried clicking on the link elements?

(doing it by title looks like it would be ideal, but that's not
supported by default so you will probably have to use class, or
specify the list item if the ID values are at all predictable, and
then click the link inside it.

browser.li(:id, '233_1455').link(:index, 1).click #index would be 0
for watir-webdriver or watir2.0

[Chuck van der Linden]

stike that, I think I found an example of the tree control you are
using,

http://www.jstree.com/demo

If this is your baby, then the link that follows the icon is other
stuff on the same line, clicking that isn't likely to help you. it
looks like you need to find a way to click the ins element (which is
really just a text formatting tag that you'd normally never interact
with)

This Jquery stuff amazes me, in that little area there really isn't an
icon. What's there is a non-blank-white-space (basically a space
character) with a background image. The background image itself has a
bunch of icons in it, and they control which one you see by setting an
'offset'. Basically it's like they have a one character 'window' over
the background, and they slide the background around under the window
to show you the individual little 'icon'.

Clicking that spot, renders new tree stuff, and changes the class of
the LI container which shifts the offset of the background image so
you see a different arrow. It's largely powered by CSS, which is
reacting to the class on the LI container element and INS tag inside
that list item. There's a ton of javascript also that switches the
classes around etc depending on what's there (closed or open
(branches) leaf and last leaf) and updates the DOM on the fly and then
CSS renders according to the classes..

I think this is the first time I've seen something setup to actually
react to clicking on a ins tag.

(if it happened more often Watir would no doubt already support it as
a stock element type)

[andy thai]

That is indeed the same jstree I am working with!

That was a very detailed response that you gave, I like how you
explained everything so clearly.

But yes, clicking the link next to the icon won't help me, and the
only way I can think of to interact with the icon is through the INS
tags. I'm able to locate the right icon by extending Watir to accept
INS tags (see original post) I'm not able to get the .click method to
work on the ins tags... Is there something I missed when adding INS to
watir?

> > > Thanks for reading- Hide quoted text -
>
> - Show quoted text -

[andy thai]

Very interesting.... I was playing around with the jstree some more,
but when I iterate through the INS tags and click each one, it appears
to click some of them but not all of them...

Let's say I have 12 nodes, and I iterate through them and click each
icon, it appears that the last 3 nodes are expanded properly... then
when I refresh, and run the script again... the last 6 nodes are
expanded properly... and if I do it once more... the last 4 are
expanded....

There doesn't seem to be anything in the html that differs the
icons...

The code I am using is as follows:
$browser.ins(:class => "jstree-icon", :index => i).click
where i is incremented in a loop to click each element....

> > - Show quoted text -- Hide quoted text -

[Chuck van der Linden]

is it possible the script is just going too fast for the client side
javascript to keep up?

does it work if you click the links via running the applicable script
step 'manually' via IRB?

Maybe put a one second sleep in your loop and see if that makes a
difference?