Uncaught TypeError: $ (...) [0] .reset не является функцией - PullRequest
0 голосов
/ 08 октября 2019

Цель

После того, как форма успешно отправлена, я хотел бы сбросить форму на пустую.

Проблема

После отправки формы в консоли появляется следующее сообщение об ошибке: Uncaught TypeError: $(...)[0].reset is not a function

Когда я console.log своего содержимогоперед сбросом я получаю форму: <div id=new-store-form>..</div>

Что я проверял до сих пор

  • В моем приложении нет идентификаторов, классов или чего-либо ещееще, которые называются «сброс»
  • Чистый javascript document.getElementById('new-store-form').reset(); возвращает мне то же сообщение об ошибке.

Код views / stores / index.html.erb

<div class="show-panel-form"></div>
  <%= render "partials/show_panel_stores_overview"%>
</div>

views / partials / show_panel_stores_overview.html.erb

<%= link_to 'New store', new_store_path, remote: true %>

views / stores / new.js.erb

var form = $("<%= j(render 'form') %>");
var wrapper = $('<div>').attr('id', 'new-store-form').append(form);
$('.show-panel-form').html(wrapper);

views / stores / _form

<%= simple_form_for (Store.new) do |f|%>
<%= f.input :name %>
<%= f.button :submit%>

views / stores.create.js.erb

var form = $("<%= j(render 'form') %>");
var wrapper = $('<div>').attr('id', 'new-store-form').append(form);
$('.show-panel-form').html(wrapper);
console.log($("#new-store-form")[0])
$("#new-store-form")[0].reset(); // doesn't work

контроллер магазина

def new
    @store = current_user.store.build
    @store.age_tables.build
    respond_to do |format|
      format.html { redirect_to root_url, alert: 'Page not accessible' }
      format.js
    end
    authorize @store

  end

  def create
    @store = current_user.stores.create(store_params)
    authorize @store
    if @store.save
      respond_to do |format|
        format.js
      end
    else
      format.js
    end
  end

1 Ответ

1 голос
/ 08 октября 2019

Используйте селектор, соответствующий форме, а не оболочку $('#new-store-form form').reset() (обратите внимание на дополнительную «форму», чтобы выбрать фактический тег формы внутри div)

...