DOMNodeInserted properties...?

23 July, 2008 - 18:13 — casramsey

Hi,

When a user types into my suggestBox, I want to find the nodes that have been inserted so I can add a class to some of them in the view. I am trying to do this by capturing the event with DOMNodeInserted. This seems to be the right thing to do as, when typing, an alert will fire twice for every suggestion that appears in the suggestBox. I think it fires twice for each because a node is inserted and then a node is inserted with the text between teh ...so far, so good. However, I now want to see what the actual node is that is being inserted, but I can't seem to get that by looking at the properties of the event. I have tried this with all sorts of properties of the DOMNodeInserted event - target gives me back [object][object] in my alert box, but just about anything else gives me undefined where I would think it would give me (e.g) the text content in the case below, or name, or value accordingly, etc, but all I ever get is undefined. Am I looking at this the wrong way?

Thanks very much for your help.
Cas

This is the code I'm using within my suggestBox...

<e:handler event="DOMNodeInserted" type="application/xml">

<c:alert select="$event/property::target/property::textContent" />

</e:handler>

I know what you mean about

23 July, 2008 - 19:15 — tordona

I know what you mean about the duplicate event, I can't help with that... sorry.

However, I'm pretty sure that you want to look at the option property of the suggestBox. Not sure what the Xpath would be, but in javascript would be something like:

<e:handler event="DOMNodeInserted" type="text/javascript">

alert(this.getProperty('options')[this.getProperty('options').length - 1].viewNode.firstChild.firstChild.nodeValue);

</e:handler>

hope that helps some.

Firebug

23 July, 2008 - 23:44 — nbever

Hi Cas,

I had this same problem for a long time doing web development and I found that the easiest way to investigate objects of any sort, especially event objects, was to use Firebug and dynamically debug javascript calls.

Here's what I would recommend that would give you all your answers and more:

1. Download and install the Mozilla Firefox browser (even if your app only needs to run on IE because MS debuggers are a pain to set up... this will get you pretty close!)

2. Download and install the Firefox plugin called Firebug

3. Include a javascript file in your page and write a function in it like:

function testing( event )

{

  var i = 0;

}

4. Edit your handler to look like this:

<e:handler event="DOMNodeInserted" type="text/javascript"><![CDATA[

  testing( event );

]]>

</e:handler>

This should throw the event you want to decompose into your global javascript file meaning that Firebug will now allow you to "browse" the object and look at all its properties.

5. Using Firefox log into your webapp and go into tools->Firebug->open firebug

This will pop open a window in the bottom portion of your screen with a bunch of view and buttons.

6. Click the button in Firebug labelled "script"

7. In the area just above where the "script" button is there should now be a drop down option where you can select any script included in your page. Find the script containing the above function and select it.

8. The script contents should fill the left hand view of Firebug, find the line that says var i = 0 and click in the margin directly to the left of it. A big dark red dot should now appear next to you code. You've just set a break point in your application so when it gets to this point the browser will stop and let you view any variables that are in scope including the event variable.

9. Do something that triggers the event that you're looking for and watch the bottom of your screen. When it hits your break point you'll see a big yellow arrow over your breakpoint and the right hand view will fill with all the variables and objects available to you. Use this like a tree and drill down into your event object to find out what's inside.

Ultimately this approach still means you have to tweek with your XPath to get what you want... or... you may find all you need is javascript that looks like: alert( event.target.firstChild.textContent );

In any case, it will at least let you know what's in there and what's not.

I also apologize if this is way to simplified of an explanation, but I think people newer to web development may find it useful.

Best of luck,
-Nate

Thanks!

28 July, 2008 - 14:47 — casramsey

Hi Guys,

Thanks very much for your help with this.

Tordona - that code worked a treat and I even understand it as well, so thanks kindly!

Nate - I do use firebug, but I could never get breakpoints to work - I can now...thanks very much indeed!

Cheers
Cas

Client Framework