PHPのpretty urlsを使用したJquery BBQプラグイン

Question

jqueryのBBQプラグインを使用して、かなりのURLを使用して、フォワード/バックとブックマークのサポートを有効にする方法がわかりません。

http://mysite.com/store.php?cat_id=5は、ユーザー一度に着弾したとして、ブラウザ経由で直接PHPページにアクセスしたときにこれらのURLは明らかにのみ関連しているhttp://mysite.com/store/5

を経由してアクセスできるように、私は、Apacheのmod_rewriteルールを経由して、私のPHPページのためにかなりのURLを持っています彼らが訪問し、内部リンクのいずれかをクリックする最初のページは、私のJSによって傍受され、コンテンツはajax（つまり、ページをリロードする代わりに）によって更新されます。

これは、バック/フォワード機能とブックマーク機能が動作しないことを意味します。これは、実装するためにBBQに来る場所です。

かなりの例を見ると、私のhrefタグにはまだ＃が含まれていないので、かなりのURLでこの作業を行う方法を理解できません。私のHREFタグは次のようになります。

<a class='cat_link' href='/store/5' data-cat-id='5'> 

次jqueryのAJAX要求の実行中にそのリンクの結果をクリック：

$('#container').delegate(".cat_link", "click", function(){ 
    $.get('/views/tileview.php',{ cat_id: $(this).data('cat-id') }, function(result){ 
      $("#viewport").hide().html(result).fadeIn(750); 
    }); 
}); 

GETパラメータCAT_IDと/views/tileview.phpからAjaxのコンテンツをロード= 5を生成し、生成されたHTMLを#viewport divにロードします。

今、私の質問は、バーコードを使用してバック/フォワードとブックマークをサポートし、自分のHFSにハッシュを組み込むことなく（つまり現在のURLで）変更できますか？ また、URLを変更する必要があるかどうかに関係なく、URLがきれいで、 'パラメータ'が '？='の意味で使用されていないことをどう扱うのですか？

私の現在の実装は、リンクがビジターを正しいURLに連れて来るようになり、（ajax呼び出しと更新されたdivの代わりに完全なPHPページの読み込みが行われても）同じ内容を見ます。これは、バック/フォワードとブックマークのサポートを取得しながら、私が維持したいものです。かなり複雑だ

おかげ アーロン

Answer 1

@Hannesの優れたレスポンスの私のコメントによれば、私のイベントハンドラを書き換えてハッシュ変更をトリガーしてから、onhashchangeイベントを使用することで、 ajax呼び出しを行います。私はまた、Ben Almanのhashchangeプラグインを使って、IEや他のブラウザとの互換性を確保しています。

$(document).ready(function(){ 
    //pre-load spinner image to ensure it's already cached before it's used 
    var image = $('<img />').attr('src', '/js/spinner/ajax-loader.gif'); 
    var opts = { 
      img: '/js/spinner/ajax-loader.gif', 
      height: 42, 
      width: 42, 
      position: 'center', 
      hide: true 
     }; 
    var current_hash = ''; 
     //if this is a straight URL, cache the contents to use later in case 
     // of back button being used to come back here 
    if (window.location.hash == '') { 
     var cache_viewport = $('#viewport').html(); 
    } 

$('#container').delegate(".cat_link", "click", function(){ 
    var href = $(this).attr('href'); 
    window.location.hash = "#" + href; 
    return false; 
    }); 

$('#container').delegate(".product_tile_a", "click", function(){ 
    var href = $(this).attr('href'); 
    window.location.hash = "#" + href; 
    return false; 
    }); 


$(window).hashchange(function(){ 
    var hash = window.location.hash; 
     //if the new hash is a straight URL, reload the straight URL's html content 
    if (hash == '') { 
     $("#viewport").html(cache_viewport); 
    } 
    else if (hash != current_hash) { 
    var strings = hash.split("/"); 
    var action = strings[1]; 
    var param = strings[2]; 
    current_hash = hash; 
    callAjax(action, param); 
} 
}); 

function callAjax(action, param) { 
    switch(action) { 
     case 'store': 
     $("#viewport").spinner(opts); 
     $.get('/views/tileview.php',{ cat_id: param }, function(result){ 
      $("#viewport").spinner('remove'); 
      $("#viewport").hide().html(result).fadeIn(500); 
      }); 
      break; 
     case 'products': 
     $("#viewport").spinner(opts); 
     $.get('/views/productview.php',{ product_id: param },function(result){ 
      $("#viewport").spinner('remove'); 
      $("#viewport").hide().html(result).fadeIn(500); 
      }); 
      break; 
     default: 
     null; 
    } 
} 

//ensures hashchange is called on initial load in case of a bookmarked hash 
$(window).hashchange(); 

}); 

Answer 2

。しかし、BBQが上に構築されている下位レベルのjQueryを使うことができます... Ben Alman's siteのparamとdeparamの領域を参照してください。 $ .param.fragment（）;を使用できます。または$ .param.querystringを使用して、ハッシュのない値を返してプッシュします。クエリ文字列をプッシュする前に、クエリー文字列を再構築してApacheの書き換えを表すことができます。