Question

我对如何实现这一点很困惑。我有一个页面，有一个弹出过滤器，它有一些输入元素和一个“应用”按钮（不是提交）。单击该按钮时，将进行两次jquery .get（）调用，将图形，DataTables网格，照片和其他信息加载到四个单独的选项卡中。在图表中，如果单击特定元素，则用户将被带到另一个页面，在该页面中数据被钻取到更精细的级别。这一切都运作良好。

问题是如果用户决定回到原始页面，但是使用ajax生成的图形/网格/照片等。最初我认为我会存储一个会话变量，其中包含用于形成原始查询的过滤器变量，并在返回页面时，如果找到会话var，将再次进行原始的ajax调用，重新填充选项卡。

我在这个方法中发现的问题是Coldfusion在使用浏览器的后退按钮返回页面时无法识别会话变量已设置。如果我在原始页面和第二页面都转出会话var，我可以在第二页看到新设置的var，如果我通过导航菜单转到原始页面，我可以看到它，但如果我使用后退按钮。

所以....从这里阅读有关ajax浏览器历史插件的帖子，似乎有各种各样的jquery插件可以帮助解决这个问题，包括烧烤。我用这种方法看到的问题是它需要使用锚元素来触发它，然后使用锚点的href属性修改查询字符串。我想我可以修改页面以包含隐藏的锚点。

我的问题，最后是：像BBQ这样的ajax历史插件是实现这一目标的最佳方式，还是有办法让Coldfusion在通过后退按钮返回页面时看到新创建的会话变量？或者，我是否应该考虑重新设计页面，以便将ajax调用替换为返回页面的表单？

提前感谢，一如既往。

编辑：一些代码有助于澄清事情：这是进行原始ajax调用的按钮：

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

和部分js调用#applyFilter，包含在$（document）.ready（）中：

$('#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请求以从该会话变量获取状态。使用该同步请求的回调方法，然后使用这些保存的参数在我的页面上设置组件。这对我有用，但是如果我不得不再次这样做，我肯定会选择烧烤方法，因为处理起来要简单得多，而且还允许多个历史记录。

基于您的更新的一些示例代码：

$('#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');
      }
   }
});

这是您在客户端获取照片列表状态所需的内容。在服务器端，您需要将此修改添加到tracking / listPhotos.cfm中：

<cfset session.lastUsedPhotoFilterID = URL.id>

并添加这个新的单行文件，tracking / listPhotosSessionKeeper.cfm：

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

这些更改将跟踪用户使用的最后一个ID，并在每次呈现页面时加载它（无论是通过后退按钮，还是仅通过用户重新访问页面）。

冷冻页面中的Ajax状态历史

1 个答案: