我正在Rails 5.2.2中呈现一个搜索表单,并且具有确定该请求是AJAX请求还是HTML请求的逻辑。这是我的表格的样子:
<form id="form" action="/search" data-prev-query="test" data-remote="true" method="get">
<input type="text" name="q" id="search_query" value="test">
</form>
如果搜索查询与表单上的data-prev-query
属性不同,那么我希望表单提交是HTML请求,以便重新加载页面。否则,我希望表单提交是AJAX请求。这是我以编程方式从表单中删除data-remote
属性的逻辑:
$("#form").find("#search_query").change(function(e)
{
var theForm = $("#form");
var currentSearchQuery = theForm.find("#search_query").val();
var prevSearchQuery = theForm.data("prev-query");
var isRemote = (currentSearchQuery === prevSearchQuery);
if (isRemote === true)
theForm.attr('data-remote', isRemote);
else
theForm.removeAttr('data-remote');
});
我已经确认此代码可以按预期删除或添加data-remote
属性。但是,即使data-remote
属性被删除,该表单仍作为AJAX请求提交。
如何获取作为HTML请求提交的表单?顺便说一下,我没有使用Turbolinks。
答案 0 :(得分:2)
@chumakoff在评论中分享,我在this SO post上找到了答案。我还必须调用removeData('remote')
来清除jQuery的内部缓存。下面是我更新的代码。我在添加的行旁添加了评论。
$("#form").find("#search_query").change(function(e)
{
var theForm = $("#form");
var currentSearchQuery = theForm.find("#search_query").val();
var prevSearchQuery = theForm.data("prev-query");
var isRemote = (currentSearchQuery === prevSearchQuery);
if (isRemote === true)
{
theForm.removeData('remote'); // ADDED LINE
theForm.attr('data-remote', isRemote);
}
else
{
theForm.removeAttr('data-remote');
theForm.removeData('remote'); // ADDED LINE
}
});