changing the URL without reloading the page

[iwearwatches]

Group,

What a root canal.


Here is what I have:

I have a page that has several layers that I will either show/hide
based on a graphic/tab that the user clicks. (works perfectly)

On several of the layers there are forms that the user can update
information on. Well, after the user updates the information, I need
to 1.) refresh the data on the page(means a reload of the page), and
2.) take the user right back to were they started.

My problem is that when I refresh, the page goes back to the 1st layer
that is set as default to show.

So, here is what I did. I have two functions.

Function 1 is called when the user clicks on one of the tabs (Assets)
in this case. This will 1.) show the Assets tab and 2.) hide all the
rest of the tabs.

Well if I update that form for Assets, I need to 1.) refresh the data
and 2.) bring the user right back to Assets.

What I did for this (please tell me if there is a better way) was to
set a hidden field with the lastlocation of where the user clicked. In
this case the field value is now set to Assets.

So far everything is working great...

Well, if I submit the form because I've updating information, I need to
return back to the assets layer. To do this I set the location.url and
put a var in the url that I evaluate when I OnLoad the page. If the
value = Assets then I am able to show/hide the layers to get to the
Assets.

Again, this works great after much banging of my head against the
wall... Here come the problem.

Because I set the location.URL (I've also tried location.href) the
browser will automatically refresh. I do not want this. I want to set
the url and only refresh when I want to.

For example when I submit a form that updates data.

Help - How do you set the URL (using Javascript) and not have the page
refresh automatically? I've tried also trying to set the header, but I
can't with javascript.

I'm really stuck - Thank you in advance for your thoughts.

Terry

 

[RobG]

Group,

What a root canal.


Here is what I have:

I have a page that has several layers that I will either show/hide
based on a graphic/tab that the user clicks. (works perfectly)

On several of the layers there are forms that the user can update
information on. Well, after the user updates the information, I need
to 1.) refresh the data on the page(means a reload of the page), and
2.) take the user right back to were they started.

My problem is that when I refresh, the page goes back to the 1st layer
that is set as default to show.

So, here is what I did. I have two functions.

Function 1 is called when the user clicks on one of the tabs (Assets)
in this case. This will 1.) show the Assets tab and 2.) hide all the
rest of the tabs.

Well if I update that form for Assets, I need to 1.) refresh the data
and 2.) bring the user right back to Assets.

What I did for this (please tell me if there is a better way) was to
set a hidden field with the lastlocation of where the user clicked. In
this case the field value is now set to Assets.

So far everything is working great...

Well, if I submit the form because I've updating information, I need to
return back to the assets layer. To do this I set the location.url and
put a var in the url that I evaluate when I OnLoad the page. If the
value = Assets then I am able to show/hide the layers to get to the
Assets.

Again, this works great after much banging of my head against the
wall... Here come the problem.

Because I set the location.URL (I've also tried location.href) the
browser will automatically refresh. I do not want this. I want to set
the url and only refresh when I want to.

For example when I submit a form that updates data.

Help - How do you set the URL (using Javascript) and not have the page
refresh automatically? I've tried also trying to set the header, but I
can't with javascript.

I'm really stuck - Thank you in advance for your thoughts.

What you seem to want to do is submit the form without submitting the form.

When the submit button is clicked build your own query string, submit it
to the server using XMLHttpRequest and cancel the submit or put the data
into a form in a hidden frame and submit that.

Depending on the result of the XMLHttpRequest, update the form, reload
the page or do whatever as appropriate. Try to avoid making your pages
completely dependent on JavaScript.

 

[iwearwatches]

Rob,

Thank you for the insight. I will research the XMLHttpRequest.

I actually have many forms on the page. Each form is show based on the
"layer" it is under. For example, I have a personal layer, finanacial
layer, status layer and so on...

Each layer is either shown or hidden based on a tab/button graphic the
user clicks.

On some of the layers/forms like financial, the users can add assets,
liabilities, etc.. and when they do, I've already updated the table on
the server. Now I need to refresh the page and take the user directly
back to the same layer they were at. In this case Financial.

So, if I understand correctly, I will set some var in the
XMLHttpRequest object and then read it again and do my layer
manipulations.

I will research the XMLHttpRequest and see were I land.

Thank you again.

Terry

 

[Richard Cornford]

RobG wrote:

Depending on the result of the XMLHttpRequest, update the
form, reload the page or do whatever as appropriate.
Try to avoid making your pages completely dependent on
JavaScript.

If an XMLHttpRequest is used then a dependency on javascript is quite
likely (at least the measures required to avoid the dependency would
also remove the need for it in this context anyway). And given the
dominance of Windows IE combined with the fact that XMLhttpRequests are
not available on a proportion of script enabled IE browsers on the
public internet, it seems like a dubious technology to be relying upon
in itself.

However, if I understand this correctly, there is a script that sets an
initial state and a hidden form field that stores the current state. So
the current state is sent to the server when the form is submitted. So
the solution is to have the serer script read the current state and
dynamically generate the script that sets the initial state (or
dynamically generate its parameter). So every time the page returns form
the server its initial state is set to whatever the current state was at
the point of submission.

Richard.

 

[iwearwatches]

Richard,

Also thank you.

Yes and no. When I first load to page for the very first time, I
basicaly do not have any state set. The form field (hidden) contains
no data.

I have a series of tabs on my page that when a user clicks on one of
the tabs, I set the hidden field to a value of what ever tab they
click. For example, the Assets tab will cause the field to have Assets
as a value.

Then what I did was take that value and set the location.url and
concant the value of that field to a variable so I could read the
variable the next time the page was loaded.

The problem is that the location.url causes the pages to automatically
reload.

Oh, I'm using javascript for all this.

What I need to do is set some kind of state so that when the page
reloads it will evaluate that state and then either show or hide the
layer that is for that state. For example, Assets.

Maybe one of the best ways to show this is to take you to the site.

http://www.bkpartner.com/bksignin.php

user: super
pwd; super

You can pick the first record after going in and see what I'm talking
about.

I have stopped setting the location.url so that it doesn't reload each
time you click on a tab.

My goal is to allow the user to add/change the record(s) and then
refresh the page so that the forms/pages will reflect the new data and
also take the user right back to were there left off. In my example, I
use Assets.

Maybe seeing the website will shed some light on things.

Thanks again for all your help and everyone who is helping me with
this.

Terry

 

[iwearwatches]

Thank you Zoe.

I'm here to tell the "WORLD" that I got it to work. Yes! I can't
believe it.

The very sad thing is that it was so so simple. After spending days on
trying to figure it out, the solution took 30 seconds (maybe 45
seconds).

Here is what you do.

First, I used cookies.

Onloading of the page I perform a 'get cookie'
Stuff the value of the cookie into a field (hidden)
then I evaluate the field and then show/hide the appropiate layers.

The first time on the page the cookie will be set to blank.

When user clicks on a hot spot or (anything) I set the cookie to the
value that I will evaluate again when I load the page.

One note: The page prior to getting to my main page is a list of
customers. I click on a link that takes me to the customer detail.
This is where I'm setting the cookie based on the user's actions (ie.
clicking a tab).

When you land on the page with the listing, I needed to set the cookie
to blank so that the first time a user goes to the detail page, they
will see my default standard settings.

Does that make sense?

So to recap:

On page load check cookie and stuff value into field
Then go and perform appropiate action based on value in field. (ie.
show/hide layers)
When user does something, (like onClick), set the cookie

Way to simple.

Thank you everyone for thinking this through with me.

Terry