SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    Non-Member
    Join Date
    Oct 2007
    Location
    United Kingdom
    Posts
    622
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Talking Can javascript change the URL without refreshing the page?

    Hello, I was wondering, with javascript is it was possible to change aspects of the URL such as the stuff after the address without re-loading the page.

    I want to change this:

    Code:
    http://www.awebsiteaddress.com/index.html?information=true#position1
    to this:

    Code:
    http://www.awebsiteaddress.com/index.html?information=false#position2
    I dont need to change the address, just the stuff after it.

    and for future reference, what is the technical name for the stuff after the address?

    Thanks as always
    ro0bear

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All the stuff following the "?" is called the query string. Everything following the hash symbol ("#") is normally refered to as the hash value.

    It is possible to change the hash value without refreshing the page but not the query string.

    See this thread: http://www.sitepoint.com/forums/showthread.php?t=552076
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,803
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    It is not possible to update the querystring in the location object without the page being reloaded. Any assignment of new values to the location object from JavaScript will load a new page.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    Non-Member
    Join Date
    Oct 2007
    Location
    United Kingdom
    Posts
    622
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I see, thank you for such a quick reply.
    So you can change the hash value without refreshing the page? I think I can work with that.
    Thankyou
    ro0bear

  5. #5
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yes, that would be the equivalent of clicking a link like this:
    Code:
    <a href="#furtherinfo">Further info</a>
    Which would take you to the part of the page where there is an element with the ID "furtherinfo", e.g.:
    Code:
    <p id="furtherinfo">Blablabla</p>
    It doesn't take you to a different page so it isn't a security issue.

  6. #6
    Non-Member
    Join Date
    Oct 2007
    Location
    United Kingdom
    Posts
    622
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Talking

    Ive been having a play, and I've got stuck with something. I cant seem to stop the jumplinks from working, I need to disable them.

    What I am doing is converting a html document with jumplinks, into a document where you can navigate through each section as a page. The html of other pages is still there, its just hidden with css ( display: none; ). Ive done it this way to help with accessibility.
    The change from a long html doc to a short view by section/page only happens if you have javascipt enabled and is optional. I have tried changing the id with javascript to stop the jumping, but it doesnt work. The jump links dont seem to take any notice of javascript, only html. Is there a way round this?

    thank you,
    ro0bear

  7. #7
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You need to prevent the default action (which is to follow the link's href attribute), using preventDefault() for good browsers and returnValue for IE. See this:

    http://arapehlivanian.com/2008/05/16...nting-default/

  8. #8
    Non-Member
    Join Date
    Oct 2007
    Location
    United Kingdom
    Posts
    622
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Talking

    Thanks Raffles, thats great. I also found self.scrollTo(0, 0) to work, I am quite new to javascript, been working my way through "Simply Javascript" and "DHTML Utopia". Would you suggest using preventDefault() over self.scrollTo(0, 0)? and are there any incompatabilities with self.scrollTo(0, 0)?

    Thanks, I really appreciate your help
    ro0bear

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Using the scrollTo technique is a more complex solution.

    W3C has the preventDefault() method while IE has the returnValue property.
    You don't need either though as returning false is also guaranteed to work.

    Putting Occam's razor at work here, returning false is the simplest means by which to successfully do the job.

    On the flip-side, if you do use the scrollTo method, you will in 6 months time have forgotten why it's there so you will need to either document that statement by placing a comment near it to remind you why.

    Simple is best. return false and you or anyone else will be able to tell what's happening there.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Also, scrollTo(0,0) would jump up to the top of the page if the link you're clicking is somewhere you scrolled to down the page.

  11. #11
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You know, I've been scratching be head over a similar issue. I want to take the query string off the URL without refreshing the page. Is that possible, or would that count as changing the location? I can see how it might be a security issue.

  12. #12
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yes, it would count as changing the location. The only thing you can do without leaving the page is change the characters after the hash symbol (#).

  13. #13
    Non-Member
    Join Date
    Oct 2007
    Location
    United Kingdom
    Posts
    622
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Ah ok, thank you.

    Quote Originally Posted by Audacitor View Post
    You know, I've been scratching be head over a similar issue. I want to take the query string off the URL without refreshing the page. Is that possible, or would that count as changing the location? I can see how it might be a security issue.
    can you not just disable the code that interacts with the query string, removing the need for removing the query string (to an extent)?

    ro0bear

  14. #14
    SitePoint Enthusiast
    Join Date
    May 2008
    Location
    London, UK
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To the best of my knowledge Javascript cannot do this. jaavscript has many other known issues with redirection. It is better to use redirection within PHP or server side if possible in any case.


Bookmarks

Posting Permissions

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