3

我正在实现一个允许用户生成项目列表的表单。这些项目对应于一个模型，我已经为该模型实现了自动完成功能。

我在适当的控制器中创建了一个自动完成方法，该方法获取当前字段中的文本并返回一个可能项目的数组。

如果用户输入字符串“ba”，以下 div 可能会添加到 DOM：

<div class='list'>
  <div class='autocomplete_item' data-title='Banana' data-object-id='3'>
    <span class='match'>Ba</span>nana
  </div>
</div>

一旦“添加”了一个项目，就会将一对隐藏字段添加到表单中：

<input type='hidden' id='item_1_id' name='item[1][id]' value='5' />
<input type='hidden' id='item_1_title' name='item[1][title]' value='Banana' />

问题：

一旦自动完成 div 添加到 DOM，表单的提交按钮就会变得无响应。单击它会触发，不会触发任何事件，不会发出任何请求，并且不会在我知道的任何控制台中导致 JavaScript 错误。

尝试的解决方案和误解：

我认为表单的 authentication_token 存在某种问题，所以我使用 :authentication_token => false 将其删除。这并没有解决问题。

我想也许 Rails 表单需要一个 id。向所有新的隐藏字段添加 ID 没有任何效果。

我认为可能附加的 div 缺少 a</div>或其他内容，这会导致整个 DOM 变得无效。我已经验证不是这种情况。

我认为在初始加载后将隐藏字段添加到表单中存在固有的错误，特别是考虑到身份验证令牌。但是，在添加任何表单之前会出现问题。只需将自动完成列表 div 添加到 DOM 就会破坏表单。

一个可能的解决方案：

如果我找不到坚持使用传统表单助手和表单的解决方案，我想我可以完全放弃表单元素并执行 jQuery 发布并根据响应从客户端重定向。但我很好奇这里出了什么问题，而且这个解决方案似乎很老套。

如果有人能就这个问题提供任何见解，我将不胜感激！谢谢 ：）

更新 1

作为一个新的发展，我已经开始退出这个过程并找到（其中一个？）导致失败的代码行。请参阅下面的相关咖啡脚本：

init_autocomplete = () ->

  $('.autocomplete')
    .keydown(handle_keydown)
    .keyup(handle_keyup)
    .click(handle_click)

  $(document).on('click', '.autocomplete_item', null, select_item)
  $(document).click(hide_list)

handle_click = () ->

  ### *** if I insert 'return' here, the form submit button still works.

  autocomplete_wrapper = $(this).parent()

  ### *** if I insert 'return' here, the form submit button fails.

  unless autocomplete_wrapper.data('object-id')

    autocomplete($(this))

显然，有关访问输入字段的父项的某些事情导致了这个问题。这很不幸，因为我依赖父 div 来定位自动完成菜单。

更新 2

我运行了 w3c 验证器并修复了以下错误，但问题仍然存在（我应该将它移到我的错误修复清单中）：

  1. 元素脚本上属性类型的错误值 x-handlebars-template：缺少子类型。

    • 替换类型为"html/x-handlebars-template"

  2. label 元素的 for 属性必须引用表单控件。

    • 替换<label for="nonexistent_field">为<div class="label>

更新 3

我通过= f.submit在我的 HAML 中替换为%input.submit_form{:type => 'button', :value => 'Create Lesson', :onclick => '$(this).parent().submit()'}. 我仍然不确定普通按钮有什么问题，但我需要继续解决这个问题。感谢大家的建议。

4

1 回答 1

0

在我的 autocomplete_init 方法中$(document).click(hide_list)，方法 hide_list 没有返回任何内容（也没有阻止默认或停止传播）。我添加return true了这个方法，问题就解决了。

于 2013-06-26T14:29:45.917 回答