ユーザーがアイテムのリストを生成できるフォームを実装しています。これらのアイテムはモデルに対応し、そのモデルのオートコンプリート機能を実装しました。
現在フィールドにあるテキストを取得し、可能な項目の配列を返す autocomplete メソッドを適切なコントローラーに作成しました。
ユーザーが文字列「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>
おそらく、追加されている div に aまたは何かが欠けているため、DOM 全体が無効になると思いました。そうではないことを確認しました。
特に認証トークンを考慮すると、初期ロード後にフォームに非表示フィールドを追加することには本質的に問題があると思いました。ただし、フォームを追加する前に問題が発生します。オートコンプリート リストの div を DOM に追加するだけで、フォームが壊れます。
考えられる解決策:
従来のフォームヘルパーとフォームに固執する解決策が見つからない場合は、フォーム要素を完全に捨てて、jQuery 投稿を実行し、応答に基づいてクライアント側からリダイレクトできると思います。しかし、ここで何がうまくいかないのか興味があり、その解決策はハッキリしているようです。
誰かがこの問題について何か洞察を提供できれば、本当に感謝しています! ありがとう :)
更新 1
新しい開発として、私はプロセスから抜け出し始め、失敗につながるコード行 (の 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 バリデーターを実行し、次のエラーを修正しましたが、問題は解決しません (バグ修正チェックリストでこれを上に移動する必要があります)。
エレメント スクリプトの属性タイプの値 x-handlebars-template が正しくありません: サブタイプがありません。
- タイプを
"html/x-handlebars-template"
- タイプを
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()'}
。通常ボタンの何が問題なのかはまだわかりませんが、この問題から先に進む必要があります。皆さんの提案に感謝します。