URLからjQueryを使用して動的divコンテンツをロードする

Question

私は、ユーザが使用する検索タイプを定義するためのタブを使用するjQuery検索スクリプトを用意しています。ユーザーが検索すると、＃タイプ/クエリ /のようなURLが作成されます。ただし、ページをリロードすると、別のページに移動した結果をクリックするか、検索結果が表示されなくなった前のページから戻ることができます。なぜこれができ、私はこの問題をどうやって解決できますか？私はいずれのプラグインも使いたくない。

私のjQueryのコードは次のとおりです。

$(document).ready(function() { 
    $('[id^=type_]').click(function() { 
     type = this.id.replace('type_', ''); 
     $('[id^=type_]').removeClass('selected'); 
     $('#type_' + type).addClass('selected'); 
     return false; 
    }); 
    $('#type_search').click(); 
    $('#query').keyup(function() { 
     var query = $(this).val(); 
     var url = '/' + type + '/' + query + '/'; 
     window.location.hash = '' + type + '/' + query + '/'; 
     document.title = $(this).val() + ' - My Search'; 
     $('#results').show(); 
     if (query == '') { 
      window.location.hash = ''; 
      document.title = 'My Search'; 
      $('#results').hide(); 
     } 
     $.ajax({ 
      type: 'GET', 
      url: url, 
      dataType: 'html', 
      success: function (results) { 
       $('#results').html(results); 
      } 
     }); 
    }); 
    var textlength = $('#query').val().length; 
    if (textlength <= 0) { 
     $('#query').focus(); 
    } else { 
     $('#query').blur(); 
    } 
}); 

Answer 1

ページをリロードすると、彼らは文書のソースに含まれていないので、結果が欠落しているという理由があります。彼らは後でDOMに追加されました。

2つの選択肢がありますが、そのうちの最初のものは一般的に使用されています。

検索条件を実行するとき、または検索結果をサーバーに保存して、ページが次にレンダリングされたときに結果がレンダリングされるようにします。私はASP.NET MVC 3を使用し、PartialViewを使用してこれを行います。 jQueryを使用して検索を実行すると、サーバーは同じPartialViewをレンダリングし、結果のHTMLフラグメントを結果divに挿入します。

また、ページがリロードされたときにjQuery検索を再度実行する必要があります。

検索を再実行するか、結果をキャッシュする方が良いかどうかは、検索のコストと結果セットの可能性によって決まります。

Answer 2

ハッシュは、ブラウザの履歴の一部であるため、ページのリロード後も維持されます。 document.location.hashを解析して、選択したクエリの種類と検索に関する知識を得ることができます。

//$(function() { 
    if(document.location.hash) { 
     var hash = document.location.hash; 
     var split = hash.split('/'); 
     var queryType = hash[1]; 
     var searchTerm = hash[2]; 
     $('#type_'+queryType).addClass('selected'); 
     $('#query').text(searchTerm); 
     $('#query').keyup(); 
    } 
//}); 

セットアップルーチンの後ろにあります。