location.hash and event handler/window event

[Mauro Marchiori Neto]

Hello there!

Is there a way to register a event on the browser window that gets called everytime the location/location.hash changes?

maybe using element.observe? im not quite sure about it...im kinda lost actually.

Atenciosamente
--
Mauro Marchiori Neto
email: maur...@gmail.com
cel: 19 9129.9960
cel: 19 7806.9676
id: 80*15224

[Justin Perkins]

I know of no native way to do this. The first thing that comes to mind
is using window.setInterval() to invoke a function every couple of
seconds to see if the address bar has been changed.

Are you updating the address bar when an Ajax request changes the
page, but then when you click the back button you are noticing that
the URL changes (after the hash symbol) but nothing else does?

-justin

[Mauro Marchiori Neto]

setInterval right? wouldnt it overload the browser?

Thats right, the Ajax call changes the location hash and updates a <div>, if i click the back button, the hash changes but nothing else happens.

Atenciosamente
--
Mauro Marchiori Neto
email: maur...@gmail.com
cel: 19 9129.9960
cel: 19 7806.9676
id: 80*15224

[solidhex]

If the page is re-loading, you can do different things pretty easily
depending on the location value.

document.observe('dom:loaded', function() {
if (location.hash.length > 1) {
var string = location.hash.substring(1);

if (string == 'foo') {
alert('foo');
}

if (string == 'baz') {
alert('baz');
}
});

Is this what you were thinking of?

On Oct 9, 9:15 am, "Mauro Marchiori Neto" <mauron...@gmail.com> wrote:
> Hello there!
>
> Is there a way to register a event on the browser window that gets called
> everytime the location/location.hash changes?
>
> maybe using element.observe? im not quite sure about it...im kinda lost
> actually.
>
> Atenciosamente
> --
> Mauro Marchiori Neto

> email: mauron...@gmail.com

[solidhex]

Ha, my response was late. Never mind :)

[Justin Perkins]

On Thu, Oct 9, 2008 at 12:03 PM, Mauro Marchiori Neto
<maur...@gmail.com> wrote:
> setInterval right? wouldnt it overload the browser?

Not necessarily, as long as your URL checking function is simple and
you don't check very frequently. Say, something like this:

var AnchorChecker = {
initialize: function(){
this.location = location.href;
this.interval = setInterval(function(){
if (this.location != location.href) this.anchorAltered();
}.bind(this), 500); // check every half second
},
anchorAltered: function(){
// the url has been altered
}
};

AnchorChecker.initialize();

^ 100% untested, beware

-justin

[Diodeus]

One was to perform this is to use a history IFRAME. (as in Brad
Neuberg's RSH)

1) Make your request to the iframe - I pass it a command and a page
title, separated by underscore.

function getContent(t,c) {
frames['HIST'].location.href="http://www.mintorentals.com/
historyManFrame.asp?t="+t+"&c="+c
}

2) The iframe sets the location hash and calls your AJAX function on
the parent page.

(this one uses classic ASP)

function hello(){
baseRef = parent.location.href
myRef = baseRef.split("#")
if(myRef.length>0) {
baseRef = myRef[0]
}
parent.location.href=baseRef+"#<%=request("c")%>_<%=request("t")%>"
parent.document.title = "<%=request("t")%> - Rent Minto";
parent.getContentH('<%=request("c")%>'); //this calls the actuall
AJAX functionality
}
hello()

3) Intercept the hash on your page, break it into your page title and
and command, execute them as in step 1

incomingRef = document.location.href.split("#")
if(incomingRef.length>1) {
temp=incomingRef[1].split("_")
if(temp.length==2) {
temp=incomingRef[1].split("_")
getContent(temp[1],temp[0])

}

}



On Oct 9, 1:03 pm, "Mauro Marchiori Neto" <mauron...@gmail.com> wrote:
> setInterval right? wouldnt it overload the browser?
>
> Thats right, the Ajax call changes the location hash and updates a <div>, if
> i click the back button, the hash changes but nothing else happens.
>
> Atenciosamente
> --
> Mauro Marchiori Neto

