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

我一直在四处寻找，试图找到解决方案，但没有成功：

我有一个列出产品的页面。该页面有两个布局列表和网格，通过切换在视图之间切换，基本上改变了视图背后的CSS，这一切都按预期进行

我在页面上使用全文搜索，包含搜索框文本输入，根据输入的搜索字符串等过滤产品。。。这也如预期的那样起作用

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

例如，默认视图是一个列表。如果不更改视图和搜索，则所有内容都将正确更新：正确的结果将作为列表呈现。但是，如果我更改为网格视图，然后进行搜索，尽管结果正确，但视图会切换回原始列表视图

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

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

这基本上就是我所拥有的：

CSS

HTML

如前所述，所有搜索都按预期工作，问题是视图在搜索时会松开其状态列表或网格，此外，所有JS在搜索后似乎都不工作-我不确定这是否与$.get方法在inspector中查看时的响应有关，它包含原始文件中的HTML，而不是更改视图后修改的文件等

如果您能在搜索时保持视图状态，我们将不胜感激

谢谢， Jon.

listView和gridView的id不是类和用法

---

我实现所需行为的唯一方法是修改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

我希望这是有意义的，可以帮助别人

干杯，

---

Jon.

你好，Rohan，谢谢你的回复，不过这是我的错-我只是快速地将示例代码输入了这篇文章。我实际上是在使用listView、gridView引用ID，这是按预期工作的，所以我假设不是问题！？-我也会调查toggleClass！谢谢

 <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>

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

$("#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

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

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

$("#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