ColdfusionのAjax状態の履歴ページ

Question

これを行う方法は混乱しています。私はいくつかの入力要素と "適用"ボタン（提出ではない）を持つポップアップフィルタを持つページを持っています。ボタンをクリックすると、2つのjquery.get（）呼び出しが行われ、グラフ、DataTablesグリッド、写真、およびその他の情報が4つのタブに読み込まれます。グラフの中で、特定の要素をクリックすると、データはより細かいレベルにドリルダウンされる別のページに移動します。これはすべてうまくいきます。

問題は、元のページに戻って、グラフ/グリッド/写真などを作成したajaxを使用した場合です。元々は、元のフォーム変数にセッション変数を格納すると思っていましたクエリを返し、ページに戻る際に、セッション変数が見つかった場合は、元のajax呼び出しが再度行われ、タブを再入力します。

このメソッドで見つかった問題は、ブラウザの戻るボタンを使用してページに戻るときにセッション変数が設定されていることをColdfusionが認識しないことです。元のページと2番目のページの両方でセッション変数をダンプすると、2番目のページで新しく設定されたvarが表示され、ナビゲーションメニューから元のページに移動すると表示されますが、戻るボタン。

こんにちは、ここにAjaxのブラウザ履歴プラグインについての記事を投稿して、BBQなど、これを手助けする様々なjqueryプラグインがあるようです。このアプローチで見られる問題は、アンカー要素を使用してトリガーする必要があり、アンカーのhref属性を使用してクエリ文字列を変更することです。私は隠されたアンカーを含むようにページを修正できると思います。

私の質問は、これを達成する最善の方法であるBBQのようなajax履歴プラグインですか？戻るボタンでページに戻ったときにColdFusionに新しく作成されたセッションvarが表示されるようにする方法はありますか？または、ページの再構成を検討して、ajax呼び出しを代わりにフォームへのフォームの送信に置き換えるようにしてください。

いつものように、事前に感謝します。

EDIT：物事を明確にするのに役立ついくつかのコード： ここでは、元のAJAX呼び出しますボタンです：

<button id="applyFilter">APPLY</button> 

と#applyFilterに呼ばれるJSの一部は、$（ドキュメント）.readyを（に包まれました）：ユーザーはAJAX生成されたグラフ上のドリルダウンを呼び出すとき

$('#applyFilter').click(function(){ 
    // fill in the Photos tab 
     $.get('tracking/listPhotos.cfm', 
      { 
       id: id, 
       randParam: Math.random() 
      }, 
      function(response){ 
       $('#tabs-photos').html(response); 
      } 
     ); 
    }); 

最後に、それは必要な変数が移入されたMaintActionフォームを使用：

function DrillDown() { 
    //get the necessary variables and populate the form inputs 
    document.MaintAction.action = "index.cfm?file=somepage.cfm&Config=someConfig"; 
    document.MaintAction.submit(); 
} 

これは新しいページにわたります。最初のページに戻ってもらいたいのですが、ajaxを読み込んだ写真があります。

Answer 1

最高の賭けはBBQメソッドを使用することです。このため、アンカータグをページに実際に含める必要はありません。実際にそうすることは問題を引き起こすでしょう。このページ：http://ajaxpatterns.org/Unique_URLsは、基礎となるプロセスの仕組みを説明しています。私は、jQueryプラグインが実際の実装をずっと簡単にすると確信しています。

あなたの他の質問については、これをセッション変数でどうやって行うことができるかについて - 私は実際にBBQメソッドについて学ぶ前に、それと似たようなことをしました。これは、特にjqGridコンポーネントの状態を保存することでしたが、特定のAjax状態をサポートするように簡単に変更できます。基本的には、AJAXリクエストを介してサーバーに渡された最後のパラメータを格納している各コンポーネントのインスタンスごとに、セッション変数を保持していました。次に、クライアント側では、まずセッション変数から状態をフェッチするために、同期XHR要求をサーバーに戻して実行しました。その同期要求にコールバックメソッドを使用して、私はそれらの保存されたパラメータを使用してページのコンポーネントをセットアップします。これは私のために働いたが、もし私が再びそれをやらなければならないのであれば、BBQの方法に慣れるのはずっと簡単であり、複数のレベルの履歴を可能にするからだ。

あなたの更新に基づいていくつかのサンプルコード：

$('#applyFilter').click(function(){ 

    var id = $("#filterid").val(); // assumes the below id value is stored in some input on the page with the id "filterid" 
    // fill in the Photos tab 
     $.get('tracking/listPhotos.cfm', 
      { 
       id: id // I'm assuming this is what you need to remember when the page is returned to via a back-button... 
       //randParam: Math.random() - I assume this is to prevent caching? See below 
      }, 
      function(response){ 
       $('#tabs-photos').html(response); 
      } 
     ); 
    }); 


/* fixes stupid caching behavior, primarily in IE */ 
$.ajaxSetup({ cache: false }); 


$.ajax({ 
    async: false, 
    url: 'tracking/listPhotosSessionKeeper.cfm', 
    success: function (data, textStatus, XMLHttpRequest) 
    { 
     if (data.length) 
     { 
     $("#filterid").val(data); 
     $('#applyFilter').trigger('click'); 
     } 
    } 
}); 

これは、あなたが写真リストの状態を取得するために、クライアント側で必要なものです。サーバー側では、あなたが追跡/ listPhotos.cfmにこの変更を追加する必要があります：追跡、

<cfset session.lastUsedPhotoFilterID = URL.id> 

そして、この新しい1行のファイルを追加/ listPhotosSessionKeeper.cfm：一緒

<cfif IsDefined("session.lastUsedPhotoFilterID")><cfoutput>#session.lastUsedPhotoFilterID#</cfoutput></cfif> 

これらの変更は、ユーザーが最後に使用したIDを追跡し、ページがレンダリングされるたびに（バックボタンを使用して、または単にユーザーがページを再訪することによって）ロードします。