onclick on <a> causing strange behavior, please help?

Discussion in 'Javascript' started by Erland, Sep 4, 2007.

  1. Erland

    Erland Guest

    Hello All,

    I've registered a handler on 's onclick and in this handler I try to
    change the style of a textbox. More specifically, I try to change the
    border of textbox to "solid black 1px" which is originally set to
    "0px". Now part of the problem is that code in handler only occurs for
    a 1/10th of a second, that is I see the textbox's border turning into
    "solid black 1px" but that just happens for 1/10th of a second and
    textbox's border again becomes "0px". I can't figure out why onclick
    handler on happens for a flicker and why don't changes that I'm
    making in this handler persist. Please pardon my ignorance, I'm just
    learning DOM/DHTML and Javascript.

    Here is my html
    <div class="frame">
    FirstName: <input type="text" value="Waqas" class="fname"></input><br>

    Edit <!--This is my anchor tag, HTML viewing might skim it, it has a
    class with name 'editt-->


    <br>
    </div>
    here is my handler
    function editHandler(event)
    {
    var e=event || window.event;
    var node=this.parentNode;
    if (node != null)
    {
    for (var i=node; node.nodeName != "INPUT" ; i
    =node.previousSibling)
    node=i;

    node.focus();
    node.value ="Hello there, after edit";
    node.style.border="solid black 1px";
    this.value='Save';
    alert("everything is fine");



    return true;
    }
    else
    {
    alert("Some error occured");
    return false;
    }
    and here is the css included in my HTML head
    function editHandler(event)
    {
    var e=event || window.event;
    var node=this.parentNode;
    if (node != null)
    {
    for (var i=node; node.nodeName != "INPUT" ; i
    =node.previousSibling)
    node=i;

    node.focus();
    node.value ="Hello there, after edit";
    node.style.border="solid black 1px";
    this.value='Save';
    alert("everything is fine");



    return true;
    }
    else
    {
    alert("Some error occured");
    return false;
    }


    I will really appreciate any help
     
    Erland, Sep 4, 2007
    #1
    1. Advertising

  2. Erland

    Lee Guest

    Erland said:
    >
    >Hello All,
    >
    >I've registered a handler on 's onclick and in this handler I try to
    >change the style of a textbox. More specifically, I try to change the
    >border of textbox to "solid black 1px" which is originally set to
    >"0px". Now part of the problem is that code in handler only occurs for
    >a 1/10th of a second, that is I see the textbox's border turning into
    >"solid black 1px" but that just happens for 1/10th of a second and
    >textbox's border again becomes "0px". I can't figure out why onclick
    >handler on happens for a flicker and why don't changes that I'm
    >making in this handler persist. Please pardon my ignorance, I'm just
    >learning DOM/DHTML and Javascript.
    >
    > Here is my html
    ><div class="frame">
    >FirstName: <input type="text" value="Waqas" class="fname"></input><br>
    >
    >Edit <!--This is my anchor tag, HTML viewing might skim it, it has a
    >class with name 'editt-->
    >
    >
    ><br>
    ></div>


    I don't see any anchor. My first guess is that the anchor is
    behaving as designed, and causing a page load of one form or
    another. If what you're seeing is a flicker, then it's most
    likely reloading the same page.


    --
     
    Lee, Sep 4, 2007
    #2
    1. Advertising

  3. Erland

    Erland Guest

    On Sep 4, 11:43 pm, Lee <> wrote:
    > Erland said:
    >
    >
    >
    >
    >
    > >Hello All,

    >
    > >I've registered a handler on 's onclick and in this handler I try to
    > >change the style of a textbox. More specifically, I try to change the
    > >border of textbox to "solid black 1px" which is originally set to
    > >"0px". Now part of the problem is that code in handler only occurs for
    > >a 1/10th of a second, that is I see the textbox's border turning into
    > >"solid black 1px" but that just happens for 1/10th of a second and
    > >textbox's border again becomes "0px". I can't figure out why onclick
    > >handler on happens for a flicker and why don't changes that I'm
    > >making in this handler persist. Please pardon my ignorance, I'm just
    > >learning DOM/DHTML and Javascript.

    >
    > > Here is my html
    > ><div class="frame">
    > >FirstName: <input type="text" value="Waqas" class="fname"></input><br>

    >
    > >Edit <!--This is my anchor tag, HTML viewing might skim it, it has a
    > >class with name 'editt-->

    >
    > ><br>
    > ></div>

    >
    > I don't see any anchor. My first guess is that the anchor is
    > behaving as designed, and causing a page load of one form or
    > another. If what you're seeing is a flicker, then it's most
    > likely reloading the same page.
    >


    Lee,

    Thank you for the reply. I guess you are rigght, it is causing some
    sort of page re-load. How can I prevent that? Please enlighten me.

    Thanks,
    Erland
     
    Erland, Sep 5, 2007
    #3
  4. Erland

    Aaron Saray Guest

    On Sep 4, 8:37 pm, Erland <> wrote:
    > On Sep 4, 11:43 pm, Lee <> wrote:
    >
    >
    >
    > > Erland said:

    >
    > > >Hello All,

    >
    > > >I've registered a handler on 's onclick and in this handler I try to
    > > >change the style of a textbox. More specifically, I try to change the
    > > >border of textbox to "solid black 1px" which is originally set to
    > > >"0px". Now part of the problem is that code in handler only occurs for
    > > >a 1/10th of a second, that is I see the textbox's border turning into
    > > >"solid black 1px" but that just happens for 1/10th of a second and
    > > >textbox's border again becomes "0px". I can't figure out why onclick
    > > >handler on happens for a flicker and why don't changes that I'm
    > > >making in this handler persist. Please pardon my ignorance, I'm just
    > > >learning DOM/DHTML and Javascript.

    >
    > > > Here is my html
    > > ><div class="frame">
    > > >FirstName: <input type="text" value="Waqas" class="fname"></input><br>

    >
    > > >Edit <!--This is my anchor tag, HTML viewing might skim it, it has a
    > > >class with name 'editt-->

    >
    > > ><br>
    > > ></div>

    >
    > > I don't see any anchor. My first guess is that the anchor is
    > > behaving as designed, and causing a page load of one form or
    > > another. If what you're seeing is a flicker, then it's most
    > > likely reloading the same page.

    >
    > Lee,
    >
    > Thank you for the reply. I guess you are rigght, it is causing some
    > sort of page re-load. How can I prevent that? Please enlighten me.
    >
    > Thanks,
    > Erland


    You should be able to return false - this will stop the tag from
    executing.
     
    Aaron Saray, Sep 5, 2007
    #4
  5. "Aaron Saray" <> wrote in message
    news:...
    > On Sep 4, 8:37 pm, Erland <> wrote:
    >> On Sep 4, 11:43 pm, Lee <> wrote:
    >>
    >>
    >>
    >> > Erland said:

    >>
    >> > >Hello All,

    >>
    >> > >I've registered a handler on 's onclick and in this handler I try to
    >> > >change the style of a textbox. More specifically, I try to change the
    >> > >border of textbox to "solid black 1px" which is originally set to
    >> > >"0px". Now part of the problem is that code in handler only occurs for
    >> > >a 1/10th of a second, that is I see the textbox's border turning into
    >> > >"solid black 1px" but that just happens for 1/10th of a second and
    >> > >textbox's border again becomes "0px". I can't figure out why onclick
    >> > >handler on happens for a flicker and why don't changes that I'm
    >> > >making in this handler persist. Please pardon my ignorance, I'm just
    >> > >learning DOM/DHTML and Javascript.

    >>
    >> > > Here is my html
    >> > ><div class="frame">
    >> > >FirstName: <input type="text" value="Waqas" class="fname"></input><br>

    >>
    >> > >Edit <!--This is my anchor tag, HTML viewing might skim it, it has a
    >> > >class with name 'editt-->

    >>
    >> > ><br>
    >> > ></div>

    >>
    >> > I don't see any anchor. My first guess is that the anchor is
    >> > behaving as designed, and causing a page load of one form or
    >> > another. If what you're seeing is a flicker, then it's most
    >> > likely reloading the same page.

    >>
    >> Lee,
    >>
    >> Thank you for the reply. I guess you are rigght, it is causing some
    >> sort of page re-load. How can I prevent that? Please enlighten me.
    >>
    >> Thanks,
    >> Erland

    >
    > You should be able to return false - this will stop the tag from
    > executing.
    >


    Try using < a href="#" onclick="functionname;" class="edit" > . The # is a
    legal link address that does absolutely nothing. This should fix your
    problem.

    Matt
     
    Matthew White, Sep 6, 2007
    #5
  6. Erland

    Lee Guest

    Matthew White said:
    >
    >"Aaron Saray" <> wrote in message
    >news:...
    >> On Sep 4, 8:37 pm, Erland <> wrote:
    >>> On Sep 4, 11:43 pm, Lee <> wrote:
    >>>
    >>>
    >>>
    >>> > Erland said:
    >>>
    >>> > >Hello All,
    >>>
    >>> > >I've registered a handler on 's onclick and in this handler I try to
    >>> > >change the style of a textbox. More specifically, I try to change the
    >>> > >border of textbox to "solid black 1px" which is originally set to
    >>> > >"0px". Now part of the problem is that code in handler only occurs for
    >>> > >a 1/10th of a second, that is I see the textbox's border turning into
    >>> > >"solid black 1px" but that just happens for 1/10th of a second and
    >>> > >textbox's border again becomes "0px". I can't figure out why onclick
    >>> > >handler on happens for a flicker and why don't changes that I'm
    >>> > >making in this handler persist. Please pardon my ignorance, I'm just
    >>> > >learning DOM/DHTML and Javascript.
    >>>
    >>> > > Here is my html
    >>> > ><div class="frame">
    >>> > >FirstName: <input type="text" value="Waqas" class="fname"></input><br>
    >>>
    >>> > >Edit <!--This is my anchor tag, HTML viewing might skim it, it has a
    >>> > >class with name 'editt-->
    >>>
    >>> > ><br>
    >>> > ></div>
    >>>
    >>> > I don't see any anchor. My first guess is that the anchor is
    >>> > behaving as designed, and causing a page load of one form or
    >>> > another. If what you're seeing is a flicker, then it's most
    >>> > likely reloading the same page.
    >>>
    >>> Lee,
    >>>
    >>> Thank you for the reply. I guess you are rigght, it is causing some
    >>> sort of page re-load. How can I prevent that? Please enlighten me.
    >>>
    >>> Thanks,
    >>> Erland

    >>
    >> You should be able to return false - this will stop the tag from
    >> executing.
    >>

    >
    >Try using < a href="#" onclick="functionname;" class="edit" > . The # is a
    >legal link address that does absolutely nothing. This should fix your
    >problem.


    It really does not do "absolutely nothing". It's an anchor link to
    the top of the current page. That means that it may reposition the
    page within the browser or may even reload it. Browser's choice.

    The best solution is to not use an anchor tag if you don't want
    to go anyplace. Just add an onclick handler to some other tag.
    If you insist on using an anchor, the onclick handler should
    return false to prevent the link from continuing.


    --
     
    Lee, Sep 6, 2007
    #6
  7. Matthew White wrote:
    > "Aaron Saray" [...] wrote [...]:
    >> On Sep 4, 8:37 pm, Erland <> wrote:
    >>> On Sep 4, 11:43 pm, Lee <> wrote:
    >>>> Erland said:
    >>>>> [Using onclick in an anchor causes styled textbox to flicker]
    >>>>> Here is my html
    >>>>> <div class="frame">
    >>>>> FirstName: <input type="text" value="Waqas" class="fname"></input><br>
    >>>>> Edit <!--This is my anchor tag, HTML viewing might skim it, it has a
    >>>>> class with name 'editt-->
    >>>>> <br>
    >>>>> </div>
    >>>> I don't see any anchor. My first guess is that the anchor is
    >>>> behaving as designed, and causing a page load of one form or
    >>>> another. If what you're seeing is a flicker, then it's most
    >>>> likely reloading the same page.
    >>> [...]
    >>> Thank you for the reply. I guess you are rigght, it is causing some
    >>> sort of page re-load. How can I prevent that? Please enlighten me.
    >>> [...]

    >> You should be able to return false - this will stop the tag from
    >> executing.

    >
    > Try using < a href="#" onclick="functionname;" class="edit" > . The # is a
    > legal link address that does absolutely nothing. This should fix your
    > problem.


    And introduce at least one other. Please read the FAQ before you post.


    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, Sep 6, 2007
    #7
    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. Barry
    Replies:
    2
    Views:
    389
    John Saunders
    Nov 4, 2003
  2. KK
    Replies:
    2
    Views:
    646
    Big Brian
    Oct 14, 2003
  3. Dennis
    Replies:
    2
    Views:
    764
  4. Simply_Red

    Help please, strange behavior

    Simply_Red, Feb 14, 2007, in forum: C++
    Replies:
    31
    Views:
    1,011
    Simply_Red
    Feb 15, 2007
  5. Steve Ferg
    Replies:
    2
    Views:
    531
    Steve Ferg
    Aug 25, 2010
Loading...

Share This Page