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，并在每次呈现页面时（无论是通过后退按钮还是仅由用户重新访问页面）加载它。