我一直在四处寻找解决方案,但没有成功:(
我有一个列出产品的页面。该页面有两种布局(列表和网格),带有在视图之间切换的开关(基本上是更改视图后面的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
我希望这是有道理的,可以帮助别人!
干杯,乔恩。