Rails 3: update URL params with AJAX request

问题

I have a filter and a list of products (id, name, creation_date).

I can filter by id, name or creation_date. With an AJAX request I update a content div... but obviously the URL not change.

How can I append params to URL? For example:

localhost:3000/dashboard/catalog?name=radio&?date_creation=23-06-2013

I know that history.pushState(html5) exists... but I need that my app works in html4 browsers like IE9.

I tried Wiselinks (https://github.com/igor-alexandrov/wiselinks) which it uses History.js but it doesn´t use AJAX request.

Any ideas?

thanks

回答1:

Finally I follow those RailsCasts tutorials:

http://railscasts.com/episodes/240-search-sort-paginate-with-ajax?language=es&view=asciicast

http://railscasts.com/episodes/246-ajax-history-state?language=es&view=asciicast

回答2:

You are doing some AJAX call means, you must have invoked the AJAX part on radio button change

So I am assuming, you have done it using by radio button and the radio button name is 'choose_product'

You can add a hidden field in your view, where you can store your current date.

<div id='parentDiv'>
 <%= hidden_field_tag 'current_date', Time.now.strftime('%d-%m-%Y') %>
 Your radio button code
</div>

In the javascript add the following code. It is just a sample not complete solution.

$(document).ready(function(){
 var showProducts = function(){
  $("#parentDiv").on('click', "input[name='choose_product']", function(){
   var ajax_url = 'localhost:3000/dashboard/catalog';
   var url_param = '';

   switch($(this).val()){
    case 'creation_date':
     var param_date = $('#current_date').val();
     url_param = '?name=radio&date_creation=' + param_date;     
     break;
    case 'name':
     // Your code goes here
    default:
     //Your code goes here
   }

   // Here you will get the modified url dynamically
   ajax_url += url_param

   $.ajax({
    url: ajax_url,
    // your code goes here
   }); 
  });
 }

 showProducts();
});

回答3:

A lot of time has passed, but it may be useful. The code is also updated so if you have more then one ajax\remote link you will be able to merge the params of multiple urls. Based on user1364684 answer and this for combine urls.

# change ".someClassA" or "pagination" to the a link of the ajax elemen
$(document).on('click', '.someClassA a, .pagination a', function(){
    var this_params = this.href.split('?')[1], ueryParameters = {},
        queryString = location.search.substring(1), re = /([^&=]+)=([^&]*)/g, m;

    queryString = queryString + '&' + this_params;

    #Creates a map with the query string parameters
    while m = re.exec(queryString)
        queryParameters[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);

    url = window.location.href.split('?')[0] + "?" + $.param(queryParameters);

    $.getScript(url);
    history.pushState(null, "", url);

    return false;
});

# make back button work 
$(window).on("popstate", function(){
    $.getScript(location.href);
});

来源：https://stackoverflow.com/questions/17298104/rails-3-update-url-params-with-ajax-request

标签

ruby-on-rails

ajax

ruby-on-rails-3

url

params