0

我有一个显示结果的页面。结果通过 (document).ready 上的 ajax 请求加载到内容 div 中。可以使用表单过滤结果。在 $(#filter_form).submit() 上，发出了 ajax 请求，并且内容 div 填充了过滤后的结果。到目前为止，一切都很好。

单击结果将在新页面中加载结果详细信息，非 ajax 加载。单击后退按钮后，我们返回结果页面，表单复选框仍处于选中状态，但过滤器不再应用于结果。显然，在 document.ready 上，发出了第一个未过滤的 ajax 请求并加载了未过滤的结果。

我最初的想法是在页面上准备检查是否检查了任何表单元素，如果是，则提交表单。问题是我不知道如何使这项工作。

我加载过滤结果的脚本是这样的：

$('#filter_form').submit(function(e){
e.preventDefault();

       $.ajax({
                url: '<?=base_url().'catalog/show_listings/?';?>'+queryString,
                type:'GET',
                data: $('form#filter_form').serialize(),
                dataType: 'json',
                success: function(listings){
                        $('#result_container').html(listings);
                    } // End of success function of ajax form       
         }); // End of ajax call
    });

我设法弄清楚如何检查是否有任何表单元素处于活动状态：

 var validate= false;

    $('#requestfilter_from').each(function(){
        if($(this).val() != '' || $(this).attr('checked'))
            validate = true;
    });

我只是不知道如何将两者结合起来。我尝试在第二个脚本中运行 ajax 请求（不再发布该脚本），但它没有提供任何结果。

任何建议或指示将不胜感激。

4

1 回答 1

1

我认为问题归结为保存过滤器的“状态”（即使用户离开页面，也要跟踪检查哪些状态）。

您可以通过将查询参数附加到 url 轻松地做到这一点。例如，如果有人选择了一个过滤器checkbox1，您可以附加&checkbox1=true到 url。这样，即使用户离开页面并点击后退按钮，您也会&checkbox1=true在 url 中。

现在，您需要修改数据的初始加载以考虑查询参数。所以不要一开始就加载所有数据。相反，解析查询参数，根据查询参数中的过滤器准备 url，然后触发加载初始数据的 ajax 查询。

以下是步骤-

  1. 在选择过滤器时，将查询参数附加到 url。
  2. On $(document).ready，解析查询参数，和
    • 确保更新输入框，以便它们反映过滤器的状态。例如，如果&checkbox1=true在 url 中找到，请确保input[name=checkbox1]选中。
    • 使用过滤器参数触发初始 ajax 查询

这是有奖金的。现在，您的用户还可以使用选定的过滤器传递 url。

PS：看看jQuery.param.querystring

于 2013-10-10T15:53:28.740 回答