javascript equivalent of 'data dumper'

[horos]

hey all,

I'm a heavy perl user, not so much a java script user, and was
wondering...

perl has an extremely nice utility called Data::Dumper, which allows
you to dump out the contents of an arbitrary data structure. I'd like
to do the same with javascript.

print Data::Dumper(do cument)
print Data::Dumper(do cument.form)

etc. etc. etc.

Is there a utility that lets you do this?

Also, is there any particular reason why a function wouldn't be able to
see a certain variable? I'm calling javascript with the form:

<script type="text/javascript" >
function download_submit ()
{
alert(document. form.filecheckb ox.value);
}
</script>

<form name="form">
<a href="javascrip t:download_subm it()">
<img src="...." ...>
</a>

<input name="filecheck box" value="myval" type="checkbox"
onchange="this. form.folderchec kbox.value=this .value"

</form>

For some reason, when I check the checkbox, I don't see the results in
the javascript. I'd like to dump out the document to see exactly *what*
the javascript function is seeing...

Thanks much for any help...

Ed

[Brian Munroe]

horos wrote:

hey all,

I'm a heavy perl user, not so much a java script user, and was
wondering...

print Data::Dumper(do cument)
print Data::Dumper(do cument.form)

I have never seen anything like this. But if you are using the Mozilla
browser suite there are a ton of plugins for web development, including
DOM inspectors, javascript debuggers, CSS tools, etc. I am thinking
that maybe the DOM inspector would let you do what you are trying to
do.

https://addons.update.mozilla.org/ex...eloper%20Tools

For some reason, when I check the checkbox, I don't see the results in the javascript. I'd like to dump out the document to see exactly *what* the javascript function is seeing...

Well, in your example, when you check the checkbox, the value of
filecheckbox was being re-assigned the value of "myval1", which was the
initial value of filecheckbox, so is this why you weren't seeing a
change, maybe?

I shortened your onclick code a little bit and hard coded a value of
hello, but it works fine for me.

<a href="javascrip t:download_subm it()">Show Alert</a>
<input name="filecheck box" value="myval1" type="checkbox"
onclick="this.v alue='hello'">

I've omitted the javascript function for simplicitly sake, but if you
click the hyperlink "Show Alert" it alerts with "myval1", but if I
check the checkbox and click "Show Alert" it alerts with "hello"

-- brian

[horos]

yes, I changed onchange to onclick, and it worked... Thanks.

As far as the Dumper item goes, I tried DOM inspectors, and they seem
to work great on the HTML side of the fence, but not on the JavaScript
side. They parse the HTML to come up with the tags, but don't do the
heavy lifting of finding out what javascript interpreter a given
browser is using and then going in to find its attributes and their
values.

A pity, really, because this would speed up my development by at least
an order of magnitude, if not more. If anyone knows of something like
this, I'd love to hear about it.

Cheers,

Ed

[RobG]

horos wrote:
[...]

Also, is there any particular reason why a function wouldn't be able to
see a certain variable? I'm calling javascript with the form:

<script type="text/javascript" >
function download_submit ()
{
alert(document. form.filecheckb ox.value);
alert(document. forms.filecheck box.value);
------------------------------^

Simple syntax error, you are addressing the *forms* collection.

[...] <input name="filecheck box" value="myval" type="checkbox"
onchange="this. form.folderchec kbox.value=this .value"

> </form>

For some reason, when I check the checkbox, I don't see the results in
the javascript. I'd like to dump out the document to see exactly *what*
the javascript function is seeing...

Onchange is kinda nasty with a checkbox. According to the HTML spec,
onchange fires when the element loses focus. But this doesn't really
make sense with a checkbox, so Geko browsers fire the onchange
essentially as an onclick. IE, on the other hand, follows the spec
and fires the onchange when the checkbox loses focus.

This is very confusing as if you have say 3 checkboxes with different
onchange events, when you click one nothing happens, when you click
the next one the onchange from the first on you clicked fires, when
you click somewhere else in the page, the second one fires. The user
associates the event with the following click, not the one that
actually causes the event to happen, hence confusion.

The solution is to use onclick and check the state of the checkbox to
see if it's checked or not, then run the event or not. Something
like:

<input ... type="checkbox" onclick="
this.form.folde rcheckbox.value = (this.checked)? this.value : '';
">

Thanks much for any help...

No problem.
--
Rob

[RobG]

RobG wrote:

horos wrote:
[...]

Also, is there any particular reason why a function wouldn't be able to
see a certain variable? I'm calling javascript with the form:

<script type="text/javascript" >
function download_submit ()
{
alert(document. form.filecheckb ox.value);

alert(document. forms.filecheck box.value);
------------------------------^

Simple idiot error: I didn't notice you'd called your form 'form'.
Forget the above.

--
Rob

[Matt Kruse]

horos wrote:

perl has an extremely nice utility called Data::Dumper, which allows
you to dump out the contents of an arbitrary data structure. I'd like
to do the same with javascript.

heh, your prayers are answered :)

http://www.mattkruse.com/javascript/datadumper/

--
Matt Kruse
http://www.JavascriptToolbox.com

[Fred Oz]

Matt Kruse wrote:

horos wrote:

perl has an extremely nice utility called Data::Dumper, which allows
you to dump out the contents of an arbitrary data structure. I'd like
to do the same with javascript.

heh, your prayers are answered :)

