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.
Comments:
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.
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.
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.
$('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);
}
}
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
Is this issue browser specific? Can you reproduce it with the samples hosted on this website?
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!
The issue should be fixed in the latest 1.2.2 release but I had no time to update the samples on asual.com.
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!
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
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:)
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).
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();
$('#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
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!
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.
Look for the $.address.title(value) function calls and remove them.
what is the way to make my hyperlinks in my content (not the tabs/navigation) deep linkable?
-- it fails.
Help?
public static var onExternalChange:Function;
in SWFAddress class.
Thanks.
Would you please tell me how to fix it. Thanks.
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 "/".
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.