javascript equivalent of 'data dumper'

Discussion in 'Javascript' started by horos, Apr 26, 2005.

  1. horos

    horos Guest

    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(document)
    print Data::Dumper(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
     
    horos, Apr 26, 2005
    #1
    1. Advertising

  2. horos

    Brian Munroe Guest

    horos wrote:
    > hey all,
    >
    > I'm a heavy perl user, not so much a java script user, and was
    > wondering...
    >
    > print Data::Dumper(document)
    > print Data::Dumper(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
     
    Brian Munroe, Apr 27, 2005
    #2
    1. Advertising

  3. horos

    horos Guest

    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
     
    horos, Apr 27, 2005
    #3
  4. horos

    RobG Guest

    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.


    --
    Rob
     
    RobG, Apr 27, 2005
    #4
  5. horos

    RobG Guest

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

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


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



    --
    Rob
     
    RobG, Apr 27, 2005
    #5
  6. horos

    Matt Kruse Guest

    Matt Kruse, Apr 27, 2005
    #6
  7. horos

    Fred Oz Guest

    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:

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

    --
    Fred
     
    Fred Oz, Apr 27, 2005
    #7
  8. horos

    Matt Kruse Guest

    Fred Oz wrote:
    > "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!

    --
    Matt Kruse
    http://www.JavascriptToolbox.com
     
    Matt Kruse, Apr 27, 2005
    #8
  9. 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

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
     
    Michael Winter, Apr 27, 2005
    #9
  10. horos

    Fred Oz Guest

    Matt Kruse wrote:
    > Fred Oz wrote:
    >
    >> "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!
    >



    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.

    --
    Fred
     
    Fred Oz, Apr 27, 2005
    #10
  11. horos

    J Wynia Guest

    horos wrote:
    >
    > 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>
     
    J Wynia, Apr 27, 2005
    #11
  12. horos

    Matt Kruse Guest

    Fred Oz wrote:
    > 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 :)

    --
    Matt Kruse
    http://www.JavascriptToolbox.com
     
    Matt Kruse, Apr 27, 2005
    #12
  13. Matt Kruse wrote:
    <snip>
    > 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.
     
    Richard Cornford, Apr 27, 2005
    #13
  14. horos

    Matt Kruse Guest

    Richard Cornford wrote:
    > 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.

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


    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.

    --
    Matt Kruse
    http://www.JavascriptToolbox.com
     
    Matt Kruse, Apr 27, 2005
    #14
  15. 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.
    >
    > print Data::Dumper(document)
    > print Data::Dumper(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.

    <http://validator.w3.org/>

    > <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
     
    Thomas 'PointedEars' Lahn, May 8, 2005
    #15
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. kamal
    Replies:
    0
    Views:
    989
    kamal
    Aug 12, 2003
  2. Eric
    Replies:
    0
    Views:
    4,434
  3. rc
    Replies:
    3
    Views:
    1,881
    Chris Uppal
    Aug 16, 2004
  4. srinivasan srinivas
    Replies:
    1
    Views:
    808
  5. Replies:
    4
    Views:
    250
    Paul Lalli
    Aug 1, 2007
Loading...

Share This Page