> email: mauron...@gmail.com

> cel: 19 9129.9960
> cel: 19 7806.9676
> id: 80*15224
>

[Mauro Marchiori Neto]

So you basically store the url elsewhere to make the Back button work? I never got the hang of it...
In my case i think it would be better to store in the actual address bar, so the person can bookmark it.

Atenciosamente
--
Mauro Marchiori Neto

email: maur...@gmail.com

cel: 19 9129.9960
cel: 19 7806.9676
id: 80*15224

[Mauro Marchiori Neto]

Justin, i tried it, but once you change it (the url) it gets stuck in and endless loop

Atenciosamente
--
Mauro Marchiori Neto
email: maur...@gmail.com
cel: 19 9129.9960
cel: 19 7806.9676
id: 80*15224

[Mauro Marchiori Neto]

This works flawlessly!

var AnchorChecker = {
 initialize: function(){
   this.location = location.href;
   this.interval = setInterval(function(){
     if (this.location != location.href)
     {  
      this.anchorAltered();

      this.location = location.href;

     }
   }.bind(this), 500); // check every half second
 },
 anchorAltered: function(){
   // the url has been altered
 }
};

AnchorChecker.initialize();

so the current locations is updated and it works fine!

Atenciosamente
--
Mauro Marchiori Neto
email: maur...@gmail.com
cel: 19 9129.9960
cel: 19 7806.9676
id: 80*15224

[Justin Perkins]

On Thu, Oct 9, 2008 at 1:56 PM, Mauro Marchiori Neto
<maur...@gmail.com> wrote:
> This works flawlessly!

Yes I think I forgot the most important line, glad you got it working :)

-justin

[Hector Virgen]

I think you can avoid the setInterval function by using Ajax.Responders. 

http://www.prototypejs.org/api/ajax/responders

Ajax.Responders.register({
  onComplete: function()
  {
    new AnchorChecker();
  }
});

-Hector

[Mauro Marchiori Neto]

Still...i managed to put inside a weird loop sometimes...dont know why... O.o

the problem im now having is that whenever i have a link i have:

<a href="#page1" onClick="ajax.request('page1.html')">go to page1.html</a>


whenever i click on it, the ajax.request fetches the page but the recurring function also captures the hash change and loads the page once again...

its working this way because the 'hash manager' is set to update the <div> acording to the hash, in order to work for people who bookmarked the page...no idea how to bypass this...

[Mauro Marchiori Neto]

i guess i need to uptate the location.hash so AnchorChecker dont feel like it has changed.

[Matt Foster]

I take it you're trying to handle the back button, take a look at my
approach, detailed in this article,
http://positionabsolute.net/blog/2007/07/javascript-history-service.php

[Andrew Dupont]

What you really need is something like RSH [1] or YUI's Browser
History Manager [2]. The former is library-agnostic and the latter has
few dependencies on YUI, if I recall.

Libraries like these are built to work across browsers with use-cases
like bookmarking, using the back button, and so on. I'd like to write
something like this for Prototype in the near future.

Cheers,
Andrew

[1] http://code.google.com/p/reallysimplehistory/
[2] http://developer.yahoo.com/yui/history/

On Oct 9, 3:19 pm, "Mauro Marchiori Neto" <mauron...@gmail.com> wrote:

[MikeFeltman]

I'm doing this with a period executer and it seems to work great.

// Monitor the hash in case the user clicked the back button.
new PeriodicalExecuter(function(pe) {
var lcDocument = window.location.hash;
if (lcDocument.length>1) {
// updateContent sets document.F1CMSContentId to the document id.
if (document.F1CMSContentId !== lcDocument.substring(1)) {
F1.UI.UpdateContent(lcDocument.substring(1));
}
}
}, .5);

[phoenix]

http://www.prototypextensions.com