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

HTML View loses state during search (ajax) update

本文关键字：状态 更新 视图 搜索 ajax HTML      更新时间：2023-09-26

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

我有一个列出产品的页面。该页面有两种布局（列表和网格），带有在视图之间切换的开关（基本上是更改视图后面的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，而不是更改视图等后的修改文件

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

谢谢，乔恩。

listView和gridView是id而不是class，并使用类似的toggleClass（）

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

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

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

干杯，乔恩。

相关文章：