Question

我一直在寻找解决方案，但没有成功:(

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

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

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

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

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

我不确定，但似乎$ .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

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

对于保持视图状态进行搜索的任何帮助都将非常感谢！

谢谢，乔恩。

Answer 1

listView和gridView为id而非class并使用toggleClass()之类，

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

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

Answer 2

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

在我的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

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

干杯，乔恩。

HTML视图在搜索（ajax）更新期间丢失状态

2 个答案: