Asual

Wednesday,
5 May 2010

jQuery Address 1.2 - Ajax Crawling, URL building and more

I'm happy to announce the strongest jQuery Address release up to date. In the last few months we put a lot of effort in adding new features and samples as well as incorporating bug fixes and community feedback.

Probably the most important update is the strong integration between the plugin and the Ajax Crawling mechanism promoted by Google. The sample that jQuery Address ships with is unobtrusive as possible and works even better than the Google's own GWT example. We used PHP to showcase all the aspects of this integration but we'll try to add samples for more languages in the near future.

Another huge improvement is the ability to build deep linking values part by part. It should replace any custom string concatenation functions that you have used in the past and simplify the cases where you need to use many different parameters. In order to build such values or queries without the generation of history entries in the browser you may need to use the new autoUpdate mode setting.

Other notable features are the wrap option which will generate a DIV wrapper for your content in order to prevent scroll issues with the hash fragments, the support for hash fragments inside the value and the utilization of the the HTML5 onhashchange event where possible.

Here is a list of all the changes:

  • New queryString, parameter and path setters.
  • New autoUpdate, crawling and wrap options.
  • New generic bind method.
  • New Accordion, Crawling and Form samples.
  • Support for hash fragments as a part of the value.
  • Basic support for forms.
  • Improved onhashchange support.
  • Switched samples to HTML5.
  • Switched to the Closure compiler.
  • JSLint compatibility.
  • Simple test suite.
  • Support for jQuery 1.4.2 and jQuery UI 1.8.

Any comments and opinions are welcome but please use the GitHub issue system for bug reports.

Download jQuery Address 1.2

« Previous Post | Next Post »

Comments:

Left by Bruno at Mon, 17 May 6:50 PM
Great work. I love your plugin.
Could you make a complete example integrated with jquery load method?
I get it to work but i think it´s far from perfect. For example in the first page it shouldn´t make an ajax call and load the default content but it does.
Left by Wandering Dude at Thu, 20 May 2:31 AM
c(this).attr("href") is undefined
http://localhost:8080/js/jquery.address-1.2.min.js
Line 18

Broken out of the box. Elements in question have an href, attempted a very simple use case, and it bombs as soon as the script loads Using jquery 1.3.2 Bad version in your download?

Also, your plugin looks nice but the API is quite terse and the examples are not really helpful in understanding how to implement it. No comments or anything.
Left by Rostislav at Thu, 20 May 8:49 AM
@Wandering Dude

This issue was reported multiple times and was addressed immediately. It's now fixed in the 1.2.1 release.

I'm sorry but our focus is on providing new features and functionalities to the people who can understand the provided samples.
Left by jugofeet at Wed, 9 Jun 7:50 AM
hey,I get it to work but i think it´s far from perfect. For example in the first page it shouldn´t make an ajax call and load the default content but it does.
Left by jsmania at Sun, 4 Jul 7:19 AM
Thanks for you plugin. Suppose you want to click on the link of the same page to return to the named anchor inside the page. since the URL is not changed, no event is fired so you have no choice but to handle the click and call the address but this cause some strange duplicate event to be fired and breaks the back button. I used the following to handle the named anchor problem. do you have a better suggestion?

$('a').click(function() {

var url = $(this).attr('href').substring(1);
if (url === $.address.value()){
handleHash(url);
}
});

$.address.change(function(event) {
//$("#dump").append($.dump(event) + '

');
var url = event.value;
$("#content").load(url, function(){
handleHash(url);
});

});

function handleHash(url){
var hash = url.split('#');
if (hash[1] == null ){
hash[1] = 'content';
}
var os = $("a[name*='" + hash[1] + "']").offset();

if (os != null){
var top = $("a[name*='" + hash[1] + "']").offset().top;
$('html, body').animate({scrollTop:top}, 0);
}
}
Left by Bridget at Tue, 20 Jul 5:39 PM
Has anyone dealt with going back to a previous page that didn't load using the Address Plugin?

For example, I load a page using a regular url, navigate to another using the same method then start using the AJAX Address plugin, I am having trouble going back into the pages that didn't load using the Address plugin. I added lines to add the value for the referring page but it adds two extra clicks and goes back to the non-Ajax loading page in my div as opposed to taking over the entire page. I tried adding a paramter with a flag saying it didn't load in AJAX but I think the two extra clicks are messing that up. Thanks in advance!

-Bridget
Left by Rostislav at Tue, 20 Jul 9:52 PM
@Bridget
Is this issue browser specific? Can you reproduce it with the samples hosted on this website?
Left by Filbert at Fri, 23 Jul 12:29 PM
Hi, I think I encountered a small bug with the crawler feature in IE7:

If you bookmark a page that has the crawler notation (#!) and load it in a fresh tab/window, you get a link without the exclamation point and the back button is active. if you click the back button, it will bring you back to the page with the crawler notation.

It seems to exist if you navigate out of the site, then back.

Thanks!
Left by Rostislav at Fri, 23 Jul 12:53 PM
@Filbert
The issue should be fixed in the latest 1.2.2 release but I had no time to update the samples on asual.com.
Left by Filbert at Mon, 26 Jul 4:02 AM
Hi,

I just downloaded the latest 1.2.2 release but the problem still seem to exist.

In addition to the problems stated before, if you refresh on a site that has the #! notation, once refreshed, the address will show # instead of #! and it will screw up the history. so say I navigate to www.abc.com/ then to www.abc.com/#!/id=1 and refresh this page, I will get www.abc.com/#/id=1, back button will bring me back to www.abc.com/#!/id=1 and I will not be able to go back to www.abc.com/.

Otherwise, keep up the good work! Thanks again!
Left by Rostislav at Mon, 26 Jul 10:16 AM
@Filbert
I have updated the demo samples to 1.2.2 and I can't reproduce the issue using http://www.asual.com/jquery/address/samples/crawling/#!/learn-more
Left by Filbert at Tue, 27 Jul 4:01 AM
@Rostislav

Do you mind contacting me via email about my issue? I'm just wondering if I'm not using your plugin correctly since I also cannot reproduce using your demo.

Thanks:)
Left by michael at Tue, 3 Aug 8:55 PM
Fantastic plugin, thank you!

What's the best way to get a link to be ignored by jquery.address? I'm adding the plugin to an existing application, and there are some areas I'd rather leave alone (and not have them break navigation when a # anchor is clicked to invoke an existing function).
Left by Rostislav at Tue, 3 Aug 9:03 PM
@michael
You can use any of the jQuery selector and filter capabilities to select the links you need and then apply the address function:
$(...).filter(...).address();
Left by Greg at Fri, 6 Aug 12:35 AM
What's the best way to allow a button to switch to a different tab? I tried this in an onclick
$('#tabs').tabs('select', 2);
but it only switched the display and didn't update the browser address bar. Currently I'm using the following which works but I'm curious if there is a better way to handle it?
$('#tabs a[href=#Help]').click();

Thanks in advance
Left by trace9 at Tue, 17 Aug 7:41 PM
jquery 1.4.2, address-1.2.2 - Firebug shows 'd is undefined' on line 42 which is causing inconsistent results. Please advise.
Left by Jack at Thu, 19 Aug 7:50 PM
Been using swfaddress (and now jQuery address) for many many years.

Have you considered adopting the new HTML5 push state API in your library? Its currently supported in chrome and safari (soon ff).
http://badassjs.com/post/840846392/location-hash-is-dead-long-live-html5-pushstate

Now that we can finally do true history without needing the # hash tag, it'd be pretty bad ass if a major library such as yours adopted it. Would love to see further adoption across the web.

Thanks for all your hard work!
Left by Rostislav at Wed, 25 Aug 10:37 AM
@Greg
Unfortunately at the moment I can't offer you a better approach. The integration with the widget is done in a very delicate way so that it can cover all the possible cases and this led to breaking the API support. I'll see if this can be improved.

@trace9
I can't reproduce you report. Please, double check it.

