CODEWITHSUNDEEP
jquery
Adam
Adam

Reputation: 73

jQuery Address - Back Buttons

Hi I'm trying to get an AJAX website & jquery.address-1.3.2.min.js to work.

I have .click() events using .load to update a DIV working successfully. I've updated the with eg: rel="address:profile" and I can see the URL changing as I click around different links.

I've also put this code in:

$(function() {
  $.address.change(function(event) {
    alert('here');
  });
});

I can see the .change() event is being trigged.

I'm unsure how to write the code to get the back/forward buttons to actually work (sorry I'm new to JQUERY). I've seen examples on the web but still confused. Hopefully for a really simple example.

Also do I need to re-run the .load() to load the DIV again. That said the alert trigger isn't isolated to back or forward browser button clicks.

thankyou

Upvotes: 4

Views: 2824

Answers (3)

Francisco Goldenstein
Francisco Goldenstein

Reputation: 13767

When choosing a plug-in for subscribing to hash changes, be aware that the new version of jQuery doesn't suppor browser detection, they work with feature detection. Because of this, some old plug-ins don't work anymore. That happened to me when I wanted to use jQuery Address. The plug-in that worked for me is called Path.js (https://github.com/mtrpcic/pathjs). My context was: a page with multiple steps and I wanted to be able to go back to the previous state using the back button of the browser. This is how I configured it:

 Path.map("#2").to(function () {
        showStep2Page(); // hides the current DIV and shows the step 2 DIV
    });
    Path.map("#1").to(function () {
        showStep1Page();
    });
    Path.map("").to(function () { // this allows me to go to the first step and show the step 1 DIV 
        showStep1Page();
    });
    Path.listen(); // listens to changes in URL hash (after the pound sign (#))

Upvotes: 0

Willy Carman
Willy Carman

Reputation: 81

Now you need to make the necessary changes to your div inside the $.address.change() event to go to the desired state, all your page state changes go inside that event.

In jquery address you need to perform two basic tasks, first, make your links change the deep linking value, using events like you did but making them update the $.address.value(value_here) method; and second, catch all the changes using the change() event to apply the changes in your page's state.

You can also use the value() attribute to determine the correct state, for example

$("a").onClick(function () {            //You dont need this part if you used
  $address.value($(this).attr('href')); //the 'rel' attribute in the links
});

$.address.change(function(event) {     //Catching URL change in `event`
  $.ajax({                             //You said you're using AJAX so
    url: "."+event.value+".html",      //using `value` attr. to get the URL+html
    cache: true,
    success: function(response) {
      $("#content_div").html(response);    //loading page in div using AJAX
    }
  });
});

that's just an example, you can use it to load your pages in any other way you like, since $.address.value() returns the value after the # thats your deep linking value.

Once you do this, the back and forward buttons will change the page's URL, the change() event will catch that and your page will work as expected.

So basically you need to develop a certain level of understanding about how jquery address works and work your code arround that. Also the jquery address docs page have a list of all the methods and events, in case you forget about any of them.

Upvotes: 2

Martín Coll
Martín Coll

Reputation: 3794

didn't really understand your question, but if you are trying to make back button work with an ajax page (for example you change the hash and return to the previous one with back button) I suggest using Ben Alman's jQuery BBQ.

There are some good tutorials and it worked great for me.

Upvotes: 0

Related Questions