时间戳

首页 > 解决方案 > 在模态框内清除表单字段

jquery - 在模态框内清除表单字段

问题描述

Rails 5.2
Bootstrap 4

我有一个带有内置表单的模态。这是一个测试表格，将测试笔记保存到表格中。保存工作正常，但单击“保存”按钮时评论部分不清除。

我怎样才能让它清除（不关闭模式）？

#TestModal.modal.fade aria-hidden="true"
  .modal-dialog role="document"
    .modal-content
      .modal-header Test Modal
        h3.modal-title
        button.close aria-label="Close" data-dismiss="modal" type="button"
          span aria-hidden="true"  ×
      .modal-body
        = simple_form_for :test_model, url: test_model_url, method: :post do |f|
          .form_group
            = f.text_area :note, rows: 15
          button.btn.btn-secondary data-dismiss="modal" type="button" Cancel
          button.btn.btn-primary type="submit" Save

这是我尝试过的：

#TestModal.modal.fade aria-hidden="true"
  .modal-dialog role="document"
    .modal-content
      .modal-header Test Modal
        h3.modal-title
        button.close aria-label="Close" data-dismiss="modal" type="button"
          span aria-hidden="true"  ×
      .modal-body
        = simple_form_for :test_model, url: test_model_url, method: :post do |f|
          #NoteEntryForm.form_group
            = f.text_area :note, rows: 15
          button.btn.btn-secondary data-dismiss="modal" type="button" Cancel
          button.btn.btn-primary type="submit" Save

并创建了一个views/notes/create.js.slim，并放入其中：

javascript:
    $('#NoteEntryForm').val('')

但是当我尝试保存时，我收到以下错误消息：

NotesController#create is missing a template for this request format and variant. request.formats: ["text/html"] request.variant: []

标签： jqueryruby-on-rails

解决方案

由于表单是通过 AJAX/JS 提交的，因此您也可以使用 JS 对其进行响应。您需要一个与接收提交的参数的控制器操作同名的视图文件，并且该视图文件需要具有 .js.slim 扩展名。

假设你有一个这样的笔记控制器：

class NotesController < ApplicationController
  def create
    @note = Note.new(note_params)
    @note.save
  end
end

然后你需要一个名为 create.js.slim 的视图文件，在里面你可以使用 jquery 来清除表单：

$('#test_model_note').val('');

如果 ID 正确，您需要检查 DOM，但我认为这将由表单助手以这种方式生成。

推荐阅读