document jscript function call order...

Discussion in 'Javascript' started by Trigger0219, Aug 12, 2007.

  1. Trigger0219

    Trigger0219 Guest

    I have some span textual elements that, when clicked, turn to a form
    element that can be modified and submited (specifically, you can
    change the month/year of a calendar directly from the label itself,
    and then go to that month/year in a snap).

    the issue is functional. I got the DOM element to change, but when
    clicking anywhere in the document I would like the span to convert
    back to it's original textual state and (obviously) not submit the
    form. I thought this would be a reasonable attempt:

    <body onclick='javascript:edit("none");'><table>
    <tr><td colspan=8 align=center><h2><form method=post>
    <span id='month' onclick='javascript:edit("month");'>October</
    span>&nbsp;
    <span id='year' onclick='javascript:edit("year");'>2006</span>
    </form></h2></td>
    </tr>
    ....
    <!-- the table continue with each day label et cetera. -->

    What happens when clicking the month text is that the edit("month")
    gets called, then the edit("none") directly after, so the element
    doesn't change at all. This is something I kind of expected going into
    it, but thought i'd give it a shot and see if the parent object would
    get called first. Is there any way to modify this order of operations
    here, or what have other people done to mitigate/resolve this issue.

    Thanks,
    Trigger0219, Aug 12, 2007
    #1
    1. Advertising

  2. Trigger0219 wrote:
    > <body onclick='javascript:edit("none");'><table>
    > <tr><td colspan=8 align=center><h2><form method=post>
    > <span id='month' onclick='javascript:edit("month");'>October</
    > span>&nbsp;
    > <span id='year' onclick='javascript:edit("year");'>2006</span>
    > </form></h2></td>
    > </tr>
    > ...
    > <!-- the table continue with each day label et cetera. -->


    `javascript:' does not belong there. It is also likely that the `form'
    element should enclose the `table' element.

    > What happens when clicking the month text is that the edit("month")
    > gets called, then the edit("none") directly after, so the element
    > doesn't change at all. This is something I kind of expected going into
    > it, but thought i'd give it a shot and see if the parent object would
    > get called first. Is there any way to modify this order of operations
    > here, or what have other people done to mitigate/resolve this issue.


    You posted merely the calling code, but not the called code. This is not a
    quiz show.

    You have been running into the feature called event bubbling, meaning that
    one event can be handled on an element and then can "bubble up" to be
    handled again by its parent or other ancestor elements. Event cancelation
    prevents the event to bubble:

    http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow

    In the MSHTML DOM, you need to cancel an event using the `cancelBubble'
    property:

    http://msdn2.microsoft.com/en-us/library/ms533545.aspx


    PointedEars
    --
    Anyone who slaps a 'this page is best viewed with Browser X' label on
    a Web page appears to be yearning for the bad old days, before the Web,
    when you had very little chance of reading a document written on another
    computer, another word processor, or another network. -- Tim Berners-Lee
    Thomas 'PointedEars' Lahn, Aug 12, 2007
    #2
    1. Advertising

  3. Trigger0219

    David Mark Guest

    On Aug 11, 10:34 pm, Trigger0219 <> wrote:
    > I have some span textual elements that, when clicked, turn to a form
    > element that can be modified and submited (specifically, you can
    > change the month/year of a calendar directly from the label itself,
    > and then go to that month/year in a snap).


    Easier said than done.

    >
    > the issue is functional. I got the DOM element to change, but when
    > clicking anywhere in the document I would like the span to convert
    > back to it's original textual state and (obviously) not submit the
    > form. I thought this would be a reasonable attempt:
    >
    > <body onclick='javascript:edit("none");'><table>


    Do a global replace to remove "javascript:" as it isn't needed.

    > <tr><td colspan=8 align=center><h2><form method=post>


    Don't abuse headlines. These look like TH elements to me and those
    appear bold by default in most browsers.

    > <span id='month' onclick='javascript:edit("month");'>October</
    > span>&nbsp;
    > <span id='year' onclick='javascript:edit("year");'>2006</span>
    > </form></h2></td>
    > </tr>


    I can't imagine what this "edit" function looks like.

    > ...
    > <!-- the table continue with each day label et cetera. -->
    >
    > What happens when clicking the month text is that the edit("month")
    > gets called, then the edit("none") directly after, so the element
    > doesn't change at all. This is something I kind of expected going into
    > it, but thought i'd give it a shot and see if the parent object would
    > get called first. Is there any way to


    As you have seen, it won't get called first. Events bubble up through
    the DOM, not down.

    modify this order of operations
    > here, or what have other people done to mitigate/resolve this issue.


    Here is an example that illustrates how to handle event bubbling
    (among other things.) It works without scripting and/or style
    enabled. One caveat: very old browsers (eg IE4) will display both a
    span and an input when scripting is enabled and style is not.

    BTW, if you don't understand the example, you can just use CSS to
    style the inputs like labels and use a submit button to update the
    calendar.

    <html>
    <head>
    <title>Label Edit</title>
    <script type="text/javascript">

    if (document.getElementsByTagName &&
    document.getElementsByTagName('html') &&
    document.getElementsByTagName('html')[0] &&
    document.getElementsByTagName('html')[0].style &&
    typeof(document.getElementsByTagName('html')[0].style.visibility) ==
    'string') {
    document.write('<style type="text/css">#myform {visibility:hidden}
    #myform input {border:none}<\/style>');
    var oldOnLoad = window.onload;
    window.onload = function() {
    var editing = {};
    var frm = document.forms.myform;

    var getComputedStyle = function() {
    if (document.defaultView && document.defaultView.getComputedStyle)
    {
    return function(el, style) { var css =
    document.defaultView.getComputedStyle(el, null); if (css) { return
    (css[style])?css[style]:null; } else { return null; } };
    }
    else {
    return function(el, style) { return (el.currentStyle)?
    el.currentStyle[style]:null; };
    }
    }();

    var setText = function() {
    if (document.createTextNode) {
    return function(el, text) { if (el.appendChild)
    { el.appendChild(document.createTextNode(text)); return true; } };
    }
    else {
    return function(el, text) { if (typeof(el.innerHTML) == 'string')
    { el.innerHTML = text; return true; } };
    }
    }();

    function cancelPropagation(e) {
    e = e || window.event;
    if (e.stopPropagation) { e.stopPropagation(); }
    e.cancelBubble = true;
    }

    function cancelEdit() {
    for (var id in editing) {
    if (editing[id]) {
    frm.elements[id].style.display = 'none';
    editing[id].style.display = 'inline';
    editing[id] = null;
    }
    }
    }

    function inputKeyPress(e) {
    e = e || window.event;
    var key = (typeof(e.which) == 'undefined')?e.keyCode:e.which;
    if (key == 13) {
    this.form.submit();
    return false;
    }
    else {
    if (key == 27) { cancelEdit(); }
    }

    }

    function edit(e) {
    if (this.id) {
    this.style.display = 'none';
    frm.elements[this.id].style.display = 'inline';
    frm.elements[this.id].focus();
    editing[this.id] = this;
    }
    cancelPropagation(e);
    return false;
    }

    if (frm) {
    var formStyle = getComputedStyle(frm, 'visibility');
    var useCSSToSwap = (formStyle === null || formStyle ==
    'hidden'); // assumes style enabled if can't tell
    var anchors = frm.getElementsByTagName('a');
    if (anchors && anchors.length && anchors[0].style &&
    typeof(anchors[0].style.display) == 'string') {
    var el;
    var dontNeedSubmitButton;
    for (var i = anchors.length - 1; i >= 0; i--) {
    if (anchors.id && (el = frm.elements[anchors.id])) {
    if (useCSSToSwap && setText(anchors, el.value)) {
    anchors.onclick = edit;
    anchors.href = "#";
    anchors.tabIndex = 0;
    el.onclick = cancelPropagation;
    el.style.display = 'none';
    }
    el.onkeypress = inputKeyPress;
    dontNeedSubmitButton = true;
    }
    }
    if (dontNeedSubmitButton) {
    el = frm.elements.change;
    if (el) { el.style.display = 'none'; }
    }
    frm.style.visibility = 'visible';
    document.onclick = cancelEdit;
    el = null;
    anchors = null;
    }
    }

    window.onunload = function() { // Check for circular reference
    for (var id in editing) {
    if (editing[id]) { editing[id].onclick = null; } // Prevent IE
    memory leak
    }
    };

    if (oldOnLoad) { oldOnLoad(); }
    };
    }
    </script>
    </head>
    <body>
    <form id="myform" name="myform" method="post">
    <a id="month" title="Edit month"></a><input name="month"
    value="October">&nbsp;<a title="Edit year" id="year"></a><input
    name="year" value="2006"> <input type="submit" name="change"
    value="Change">
    </form>
    </body>
    </html>
    David Mark, Aug 12, 2007
    #3
    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. THY
    Replies:
    3
    Views:
    3,373
    S. Justin Gengo
    Aug 26, 2003
  2. Jon Maz
    Replies:
    4
    Views:
    1,247
    Jon Maz
    Sep 9, 2004
  3. Maxwell2006
    Replies:
    5
    Views:
    2,374
    Steven Cheng[MSFT]
    Mar 7, 2006
  4. John Bentley
    Replies:
    14
    Views:
    335
    Jim Ley
    Feb 5, 2004
  5. VK
    Replies:
    4
    Views:
    346
    Thomas 'PointedEars' Lahn
    Jan 12, 2006
Loading...

Share This Page