3

フィルターと製品のリスト (id、name、creation_date) があります。

ID、名前、または作成日でフィルタリングできます。AJAX リクエストでコンテンツ div を更新しますが、明らかに URL は変わりません。

パラメータを URL に追加するにはどうすればよいですか? 例えば：

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

history.pushState(html5) が存在することは知っていますが、アプリが IE9 などの html4 ブラウザーで動作する必要があります。

History.js を使用するWiselinks ( https://github.com/igor-alexandrov/wiselinks ) を試しましたが、AJAX 要求は使用しません。

何か案は？

ありがとう

4

3 に答える 3

0

かなり時間が経ちましたが、役に立つかもしれません。コードも更新されているため、複数の ajax\remote リンクがある場合は、複数の URL のパラメータをマージできます。user1364684 の回答とこれに基づいて、URL を結合します。

# 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);
});
于 2016-08-23T15:23:28.820 に答える
0

いくつかの AJAX 呼び出し手段を実行しています。ラジオ ボタンの変更時に AJAX 部分を呼び出している必要があります。

したがって、ラジオボタンを使用してそれを行い、ラジオボタンの名前は「choose_product」であると想定しています

現在の日付を保存できる非表示フィールドをビューに追加できます。

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

JavaScript に次のコードを追加します。これは単なるサンプルであり、完全なソリューションではありません。

$(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();
});
于 2013-06-25T13:59:32.750 に答える