0

I've got a page with cascading drop down lists (the available options of one drop down list is determined by the selection of another). I was an ajax call to fill this second select:

$.ajax({
    url: "/sport_types/"+$(this).val()+"/leagues"
    dataType: "json"
    success: (data) ->
      $(".league_selector option").remove()
      row = "<option value=\"\">Choose a League...</option>"
      $(".league_selector").append(row)
      $.each data, (i, j) ->
        row = "<option value=\"" + j.id + "\">" + j.league_name + "</option>"
        $(".league_selector").append(row)
  })

This works fine, but if a user clicks the back button on their browser, this dynamically generated content is not loaded.

I'm running a rails app, just in case there's an easy way to handle this in rails, awesome. If not, any good ol' HTML/jQuery tricks would be greatly appreciated.

Tyler DeWitt
  • 23,366
  • 38
  • 119
  • 196
  • try to base you solution oh hash http://stackoverflow.com/questions/136937/is-there-a-way-to-catch-the-back-button-event-in-javascript – Anton Baksheiev Sep 27 '12 at 22:40

2 Answers2

0

Hitting the back button in the browser is equivalent to a page refresh , so obviously you HTML will be defaulted to the normal state.

If you wish this approach to work you have to store the data either in a cookie or a session and populate in on refresh..

Sushanth --
  • 55,259
  • 9
  • 66
  • 105
0

If you click back button, not all browser refresh one. Some of them takes one from cash, so it will be usefull if you add this code. And if you hash is changed you need download your 'source'

var hash = location.hash;

setInterval(function()
{
    if (location.hash != hash)
    {
        alert("Changed from " + hash + " to " + location.hash);
        hash = location.hash;
    }
}, 100);

OR

You can use history plugin jquery-history

Pay attention on jQuery.fn.hashchange event

Anton Baksheiev
  • 2,211
  • 2
  • 14
  • 15