Question

I’m using jQuery Address to handle deep linking with my AJAX application. My URLs are in the format: example.com/#/section/item/param/param/param... I have it setup with the .change() listener to handle different parts of the URL. So /project/my-project/view-item/2/compose would slide open the compose box under that project and that item. The problem is, whenever the URL gets changed to that, every action up to that point is called. (Actions that happen when the URL is just /project/my-project get called and so on.)

What is the best way to handle just the action I want without “going up the chain”?

Answer 1

The event variable is passed to the change function with the properties: value, path, pathNames, parameterNames, parameters, queryString. The property you want to monitor is pathNames.

Here are some snippets I’ve put together that could help you keep track of how deep you are as well as what exactly has changed:

var $current_path = window.location.hash;
$.address.change( function(event) {

   // get the difference in the two paths
   $changed_path = event.path.replace(new RegExp('^'+$current_path,'i'), '');

   // make sure we update the current path
   $current_path = event.path;

   // how deep is the new path?
   $level = event.pathNames.length;

   // break the changed part into segments, ignoring leading/trailing slashes
   $changed_path_array = $changed_path.replace(/^\/|\/$/g, '').split('/');

   // let's see what level actually changed from the current path
   $changed_level = $level - $changed_path_array.length;

} );

You can then organize the rest of your function by using the new depth in conjunction with the array of segments to pinpoint exactly what needs to update. Based on the $current_path, you may be performing a fresh page-load or just a tiny change somewhere on the page.