http://www.mattkruse.com/javascript/datadumper/

Hey Matt, your script makes the claim:

"COMPATABIL ITY: Will work in any javascript-enabled browser "

but the example doesn't work in either Safari or Firefox on
OS X 10.2.8.

Over to you.

--
Fred

[Michael Winter]

horos wrote:

[snip]

As far as the Dumper item goes, I tried DOM inspectors, and they seem
to work great on the HTML side of the fence, but not on the JavaScript
side. They parse the HTML to come up with the tags, but don't do the
heavy lifting of finding out what javascript interpreter a given
browser is using and then going in to find its attributes and their
values.

Are you certain? By default, the DOM inspector displays information
about elements and their attributes. However, it can show other
information, which can be very useful.

To the left of the pane title is a button-activated pop-up menu that
lists the other views for that pane. Note that changing the left-hand
pane will cause the node list for the document tree to disappear. To get
the list back, select the appropriate menu item from the File > Inspect
a Window sub-menu.

As far as I know, the only way to inspect the global object (aka window)
is through the defaultView.win dow property when inspecting the document
(#document) object.

Finally, using the alert function, or a temporary TEXTAREA element, is a
good way of examining the environment, provided you know what you're
looking for. I certainly think it's better than a generic dump.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[Matt Kruse]

Fred Oz wrote:

"COMPATABIL ITY: Will work in any javascript-enabled browser "
but the example doesn't work in either Safari or Firefox on
OS X 10.2.8.

Hmmm, can you give me any details? I don't have the ability to test on macs,
but the code doesn't do anything special, so I'm not sure why it wouldn't
work on those browsers. If you can give me an error message or line number
or any insight into what the problem is, I can try to fix it.
Thanks!

--
Matt Kruse
http://www.JavascriptToolbox.com

[Fred Oz]

Matt Kruse wrote:

Fred Oz wrote:

"COMPATABIL ITY: Will work in any javascript-enabled browser "
but the example doesn't work in either Safari or Firefox on
OS X 10.2.8.

Hmmm, can you give me any details? I don't have the ability to test on macs,
but the code doesn't do anything special, so I'm not sure why it wouldn't
work on those browsers. If you can give me an error message or line number
or any insight into what the problem is, I can try to fix it.
Thanks!

Using Firefox (since its error reporting is somewhat superior to
Safari's...) when loading:

<URL:http://www.mattkruse.c om/javascript/datadumper/>

Get error:

Error: uncaught exception: [Exception... "Component returned failure
code: 0x80004005 (NS_ERROR_FAILU RE) [nsIDOM3Node.tex tContent]"
nsresult: "0x80004005 (NS_ERROR_FAILU RE)" location: "JS frame ::
http://www.mattkruse.com/javascript/.../datadumper.js ::
Dumper :: line 186" data: no]
Clicking on the "Alert the structure" link gives the same error,
clicking on "Popup a window with the output" give the same error. A
new window does appear, but I just get the wait cursor. The grey
"results in this" section is just blank.

I got the same result in Camino (no real surprise), but it seems to
work OK in IE 5.2 and Opera 6.0 (which won't even load my favourite
news site 'cos of JS errors) so you must be doing something right.
:-)

I'll poke around a bit tomorrow to see what's going on. Time for
sleep.

--
Fred