0

サイトのヘッダーに小さな検索フォームがあります。フォームでは、検索するキーワードを入力し、チェック ボックスを使用して検索するフィールドを示し、スライダーを使用して年の範囲を指定できます。私が抱えている問題は、次のシナリオが実行されるときです。

  1. ユーザーが検索を入力して結果を取得する
  2. ユーザーが検索を変更し (キーワードの追加、日付スライダーの変更、検索に含めるフィールドの 1 つをオフにする)、新しい結果を取得します。
  3. ユーザーが戻るボタンをクリックする

戻るボタンをクリックすると、検索ボックスのフォーム データは予想どおり以前に入力されたデータに戻りますが、チェック ボックスとスライダーを変更しても以前の値には戻りません。

すべてのフォーム データは@Html.TextBoxFor(o => o.Field)アプローチを使用して ViewModel にマップされ、フォームは GET アクションとして送信されます。ブラウザーがフォーム データと [戻る] ボタンを処理する方法について、私の理解にはギャップがあると確信しています。

アップデート

現在、この問題に対処している方法は次のとおりです。

  1. フォームに設定autocomplete="off"します。これにより、チェック ボックス項目への変更が [戻る] ボタンで保持されなくなります。その後、テキスト入力ボックスと同じように、以前の設定に直感的に変更されます。

  2. 範囲スライダーは少しトリッキーでした (私は jQRangeSlider を使用しています)。これをクエリ文字列と一致させるために、この質問 ( https://stackoverflow.com/a/2880929/1803682 ) の JavaScript を使用してクエリ文字列の値を取得し、デフォルトでない場合は手動で設定しました。結果は次のようになります。

    $(document).ready(function() {
  var urlParams;
  var match,
    pl = /\+/g, //Regex for replacing addition symbol with a space
    search = /([^&=]+)=?([^&]*)/g,
    decode = function(s) { return decodeURIComponent(s.replace(pl, " "));},
    query = window.location.search.substring(1);
  urlParams = {};
  while (match = search.exec(query)){
    urlParams[decode(match[1])] = decode(match[2]);
  }
  $("#slider").rangeSlider("values", urlParams["SY"], urlParams["EY"]);
});

ここでまだ簡単な問題が見つからない場合は、フィードバックをいただければ幸いです。

更新 2

jQueryでの$(document).readyイベントは、戻るボタンに関してクロスブラウザーで一貫したアプローチになるとは思えません。autocomplete="off"また、最初のテストでは、スライダーでも機能しているようには見えません。

ここでの関連する議論: Is there a cross-browser onload event when click the back button?

4

1 に答える 1

0

フォームの設定autocomplete="off"により、この問題は解決しました。質問にいくつかの詳細を追加しました。

于 2013-08-23T20:57:00.890 に答える