PDA

View Full Version : change address bar with dynamic ajax loaded page



legend.raju
12-25-2009, 07:11 PM
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 ///

jscheuer1
12-25-2009, 07:51 PM
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:


<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.

legend.raju
12-25-2009, 10:20 PM
thanks .....

here is the site im currently working at

"http://prodigy.zxq.net"

jscheuer1
12-26-2009, 11:36 AM
Replace:


<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:


<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.

legend.raju
12-27-2009, 09:33 PM
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 .... ! !!!

jscheuer1
12-28-2009, 03:44 AM
Instead of:


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

try:


location.hash = '#' + ref;

legend.raju
12-28-2009, 08:08 AM
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

jscheuer1
12-28-2009, 02:55 PM
No, you still have:


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

If you first get to the page as:


http://prodigy.zxq.net/

Then replace it with:


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

It will have to reload because the browser doesn't know that:


http://prodigy.zxq.net/

and:


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:


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:


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

Using:


location.hash = '#' + ref;

instead of:


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:


http://prodigy.zxq.net/#intro

in the address bar, you will have use:


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

and put up with one page reload if the page was first navigated to using:


http://prodigy.zxq.net/

or:


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.

legend.raju
12-28-2009, 09:36 PM
i dint update the changes in prodigy.zxq.net ......
just tried on my comp ... !

i meant to say that


location.replace('#' + ref)

and


location.hash = ref

created the same thing as


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 ....

jscheuer1
12-29-2009, 01:00 AM
So, is it fixed or not? None of the things you mention in your last post are the same as:


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:


location.hash = '#' + ref;

works as stated in my last post.

legend.raju
12-29-2009, 06:19 AM
i tried in apache localhost server ..

for me


location.hash = '#' + ref

and


location.hash = ref

and


location.replace('#' + ref)

give the same result ......

jscheuer1
12-29-2009, 06:25 AM
Well, put it up live with:


location.hash = '#' + ref;

My thinking being that it will probably work, and if not, at least then I should be able to see why not.

Notes: This can be influenced by the server, and is fairly non-standard as far as I know. So there may not be a simple solution. But we can try. What we have so far isn't so bad though, right?

legend.raju
12-29-2009, 06:38 AM
yeah ... and thankyou for the help ... !
it is solved ... !

jscheuer1
12-29-2009, 07:10 AM
Great! Now, if you still want help with saving to a file on the server, post a new thread in the PHP section:

http://www.dynamicdrive.com/forums/forumdisplay.php?f=11