将搜索条件添加到网址，但无法返回

Question

I'm trying to get the parameters of my search criteria into the url so that it's possible to copy and paste the specific search.

Currently I have this:

 // Search criteria in the url
 var ready = function(e){
     $("#filterrific_filter").click(function(){
       $.get($("#filterrific_filter").attr("action"), $("#filterrific_filter").serialize(), null, "script");
       history.pushState(null, document.title, $("#filterrific_filter").attr("action") + "?" + $("#filterrific_filter").serialize());
       e.preventDefault();
     });
     $(window).bind("popstate", function() {
       $.getScript(location.href);
     });
 };
 $(document).ready(ready);
 $(document).on('page:load', ready);

The problem is: when a result is clicked on, and the users tries to go back to the search page again, they don't get back, they stay on the same page. The url changes though.

Here is a video to display the problem

And here is a link to the webpage, if you would like to test it yourself

Thanks in advance!

Answer 1

Try removing this whole section:

$(window).bind("popstate", function() {
  $.getScript(location.href);
});

Since your apartments#show action (a guess, assuming you're using a RESTful design in your Rails backend) is a round-trip request (not AJAX, like your filter), and your query string URL will run the filterrific scripts correctly on a reload, you might as well let the back button work the default way.

Disclaimer: this is a shot in the dark without more context. If it doesn't work for you, and you provide more context, I'll happily revisit.