@Jack
This is definitely on the list for 1.3 but will require some sort of URL rewriting support from the server. Hopefully this feature will be added in IE9.
Left by jas at Thu, 26 Aug 5:26 AM
was wondering where do i go about to remove the function that is updating the title in the browser like now the title is: your title - filenameyouhaveclickedon
Left by Rostislav at Thu, 26 Aug 7:57 AM
@jas
Look for the $.address.title(value) function calls and remove them.
Left by jas at Thu, 26 Aug 1:47 PM
thanks rostislav!
what is the way to make my hyperlinks in my content (not the tabs/navigation) deep linkable?
Left by Chris at Sat, 28 Aug 2:53 PM
I love this plugin. I want to use my blog. Thank you.
Left by mighdoll at Sun, 29 Aug 2:31 AM
Here's a blank html page with jquery and jquery.address-1.2.2.js: http://gist.github.com/555760
-- it fails.

Help?
Left by deep at Mon, 30 Aug 12:42 PM
Hello, very good idea to add external and internal change events. But you forgot

public static var onExternalChange:Function;

in SWFAddress class.

Thanks.
Left by Jacques De SAGAN at Wed, 1 Sep 9:35 AM
Hello, I am using your jQuery Address Plugin to build a ajax wordpress blog. It's so cool a plugin! Thanks very much. However, I have encountered just a problem that if a internalChange event happens and changes the deep link's value to "/" (strict mode on), the url shown in browser location bar will be "http://domain.com/...#", not "http://domain.com/...#/", with no ending slash. in other cases the location bar's URL is "http://domain.com/...#/deep-link" as expected.

Would you please tell me how to fix it. Thanks.
Left by Rostislav at Wed, 1 Sep 9:52 AM
@mighdoll
Sorry, I can't reproduce it on a Mac. I will try Ubuntu later today.

@deep
Thanks! It's now in the SVN.

@Jacques De SAGAN
This is how the plugin is designed to work. When you open the page without any hash value the plugin still returns "/".
Left by Rostislav at Wed, 1 Sep 11:55 AM
@mighdoll
I'm now posting this from Ubuntu 10.04 LTS using Firefox 3.6.8 with Firebug 1.5.4. The problem doesn't reproduce. Please, double check your files and their encodings.
Left by Oskar Austegard at Thu, 9 Sep 5:03 PM
This is vaguely off-topic, but I'd love to see a blog post with an explanation for how you use query string parameters to initialize the script (from inside the script tag itself), as you do in http://www.asual.com/jquery/address/samples/crawling:

<code><script type="text/javascript" src="jquery.address-1.2.2.min.js?<b style="color:red">crawlable=true"></script> </code>
I looked through the code but couldn't quite grok it.

