HTML 视图在搜索 (ajax) 更新期间丢失状态答案

【问题标题】：HTML View loses state during search (ajax) updateHTML 视图在搜索 (ajax) 更新期间丢失状态
【发布时间】：2014-08-29 03:53:59
【问题描述】：

我一直在寻找解决这个问题的方法，但没有成功:(

我有一个列出产品的页面。该页面有两种布局（列表和网格），可以在视图之间切换（基本上更改视图后面的 CSS）这一切都按预期工作！

我在包含搜索框（文本输入）的页面上使用全文搜索，该搜索框根据输入的搜索字符串等过滤产品......这也按预期工作。

我在文本输入上有一个 keyup 事件侦听器，以便在每次按键时使用 ajax get 响应过滤数据。数据被正确过滤，但不考虑视图状态/开关。

例如默认视图是一个列表。如果我不更改视图和搜索，一切都会正确更新：正确的结果呈现为列表。但是，如果我更改为网格视图，然后搜索，虽然结果是正确的，但视图会切换回原始（列表）视图。

搜索结束后，切换开关也会停止工作。

我不确定，但似乎 $.get 方法响应重新加载了不包含已添加的任何添加类（与视图更改相关）的原始文件。似乎在文档加载时添加的所有 JS 都丢失了。

这“基本上”是我所拥有的：

CSS

.hideSection {
  display: none;
}

HTML

 <form accept-charset="UTF-8" action="/employees" id="employee_search" method="get">
     <input autocomplete="off" id="query" name="query" type="text">
 </form>

 <div class="btn-group">
   <button id="listViewButton" type="button" class="btn btn-default btn-sm">LIST</button>
   <button id="gridViewButton" type="button" class="btn btn-default btn-sm">GRID</button>
 </div>

HTML

<div id="listView" class="list-view">
    ...
</div>
<div id="gridView" class="grid-view hide-view" >
    ...
</div>

JS (CoffeScript)

$("#gridViewButton").click ->
    $(".gridView").removeClass "hideSection"
    $(".listView").addClass "hideSection"

$("#listViewButton").click ->
    $(".listView").removeClass "hideSection"
    $(".gridView").addClass "hideSection"

$("#employee_search input").keyup ->
    $.get $("#employee_search").attr("action"), $("#employee_search").serialize(), null, "script"
    false

如前所述，所有搜索都按预期工作，问题是视图在搜索时失去其状态（列表或网格），另外所有 JS 在搜索后似乎都不起作用 - 我不确定这是否可以做在检查器中查看 $.get 方法的响应时，它包含来自原始文件的 HTML，而不是更改视图等后修改的文件。

任何有关保持搜索视图状态的帮助将不胜感激！

谢谢，乔恩。

【问题讨论】：

标签： javascript jquery html css ajax

【解决方案1】：

listView 和 gridView 是 id 而不是 class 并使用 toggleClass() 之类的，

$("#gridViewButton").click ->
    $("#gridView,#listView").toggleClass "hideSection"

$("#listViewButton").click ->
    $("#listView,#gridView").toggleClass "hideSection"

【讨论】：

嗨，Rohan，感谢您的回复，但这是我的错 - 我只是快速将示例代码输入到这篇文章中。我实际上是在使用“#listView”、“#gridView”来引用 ID，这按预期工作，所以我认为这不是问题！？ - 我也会调查toggleClass！谢谢

【解决方案2】：

我设法实现所需行为的唯一方法是修改 Ajax GET 方法，通过添加成功处理程序并在此处理程序中修改 DOM 数据：

在我的 keyup 处理程序中，在 GET 之前，我将当前视图状态（添加到视图容器的样式）相应地保存在变量中。在 GET 中，在成功处理程序中，我在加载 DOM 后修改结果，将视图（样式）设置为新的（更改的）值（形成设置的变量）：

$("#employee_search input").keyup (event) ->
  alteredListViewHtml = $(".listViewEmployeeContainer").attr("class")
  alteredGridViewHtml = $(".gridViewEmployeeContainer").attr("class")

  $.get $("#employee_search").attr("action"), $("#employee_search").serialize(), ((result) ->
    $(".listViewEmployeeContainer").attr('class', alteredListViewHtml)
    $(".gridViewEmployeeContainer").attr('class', alteredGridViewHtml)
    viewToggleClickHandlers()
    return ), "script"

  false

我希望这是有道理的，可以帮助别人！

干杯，乔恩。

【讨论】：