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.
<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!
<script type="text/javascript" src="jquery.address-1.2.2.min.js?crawlable=true"></script>
_d.title
became
_d.title.replace('\'', '\\\'')
Thanks! I applied your patch and it will be a part of the next release.
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
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;' +
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");
Unfortunately, until there is a solution I won't be able to use jQuery Address.
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.
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>
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
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
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?
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
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!
a click to here gets myself to http://domain.com/#www.google.com instead.
how can i go about fixing this?
http://www.asual.com/download/jquery.address-1.2.2.zip
thank you
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.
basically fooling the change() function into thinking that the current address has changed so it reloads the url?
regards,
barry
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!
$(window).bind('hashchange',function(e){
//do something when the hash value is changed.
});
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.
Thank you!
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
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)
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
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.
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.