如何在加载时显示表单

时间:2019-01-07 09:18:05

标签: javascript jquery html cocoon-gem cocoonjs

如何在加载时显示表单。现在,我可以在单击按钮(添加按键技能)时看到表单字段。我希望所有功能都可以一起工作。在加载时,我想查看表格并单击onclick``添加关键技能''或``删除关键技能'',它应该添加和删除(现在单击添加或删除它就可以了,但看不到加载后的表格,只有单击“添加关键技能”,我才能看到该表格)

$(function()
{
    function check_to_hide_or_show_add_key_skill_link()
    {
        if ($('#key_skills .nested-fields:visible').length == 4) {
            $('#key_skills .links a').hide();
        } else {
            $('#key_skills .links a').show();
        }
    }

    $('#key_skills').on('cocoon:after-insert', function()
    {
        check_to_hide_or_show_add_key_skill_link();
    });

    $('#key_skills').on('cocoon:after-remove', function()
    {
        check_to_hide_or_show_add_key_skill_link();
    });

    check_to_hide_or_show_add_key_skill_link();
});

我的表格 关键技能*

<div id="key_skills">
  <%= f.simple_fields_for :key_skills do |key_skill| %>
    <div class="nested-fields">
      <div class="field">
        <%= f.input :name , input_html: { class: 'form-control keySkill', required: true }%>
          <%= f.input :relevant_experience, input_html: { class: 'form-control', required: true } %>
            <%= link_to_remove_association "Remove Skill", f %>
      </div>
    </div>
    <% end %>
      <div class="links">
        <%= link_to_add_association 'Add Key Skill', f, :key_skills, class: "links" %>
      </div>
</div>

这是我当前的输出。在单击添加关键技能时,我将获得表格,但我希望它在加载时) enter image description here

1 个答案:

答案 0 :(得分:1)

由于您没有提供很多信息,所以我不知道顶级元素的名称是什么,但是让我们假设它是Job,并且工作中有很多key_skills

在您的JobsController中有一种create方法,大致如下:

def create
  @job = Job.new 
end 

如果您想立即添加一个关键技能来填写,可以直接编写

def create
  @job = Job.new 
  @job.key_skills.build 
end 

(这将添加一个空的键技能以进行填写)。

有关茧库的相关问题:https://github.com/nathanvda/cocoon/issues/420