Thanks!
Left by Oskar Austegard at Thu, 9 Sep 5:05 PM
PS! The Live preview of comments encodes html - the resulting comments escape the html... The script tag above is obv supposed to read
<script type="text/javascript" src="jquery.address-1.2.2.min.js?crawlable=true"></script>
Left by Terren Musselwhite at Mon, 11 Oct 11:56 PM
Thank you so much for this wonderful plugin (jquery.address). I love it. I wanted to let you know that I found a bug and am pretty sure a solution as well. I thought I would post this in case anyone else ran into my problem. The problem is that in IE 7 & 8 (didn't test 6), if you have a page with an apostrophe in the page title, the plugin doesn't properly track the forward/back buttons. I found the problem to be in the iframe source that gets set in order to track the changes. All I did was add a replace method to the document's title to escape the apostrophe character (Line 141):
_d.title
became
_d.title.replace('\'', '\\\'')
Left by Rostislav at Tue, 12 Oct 8:35 AM
@Terren

Thanks! I applied your patch and it will be a part of the next release.
Left by ruby at Tue, 19 Oct 9:50 PM
I am using the latest jquery address-1.3.js and jquery version 1.3.2.It is giving the permission denied error in IE6 and IE7. It works fine in IE8 and firefox. Any workrounds to get through that?
Left by jay at Fri, 22 Oct 4:53 AM
vers 1.3

When I load the sample stats project it would make this url http://localhost/test into http://localhost/test/#// or if called http://localhost/test/index.php into http://localhost/test/#/#/index.php .. this prevented me from linking and bookmarking ( back and forward buttons still worked fine) because if i say http://localhost/test/#/food/pasta it would make it http://localhost/test/#/#/food/pasta

i fixed this by removing line 441 . I'm no js expert so if this was not erroneous could you please provide some feedback as to why it happened. i also reproduced in FF, chrome, opera and IE

Thanks
Left by jay at Fri, 22 Oct 5:09 AM
i just checked and what i said above worked in ff opera and ie but chrome still did not fire the event properly
Left by j at Tue, 26 Oct 8:03 PM
Found a CSS IE7 Issue in 1.2 and 1.3 need to add position: relative a known issue for IE 7 and 6.

1.2
.wrap(
'<div id="'
+ o
+ '" style="height:100%; overflow:auto; position:relative;'



1.3 Line 180

.wrap('<div id="' + ID + '" style="height:100%; overflow:auto; position:relative;' +
Left by Ruby at Tue, 2 Nov 12:22 AM
The comment given by Bridget is correct. If i load my page for the first time, and then click on some link which does something like $.address.value("some/url"); and then if i hit the back button my page should reload, but this is not the case in this plugin!
Left by Richard King at Wed, 3 Nov 3:27 PM
I am serialising a form and having the state placed in the address bar. At the moment everything is being converted to html entities (eg #/hotTub%3Dyes). It is also doing this with ampersands (%26).

Is there a way to force jquery.address to place non-html entities in the address bar?

I am setting the address with: $.address.path("hotTub=yes");
Left by Majnu at Sat, 6 Nov 2:32 PM
Bridget's issue is exactly our problem as well. We do a lot of ajax loading, but some pages load normally without ajax. This mixed scenario does not work well with jQuery Address at present.
Unfortunately, until there is a solution I won't be able to use jQuery Address.
Left by Mowd at Fri, 19 Nov 8:09 AM
I have the same issue like @ruby. In IE6 & IE7 with the latest jQuery Address 1.3, it always shows permission denied javascript error. The 1.2.2 version doesn't has this issue.
Left by Rostislav at Fri, 19 Nov 11:54 AM
@Richard King
You can try using $.address.parameter("hotTub", "yes") or $.address.value("/?hotTub=yes")

@Majnu
The plugin cannot guess which pages should be loaded normally and which should use Ajax. It's up to you to control these by adding the plugin only to the links that should load content on the same page.

@Mowd
Can you reproduce this with one of the samples available on this website? I just tried IE7 and it works fine here. Some more details or a test case will be appreciated.
Left by Fred at Fri, 19 Nov 5:36 PM
I'm having the same problem described by @Mowd and @ruby. However, I'm using jquery 1.4.4. I can't reproduce it in any of the samples yet, but the error appears to have something to do with line 213 where the contentWindow of a frame is being referenced.
Left by Brandon at Tue, 14 Dec 3:28 AM
Great jQuery pluggin! Any plans of porting a Mootools version in the future?
Left by Alter at Thu, 16 Dec 2:39 PM
The same of @Mowd, @ruby and @Fred
Actually i've used jquery 1.4.2 and address 1.3.1
I've tried the simplest test and throws the error "Permission denied" only in IE (6 to 8). Try this:
< html>
< head>
< script src="js/jquery/core/jquery-1.4.2.min.js" type="text/javascript">< /script>
< script src="js/jquery/plugins/jquery.address-1.3.1.min.js" type="text/javascript">< /script>
< /head>
< body>test< /body>
< /html>
Left by Alter at Thu, 16 Dec 2:47 PM
BTW
All the examples here: http://www.asual.com/jquery/address/samples/ (at least the three first examples) uses the 1.2.2 version, not 1.3.1
Left by Alter at Thu, 16 Dec 4:30 PM
Adding the DOCTYPE to the HTML fix the problem in IE8, but the error persist in IE6-7
The examples included in the zip works when are viewed in a address like U:\jquery.address-1.3.1\samples\accordion\index.html
but fail, when is a intranet domain (¿maybe?), like: http://192.168.0.234:8080/030033/accordion/index.html
Left by Erock at Thu, 23 Dec 5:02 PM
i've got a page with tabs and also an ajax 'grid' with multiple pages (page1, page2, etc). one of the tabs loads the grid and they both contain an instance of this plugin.

i want to be able to come into the page with the params saying something like 'load tab2 and load page2 within tab2'). the tab does switch, but the page2 of the grid does not load.

example url: http://mysite.com#!?tab=2&pagenum=2

basically, i think there's an issue with having 2 (conflicting?) address calls on the page.

any ideas on how to fix?
Left by Devon at Tue, 28 Dec 8:00 PM
I actually had the same problem as @Mowd, @ruby and @Fred, but found my solution here:

http://orbited.org/ticket/108

It turns out my document.domain block was too late in the script calls. Moving it earlier fixed things for me.

Devon
Left by scopes at Wed, 12 Jan 6:03 PM
I was also seeing the document.domain problem in ie6 & ie7 but I had no other document.domain declarations anywhere else in the code that would need to be moved above this script.

Commenting out line 140 or so seems to fix the issue:
(_d.domain != _l.host ? '";document.domain="' + _d.domain : '') +

I'm not yet sure if there are any issues with removing that code... I assume that for most of use we do not have document.domain set and therefore it would automatically match if not declared when this iframe gets built. My other thought was to actually build an empty html file and set it to the source of this iframe (instead of creating it on the fly), but I'm hopeful that just removing it inside of my installation continues to test well.

Please let me know if you run into any issues with this,
Jim

PS - thanks for your excellent work!
Left by Yan at Tue, 18 Jan 3:22 PM
the deeplinking works well. but i realised i cannot have any external links on the site.
a click to here gets myself to http://domain.com/#www.google.com instead.

how can i go about fixing this?
Left by Alexandros at Wed, 26 Jan 4:35 PM
Where can I find the previous version of your great plugin? I want to download version 1.2.2 but I do not see it here.
Left by Alexandros at Wed, 26 Jan 4:51 PM
All the previous official version are available for download using the following convention:

http://www.asual.com/download/jquery.address-1.2.2.zip
Left by Davidino at Sat, 29 Jan 12:44 PM
what is the best way to develop a nested navigation? by now i've some problems with it... there is a way to avoid # in url... i see something like that in the "express" and "state" sample, but these are quite complex.
thank you
Left by Ben at Thu, 3 Feb 10:44 PM
1.2 appears to be broken with the latest jQuery release (1.5). It throws an error on load. So far I've only seen the error on Opera 11 and IE 7, but it appears to be related to the use of this selector: [rel*=address:]. 1.5 seems to be more strict in its parsing of selectors, in so far as at requires quotes around selector values. Replacing the above selector with [rel*='address:'] seems to fix it.
Left by Memo at Fri, 11 Feb 11:01 PM
For fixing the issue described by @Mowd, @ruby and @Fred

Add the following line of code at the beginning of your html document:

<script> document.domain = document.domain; </script>

Seems silly, but actually makes a lot of sense.
Left by barry at Sun, 13 Mar 11:54 AM
Is there a way that when using Address, to basically refresh the current pages content without doing it in the traditional sense?

basically fooling the change() function into thinking that the current address has changed so it reloads the url?

regards,
barry
Left by Brian at Thu, 24 Mar 8:26 PM
Is there any way to eliminate the hash? Calling value('') results in the url ending with "#/". I'd like to remove it entirely.
Left by swagger at Tue, 12 Apr 10:34 PM
I am using your addresser with jquery tabs, and my tabbed content is loaded via ajax. With the content that is loaded via ajax - there are also links loaded (in the html of the ajax content) that when clicked, are loaded into the active jquery tabs panel.

How do i enable/use jquery address to remember these ajax loaded pages and the related tab that they were loaded into?

MAJOR HELP NEEDED!
Left by swagger at Mon, 25 Apr 10:32 PM
Ended up using my own JQuery function with `simple` jquery selectors and events. If anyone is interested jquery has build in hash change support using:

$(window).bind('hashchange',function(e){
//do something when the hash value is changed.
});
Left by Swathi at Mon, 27 Jun 11:56 AM
Hi ,
I have s:file upload tag in my jsp.and one sx:autocompleter tag.
if i change the element in sx:autocompleter the ajax to work.
But the s:file tag is preventing not to work ajax properly.
Can you give me some idea.Pls…..
Im trying this for past one week…..
Thanks in advance.
Left by d2d at Wed, 27 Jul 1:57 AM
Please let me know if their is a way to remove the hash (#) from the url or perhaps to change it to a question mark (?). Would like my urls to show ..../test.php?id=2&name=nancy instead of .../test.php#/id=2&name=nancy. Thanks.
Left by faxianhu at Fri, 19 Aug 9:29 AM
I'm not yet sure if there are any issues with removing that code... I assume that for most of use we do not have document.domain set and therefore it would automatically match if not declared when this iframe gets built. My other thought was to actually build an empty html file and set it to the source of this iframe (instead of creating it on the fly), but I'm hopeful that just removing it inside of my installation continues to test well.
Left by Kadin at Sat, 24 Sep 5:12 AM
This issue was reported multiple times and was addressed immediately. It's now fixed in the 1.2.1 release.
Left by Laptop cpu cooling fan at Sat, 12 Nov 1:41 AM
Our great value products for our customers and aim to develop a large customer base. Please feel free to look around, if you have any questions, contact us. We are a electronic components,
Left by Alex at Sat, 12 Nov 7:00 PM
Hi.It is great!!! Please update you plugin to 1.5 in this site, and add a version only for jQuery 1.7, please.
Thank you!
Left by Axel Huizinga at Sun, 13 Nov 6:50 AM
Found a problem in version 1.4:
inside of the _unescape function I had to change the line
$(this).attr('href', '#' + href.replace(new RegExp('/(.*)\\?' + fragment + '=(.*)$'), '!$2'));
into:
$(this).attr('href', '#' + unescape(href.replace(new RegExp('/(.*)\\?' + fragment + '=(.*)$'), '!$2')));

to make the crawling sample work again - without the change the links appear like :
samples/crawling/#!/%2Flearn-more
which of course results in a 'page not found'

Cordially,Axel
Left by Eza at Wed, 14 Dec 4:34 PM
Hey Rostislav great plugin! thanks for your work!

I'm currently using it in a ajax heavy web app that I'm building and I was wondering if it's possible to remove the # character from the address so rather than having domain.com/#/settings/section it would just be domain.com/settings/section

I remember using the jquery history plugin on another project years ago and it had an option to set a custom # character, or I may have hacked around removing it all together. I haven't looked at an unminified version of your code yet, but would this be hard to do? or do you know if anyone has made this modification already? or would you mind if I did? :)

Basically our site only has deep-linked urls, and apart from that its just one page, so there doesn't need to be any cases for regular urls.

(I just posted this in your 1st entry for your address plugin accidentally as I came here via a google search and landed on that one first, sorry for the double up)
Left by daniele at Thu, 12 Jan 12:55 PM
great plugin, yesterday i made my colleagues gasp with:"what?! you change the URL without refresh??!?" :)
but i cannot understand why, if you open a link of the site in Internet Explorer, (example: http://voidbrain.net/about )
the URL is right but the page shown is the root
Left by Rostislav at Thu, 12 Jan 1:42 PM
@daniele
Only Internet Explorer 10 supports the HTML5 pushState mechanism. Previous versions should replace the address with http://voidbrain.net/#/about. I'm not sure this works well with the 1.4 release but I believe it's fixed in the GitHub development copy. Your packaging script has deleted the license/version comment and I can't see which version you're using. The crawlable option doesn't make sense if you use the state feature.
Left by Hamming at Sun, 2 Sep 9:20 PM
Hello. I'm using jquery address crawling and I need help.
I want to nest two data1.xml and data2.xml connections.
I'm a bit useless and I've only made ​​the connection data1.xml.
Have any of you can guide me?
Thank you.

Projects

Syndication

Blog Search

Blog Categories

Blog posts

Recommended sites