Rails 5.2-删除data-remote属性不会将表单提交为HTML请求

时间:2019-03-05 04:27:18

标签: ruby-on-rails remote-forms rails-ujs

我正在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。

1 个答案:

答案 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
  }
});