Ajax狀態歷史in coldfusion頁面

Question

我很困惑如何實現這一點。我有一個頁面，它有一個彈出式過濾器，它有一些輸入元素和一個「應用」按鈕（不是提交）。當點擊按鈕時，會創建兩個jquery .get（）調用，它們會將圖形，DataTables網格，照片和其他信息加載到四個單獨的選項卡中。在圖形內部，如果點擊某個特定元素，用戶將被帶到另一個頁面，在該頁面中將數據鑽取到更精細的級別。所有這一切運作良好。

問題是，如果用戶決定回到原來的頁面，但與ajax生成的圖形/網格/照片等。原本我以爲我會存儲一個會話變量與過濾器變量用於形成原查詢，並在返回頁面時，如果找到會話變量，則會再次進行原始ajax調用，重新填充選項卡。

我用這種方法找到的問題是Coldfusion在使用瀏覽器的後退按鈕返回到頁面時無法識別會話變量已設置。如果我在原始頁面和第二頁面都轉儲了會話變量，我可以在第二頁看到新設置的變量，如果我通過導航菜單轉到原始頁面，我可以看到它，但如果我使用後退按鈕。

SO ....從閱讀這裏關於ajax瀏覽器歷史插件的帖子，似乎有各種各樣的jquery插件幫助，包括燒烤。我用這種方法看到的問題是它需要使用錨元素來觸發它，然後使用錨的href屬性修改查詢字符串。我想我可以修改頁面以包含一個隱藏的錨點。

我的問題，最後是：是ajax歷史插件像燒烤最好的方式來實現，或者有辦法讓Coldfusion在通過後退按鈕返回頁面時看到新創建的會話變量？或者，我是否應該考慮重新設計頁面，以便將Ajax調用替換爲表單提交返回頁面的方式？

在此先感謝，一如既往。

編輯：一些代碼，以幫助澄清事情： 下面是使原來的Ajax調用按鈕：

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

和部分呼籲#applyFilter的JS的，包裹在$（文件）。就緒（ ）：

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

最後，當用戶調用對AJAX生成的圖形向下鑽取，它使用已被填充了所需要的變量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

最好的選擇是使用燒烤方法。爲此，您不必實際在頁面中包含錨定標記;事實上，這樣做會造成問題。本頁面：http://ajaxpatterns.org/Unique_URLs解釋了底層過程的工作原理。我相信一個jQuery插件會讓實際的實現更容易。

關於你的其他問題，關於如何用會話變量完成 - 我已經做了類似的事情，在瞭解有關燒烤方法之前。這特別是爲了保存一個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> 

並添加這個新行的文件，跟蹤/ listPhotosSessionKeeper.cfm：

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

一起這些更改將跟蹤用戶使用的最後一個ID，並在每次呈現頁面時（無論是通過後退按鈕還是僅由用戶重新訪問頁面）加載它。