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:umper, which allows
you to dump out the contents of an arbitrary data structure. I'd like
to do the same with javascript.

print Data:umper(document)
print Data:umper(document.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.filecheckbox.value);
}
</script>

<form name="form">
<a href="javascript:download_submit()">
<img src="...." ...>
</a>

<input name="filecheckbox" value="myval" type="checkbox"
onchange="this.form.foldercheckbox.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]

hey all,

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

print Data:umper(document)
print Data:umper(document.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/e...?application=firefox&category=Developer Tools

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="javascript:download_submit()">Show Alert</a>
<input name="filecheckbox" value="myval1" type="checkbox"
onclick="this.value='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.filecheckbox.value);

alert(document.forms.filecheckbox.value);
------------------------------^

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

[...]

<input name="filecheckbox" value="myval" type="checkbox"
onchange="this.form.foldercheckbox.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.foldercheckbox.value = (this.checked)? this.value : '';
">

Thanks much for any help...

No problem.

 

[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.filecheckbox.value);

alert(document.forms.filecheckbox.value);
------------------------------^

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

 

[Matt Kruse]

perl has an extremely nice utility called Data:umper, 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/

 

[Fred Oz]

heh, your prayers are answered

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

Hey Matt, your script makes the claim:

"COMPATABILITY: 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.

 

[Matt Kruse]

"COMPATABILITY: 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!

 

[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.window 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

 

[Fred Oz]

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.com/javascript/datadumper/>

Get error:

Error: uncaught exception: [Exception... "Component returned failure
code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOM3Node.textContent]"
nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame ::
http://www.mattkruse.com/javascript/datadumper/source/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.

 

[J Wynia]

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...

Below is a quick prototype document I did a while back to debug forms.
The example traps the onsubmit event for the form, but you can analyze a
form at any point with the included functions. I frequently want to see
what's going to be submitted to the server before it actually goes,
which is why I wrote it. This file isn't complete (there are properties
of elements fetched, but not dumped out and I don't recall if the
shading for disable elements worked in this file or not), but the real
version is now too tightly integrated into my other code to be of much
use as is. Watch for line wrapping (all of my JS should have semicolon
terminators). At the very least it should give you an idea of how to dig
some of this info out yourself.

-------------------------------------
J Wynia
Myriad Intellect, Inc.
"Web technology that earns its keep."
www.myriadintellect.com
-------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Form Dump </title>
<script language="JavaScript">
<!--
function form_dump($form_name){
$form = document.forms[$form_name];
var newwin =
window.open("","formdumpwin","menubar,scrollbars,resizable,width=600,height=400");
newwin.document.write("Form name: " + $form.name + "<br>");
newwin.document.write("Action: " + $form.action + "<br>");
newwin.document.write("Method: " + $form.method + "<br>");
newwin.document.write("Target: " + $form.target + "<br>");
newwin.document.write("Onreset: " + $form.onReset + "<br>");
newwin.document.write("Onsubmit: " + $form.onSubmit + "<p><hr>");

newwin.document.write("Parameters: <br>");

for(var i=0;i<$form.elements.length; i++){
//Element information and general attributes
$element = $form.elements;
$type = $element.type;
$checked = $element.checked;
$defaultchecked = $element.defaultChecked;
$disabled = $element.disabled;
$defaultvalue = $element.defaultValue;
$belongsto = $element.form;
$name = $element.name;
$value = $element.value;
$selectedindex = $element.selectedIndex;
$length = $element.length;


//Event binders
$onclick= $element.onclick;
$onmouseover = $element.onmouseover;
if($disabled == "true"){
newwin.document.write("<div style='color: grey'>");
}
newwin.document.write("Parameter name: " + $form.elements.name +
"<br>");
newwin.document.write("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Type: " + $type +
"<br>");
newwin.document.write("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Current Value: "
+ $value + "<br>");
newwin.document.write("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Checked: " +
$checked + "<br>");
newwin.document.write("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Checked by
default: " + $defaultchecked + "<br>");
newwin.document.write("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Disabled: " +
$disabled + "<br>");
newwin.document.write("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SelectedIndex: "
+ $selectedindex + "<br>");
newwin.document.write("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Length: " +
$length + "<br>");
if($disabled == "true"){
newwin.document.write("</div>");
}

}



newwin.document.close();
}

function choose_form_dump(){
var newwin =
window.open("","chooseformdump","menubar,scrollbars,resizable,width=600,height=400");
newwin.document.write("<b>Available forms:</b> Choose a form to see its
current state<p>");
for(var i=0;i<document.forms.length; i++){
newwin.document.write("<a href='#' onclick=\"self.opener.form_dump('"+
document.forms.name + "');\">" + document.forms.name + "</a><br>");

}
}

//-->
</script>
</head>

<body>
<form action="http://localhost/util/formdump.php" name="testform"
method="post" onsubmit="choose_form_dump();return false;">
<input type="text" name="test" value="whatever">
<input type="text" name="hideme" value="invisible" disabled>
<input type="submit" name="submit">
</form>
</body>
</html>

 

[Matt Kruse]

Error: uncaught exception: [Exception... "Component returned failure
code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOM3Node.textContent]"
nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame ::
http://www.mattkruse.com/javascript/datadumper/source/datadumper.js ::
Dumper :: line 186" data: no]

Well I got a chance to test using Safari on a mac and I narrowed it down to
this line:

if (o==window || o==window.document)

Apparently, it doesn't like to compare strings to the window object. This
simple test case fails:

var x = "test";
alert(x==window);

That shouldn't fail with an error, should it?

Comparing an <OPTION> object to the window object crashes the browser
completely.

Unless someone can justify why a browser should generate an error when
comparing an arbitrary object to the window object, I'll consider it a bug
in Mac browsers and ignore it

 

[Richard Cornford]

Matt Kruse wrote:

Well I got a chance to test using Safari on a mac and I
narrowed it down to this line:

if (o==window || o==window.document)

Apparently, it doesn't like to compare strings to the
window object. This simple test case fails:

var x = "test";
alert(x==window);

That shouldn't fail with an error, should it?

Yes it may throw an exception. The test - x == window -, where x is a
string, is evaluated as the equivalent of - x == ToPrimitive(window) -,
and the internal ToPrimative function calls the object's
[[DefalutValue]] method, which is required to throw an exception when
the object does not implement either - toString - or - valueOf. So
probably the window object does not support these two methods. As the
ECMAScript global object the window is not required to implement (or
inherit) either method.

Comparing an <OPTION> object to the window object
crashes the browser completely.

A crash would be a bug.

Unless someone can justify why a browser should generate
an error when comparing an arbitrary object to the window
object,

It is comparing a string with the window object that is throwing
exceptions, and that is allowed.

I'll consider it a bug in Mac browsers and ignore
it

Why wasn't I surprised to read that? We should all be familiar with your
approach to problem solving by now.

Richard.

 

[Matt Kruse]

Yes it may throw an exception. The test - x == window -, where x is a
string, is evaluated as the equivalent of - x == ToPrimitive(window)
-, and the internal ToPrimative function calls the object's
[[DefalutValue]] method, which is required to throw an exception when
the object does not implement either - toString - or - valueOf.

So how would you suggest testing whether an object is the window object,
without knowing anything about the object?

I tried
if (typeof(o)=="object" && (o==window || o==window.document)

And that crashed the browser as well.

Why wasn't I surprised to read that? We should all be familiar with
your approach to problem solving by now.

Oh, blow it out your ass, Richard. You and John Stockton can go have an Anal
Retentive Asshole party for all I care.

My statement was perfectly valid... _UNLESS SOMEONE CAN JUSTIFY WHY A
BROWSER SHOULD GENERATE AN ERROR_ then I'll consider it a bug. I don't just
blindly treat things as browser bugs and ignore them.

I've never seen such behavior in any other browsers, and Mac browsers are
notoriously bad (IMO) so when an error only occurs on mac browsers, I have
to question whether it's a browser quirk.

 

[Thomas 'PointedEars' Lahn]

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

print Data:umper(document)
print Data:umper(document.form)

etc. etc. etc.

Is there a utility that lets you do this?
Yes.

Also, is there any particular reason why a function wouldn't be able to
see a certain variable?

You are talking about object properties, not plain variables:

I'm calling javascript with the form:

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

<form name="form">

That `form' element lacks an `action' attribute to be Valid HTML.

<a href="javascript:download_submit()">
<img src="...." ...>
</a>

You should refrain from submitting forms only by means of client-side
scripting, and you should definitely refrain from using proprietary
`javascript:' URIs in favor of well-standardized event handlers. It
is also recommended not to put whitespace after the start tag and/or
before the end tag of the `a' element, see the latest HTML 4 Specification.

<input name="filecheckbox" value="myval" type="checkbox"
onchange="this.form.foldercheckbox.value=this.value"
</form>

For some reason, when I check the checkbox, I don't see the results in
the javascript.

I do not see a control named `foldercheckbox' within your form (which could
be one of the reasons why this fails; it should yield a script error then,
possibly not displayed by default), but I do see proprietary references in
your code. In case there is a form control with that name, use

this.form.elements['foldercheckbox'].value = this.value;

and in your function use

document.forms['form'].elements['foldercheckbox'].value

or rather use an `input' element and pass a reference on `submit' event:

function download_submit(f)
{
... f.elements['foldercheckbox'].value ...
// return true to submit, false to cancel submit
}

<form action="..." onsubmit="return download_submit(this);">
...
<input type="checkbox" name="filecheckbox" value="myval"
onclick="this.form.elements['foldercheckbox'].value
= this.value;">
...
<input type="submit" ...>
<!-- or, with images -->
<input type="image" src="..." alt="..." ...>
</form>

This allows the form to be submitted even if client-side script support is
not available.

Keep in mind that

,-<http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents-h3>
| [...]
| The change event occurs when a control loses the input focus
| and its value has been modified since gaining focus.

and that `value' does not specify the state of a checkbox but `checked'
does.

I'd like to dump out the document to see exactly *what*
the javascript function is seeing...

You may want to try my ObjectInspector embedded in a frame or an iframe:

<http://pointedears.de/objinsp>

(with parent.frames[...].document or parent.document) or getObjInfo() from

<http://pointedears.de/scripts/test/debug.js>

The latter does not (yet?) provide automated recursive retrieval, though.


HTH

PointedEars