Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: change address bar with dynamic ajax loaded page

  1. #1
    Join Date
    Dec 2009
    Posts
    29
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Post change address bar with dynamic ajax loaded page

    i've created a page with links dynamically loaded to a div using ajax .... .!
    now due to this the address bar text will not be changed .. !

    1. i want it to be changed to
    sumthing/index.php#Main
    or like that dynamically
    is it possible in javascript ??????? or php ?????
    i dont want the page to be refreshed or loaded newly .. !
    can it happen dynamically ???

    i want this for navigation directly to a page
    like
    sumthing/index.php#Event5

    pls help ///

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    It's very easy to do. But it might be tricky if your AJAX routine forces your links to return false. Also certain servers may reload the page. All modern browsers I'm aware of will not reload the page unless directed to by the server. IE will make a click noise though.

    Say you have a link:

    Code:
    <a href="#Main" onclick="doAJAX('whatever', 'something');">Main</a>
    That will put #Main at the end of the address in the address bar, and run the doAJAX function. But that might not be how your AJAX works, or even a way that it can work. If not, some changes will need to be made to your AJAX or how it is called, or perhaps we will even need to replace your AJAX script. If you want more help:

    Please post a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2009
    Posts
    29
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Smile Link

    thanks .....

    here is the site im currently working at

    "http://prodigy.zxq.net"

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Replace:

    Code:
                    <li class="sliding-element" id=n0><a href="javascript:navigateTo('home',0);">Home</a></li>
                    <li class="sliding-element" id=n1><a href="javascript:navigateTo('events',1);">Events</a></li>
                    <li class="sliding-element" id=n2><a href="javascript:navigateTo('gallery',2);">Gallery</a></li>
                    <li class="sliding-element" id=n3><a href="javascript:navigateTo('sponsors',3);">Sponsors</a></li>
                    <li class="sliding-element" id=n4><a href="javascript:navigateTo('contact',4);">Contact</a></li>
                    <li class="sliding-element" id=n5><a href="javascript:navigateTo('members',5);">Members</a></li>
                    <li class="sliding-element" id=n6><a href="javascript:navigateTo('sitemap',6);">Sitemap</a></li>
                    <li class="sliding-element" id=n7><a href="javascript:navigateTo('credits',7);">Credits</a></li>
    with:

    Code:
                    <li class="sliding-element" id=n0><a href="#Home" onclick="navigateTo('home',0);">Home</a></li>
                    <li class="sliding-element" id=n1><a href="#Events" onclick="navigateTo('events',1);">Events</a></li>
                    <li class="sliding-element" id=n2><a href="#Gallery" onclick="navigateTo('gallery',2);">Gallery</a></li>
                    <li class="sliding-element" id=n3><a href="#Sponsors" onclick="navigateTo('sponsors',3);">Sponsors</a></li>
                    <li class="sliding-element" id=n4><a href="#Contact" onclick="navigateTo('contact',4);">Contact</a></li>
                    <li class="sliding-element" id=n5><a href="#Members" onclick="navigateTo('members',5);">Members</a></li>
                    <li class="sliding-element" id=n6><a href="#Sitemap" onclick="navigateTo('sitemap',6);">Sitemap</a></li>
                    <li class="sliding-element" id=n7><a href="#Credits" onclick="navigateTo('credits',7);">Credits</a></li>
    That's the best idea I have, and as I say, if your server forces a reload, there's nothing to be done about it, at least not with javascript. IE will make a click sound. If there is a problem with the server, you might be able to change that on the server side.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Dec 2009
    Posts
    29
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default thank you

    i made it using javascript using a window.location.replace() fn...

    used in window.onload
    and navigationTo()

    so got what was required ...

    one prob is for the first time whn i replace the addressbar text
    to "index.php#intro", the page gets loaded twice ...

    this does not happen when redirecting to
    #intro.php .... i.e it becomes something/#intro
    in prev case it is something/index.php#intro ........

    can this loading two times be stopped .... ! !!!

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Instead of:

    Code:
    window.location.replace("index.php#" + ref);
    try:

    Code:
    location.hash = '#' + ref;
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Dec 2009
    Posts
    29
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Post thankyou

    that created the same effect as done by
    location.replace('#' + ref);

    anyways thank you . .!

    i have a doubt on inline editor ...

    the concept im planning to use is enclose the div with "textarea" .
    and the prob is how to save changes to a php file that is currently open using js

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    No, you still have:

    Code:
    window.location.replace("index.php#" + ref);
    If you first get to the page as:

    Code:
    http://prodigy.zxq.net/
    Then replace it with:

    Code:
    http://prodigy.zxq.net/index.php#intro
    It will have to reload because the browser doesn't know that:

    Code:
    http://prodigy.zxq.net/
    and:

    Code:
    http://prodigy.zxq.net/index.php
    are the same. In fact, if you first go to:

    http://prodigy.zxq.net/index.php

    There is no additional page load. So, unless you don't want to see this in the address bar:

    Code:
    http://prodigy.zxq.net/#intro
    A way must be found to get the location (or bypass it) and use that instead of index.php here:

    Code:
    window.location.replace("index.php#" + ref);
    Using:

    Code:
    location.hash = '#' + ref;
    instead of:

    Code:
    window.location.replace("index.php#" + ref);
    will do that (be sure to upload the new code and to clear the browser's cache before testing).

    But if you don't want to see:

    Code:
    http://prodigy.zxq.net/#intro
    in the address bar, you will have use:

    Code:
    window.location.replace("index.php#" + ref);
    and put up with one page reload if the page was first navigated to using:

    Code:
    http://prodigy.zxq.net/
    or:

    Code:
    http://prodigy.zxq.net
    Just make sure that all references from within the site to its index page include the page name, and this will be kept to a minimum.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Dec 2009
    Posts
    29
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default i get it

    i dint update the changes in prodigy.zxq.net ......
    just tried on my comp ... !

    i meant to say that

    Code:
    location.replace('#' + ref)
    and

    Code:
    location.hash = ref
    created the same thing as

    Code:
    http://prodigy.zxq.net/#Events
    ......

    and what about the inline editor i asked about in the prev question....
    is it possible to save changes to a php file using javascript ....

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    So, is it fixed or not? None of the things you mention in your last post are the same as:

    Code:
    location.hash = '#' + ref;
    And the live page is not (in this regard) changed. I cannot diagnose what is not live. Locally, and on my localhost server, the:

    Code:
    location.hash = '#' + ref;
    works as stated in my last post.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •