0
私のプロジェクトでは、クリックしたときにスライドをトグルするボタンがあります。この1つの状況を除いて、期待どおりに動作します。なぜ私のページをリフレッシュした直後に、slideToggleでボタンをクリックしなければならないのですか？
フォームが表示されていないとき、トグルボタンをクリックするとフォームが表示され、フォームが送信されるか、最初に表示されたボタンが再表示されるか、フォームを非表示にするためにクリックされました。
状況：リフレッシュ直後に、トグルボタンが最初にクリックされた場合、フォームは表示され、追加のクリックなしでは表示されないようにスライドバックされます。
サーバー上では、両方とも同じ要求に見えます。リフレッシュ直後
：それは表示されたままの形表示をする
Started GET "https://stackoverflow.com/users/1/categories/new" for 127.0.0.1 at 2017-01-23 12:09:33 -0500
Processing by CategoriesController#new as JS
Parameters: {"user_id"=>"1"}
User Load (0.6ms) SELECT "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2 [["id", 1], ["LIMIT", 1]]
Rendering categories/new.js.erb
Rendered categories/_form.html.erb (3.6ms)
Rendered categories/new.js.erb (9.3ms)
Completed 200 OK in 28ms (Views: 20.6ms | ActiveRecord: 0.6ms)
セカンドクリック：
以下Started GET "https://stackoverflow.com/users/1/categories/new" for 127.0.0.1 at 2017-01-23 12:11:22 -0500
Processing by CategoriesController#new as JS
Parameters: {"user_id"=>"1"}
User Load (0.4ms) SELECT "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2 [["id", 1], ["LIMIT", 1]]
Rendering categories/new.js.erb
Rendered categories/_form.html.erb (2.4ms)
Rendered categories/new.js.erb (5.7ms)
Completed 200 OK in 18ms (Views: 13.1ms | ActiveRecord: 0.4ms)
は私の関連するコードです：
index.html.erb ：
<div class="row">
<ul id="categories-list"><%= render @categories %></ul>
<div class="row">
<%= link_to new_user_category_path, remote: true do %>
<button>New Category</button>
<% end %>
</div>
<div class="row">
<div id="category-form" style="desplay:none;"></div>
</div>
</div>
CategoriesController：
...
respond_to :js
def new
@category = current_user.categories.build
end
def create
@category = current_user.categories.create(category_params)
@category.save!
end
...
new.js.erb：
$('#category-form').html("<%= j (render 'form') %>");
$('#category-form').slideToggle(350);
$('#category_name').focus();
_form.html.erb
<div id="category-form">
<%= simple_form_for shallow_args(current_user, @category), remote: true do |f| %>
<%= f.input :name %>
<%= f.button :submit, "Add" %>
<% end %>
</div>
create.js.erb：
$('#categories-list').append("<%= j (render @category) %>");
$('#category-form').slideUp(350);
のjQueryまだ私には少し混乱しています。何が起こっているのか、どのように修正するのかを説明するための助けに感謝します。前もって感謝します。