为什么刷新页面后立即必须单击带有slideToggle的按钮两次才能使未切换的表单可见？

Question

In my project, I have a button that toggleSlides down a form when it is clicked on. Except in this one circumstance, it works exactly as expected.

What I expect: When the form is not visible, when the toggling button is clicked the form will appear and remain visible and accessible until either the form is submitted or the button that toggled it visible in the first place is re-clicked making the form not visible.

What happens: Immediately after a refresh, if the toggling button is the first button clicked on, the form will toggle visible and slide back up to not be visible without any additional clicks.

On the server, they both appear to the same request.

Immediately after a refresh:

Started GET "/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)

Second click to make the form visible where it remains visible:

Started GET "/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)

Below is my relevant code:

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 is still a little confusing to me. I appreciate any help you're able to provide explaining what is going on and how to fix it? Thanks in advance.

Answer 1

So in case anyone gets here with the same issue, I had a typo in my index.html.erb file.

<div id="category-form" style="desplay:none;"></div>

Should have been:

<div id="category-form" style="display:none;"></div>