Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How can I use AJAX without going back to the top of the page?

    How can you use AJAX and an <A HREF tag and keep the page where it is, without going up to the top... and without using an <a name="somename">??

    Code:
    <a href="#" onclick="somefunction()"> Click Here </a>

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    Has nothing to do with Ajax. Just basic JavaScript canceling the default action of an element.

    Code:
    onclick="foo();return false;"
    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #3
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the reply! Much appreciated, but I still didn't get it to work quite yet... this is what I have:

    Code:
    <a href="#" onclick="somefunction();return false;"> Click Here </a>
    The page still bounces back up to the top. If I remove the "#" from the href, then the function doesn't execute.

    Any help is greatly appreciated.

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,274
    Thanks
    10
    Thanked 581 Times in 562 Posts
    use

    Code:
    <input type="button" onclick="somefunction();" value="Click Here" />
    to denote an action. links are for documents, buttons do stuff.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #5
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    If it is still going to the top, it sounds like you might have an error in your function.
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #6
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The function could possibly have an error... its actually the function that was posted on "IE problems IE errors on page with AHAH", and I basically had separate issues with the same code.
    The computer that produced that error is unavailable right now ( it was not mine ) ... so I should get the error message soon.

    Thanks for all the replies!

  • #7
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,274
    Thanks
    10
    Thanked 581 Times in 562 Posts
    try onclick="this.href=location.href; somefunction();return false;"

    you could also use onmousedown instead of onclick to cut the click off by about 100ms.

    if you are worried about an error in the function, rethread the stack by using settimeout:


    onclick="this.href=location.href; setTimeout(somefunction, 35); return false;"
    Last edited by rnd me; 08-19-2008 at 07:59 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #8
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Still didn't work, but the onmousedown is faster... thanks1

  • #9
    SSJ
    SSJ is offline
    Regular Coder
    Join Date
    Mar 2007
    Posts
    230
    Thanks
    0
    Thanked 4 Times in 4 Posts
    You can use <label> instead of <a> to get it working

  • #10
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    Quote Originally Posted by rnd me View Post
    try onclick="this.href=location.href; somefunction();return false;"

    you could also use onmousedown instead of onclick to cut the click off by about 100ms.

    if you are worried about an error in the function, rethread the stack by using settimeout:


    onclick="this.href=location.href; setTimeout(somefunction, 35); return false;"
    Why in the world are you telling him to set the href of the link to the current page?

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #11
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,274
    Thanks
    10
    Thanked 581 Times in 562 Posts
    because he doen't want the link to do anything, and didn't care to follow it.
    was thinking to use hash, but then what about the first visits....

    if the link goes to where he already is, nothing will happen (was the theory).
    i know it's unconventional, but my first two guesses didn't work.
    rethinking about it, i bet some browsers will re-nav though if the link is an absolute url...

    this is a prime example of why not use an 'a' tag for javascript actions, but hey, OP was determined.


    its still not working, so if you have any suggestions, please feel free to share.


    perhaps try:

    Code:
    onmouseover="this.href='javascript:void(0)' "
    onclick=" somefunction(); return false;"
    i still don't know why it's following the links in the first place, so that's just a stab.

    you can also style a span to look like an a tag and use it instead. that would work for sure.
    Last edited by rnd me; 08-20-2008 at 08:11 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #12
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tried using span and label tags, no luck there, same behavior.
    <br>
    I tried:
    Code:
    onmouseover="this.href='javascript:void(0)' "
    onclick=" somefunction(); return false;"
    didn't work either...did you mean to put both of those in the same a tag? Thats what I did. Like this:
    Code:
    <a onmouseover="this.href='javascript:void(0)' " onclick=" somefunction(); return false;">

  • #13
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,274
    Thanks
    10
    Thanked 581 Times in 562 Posts
    post the code to somefunction().

    it has to be something in that function.
    there is nothing that a span tag would do to cause the behavior you describe.

    i was wondering why the a tag wasn't working correctly...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #14
    SSJ
    SSJ is offline
    Regular Coder
    Join Date
    Mar 2007
    Posts
    230
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Use Following:

    <label onclick="somefunction()"> Click Here </label>

  • #15
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,274
    Thanks
    10
    Thanked 581 Times in 562 Posts
    please don't use the label tag for this. while it may work, as almost any other tag would, it is bad practice.

    <label> tags are use to extend the focus grabbing of form elements.
    that is all they are supposed to be used for.

    why?

    people with certain disabilities use software that interprets <label>s to mean that data goes to the input in the for attrib of the label.

    you are possibly making the page confusing for these users by arbitrarily using it where a button, link, or input would make a lot more sense.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •